@digdir/designsystemet 1.0.0-next.47 → 1.0.0-next.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,7 +10,7 @@ export declare const configFileSchema: z.ZodObject<{
10
10
  themes: z.ZodRecord<z.ZodString, z.ZodObject<{
11
11
  colors: z.ZodObject<{
12
12
  main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
13
- support: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
13
+ support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>>>;
14
14
  neutral: z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>;
15
15
  }, "strip", z.ZodTypeAny, {
16
16
  main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
@@ -19,7 +19,7 @@ export declare const configFileSchema: z.ZodObject<{
19
19
  }, {
20
20
  main: Record<string, string>;
21
21
  neutral: string;
22
- support: Record<string, string>;
22
+ support?: Record<string, string> | undefined;
23
23
  }>;
24
24
  typography: z.ZodObject<{
25
25
  fontFamily: z.ZodString;
@@ -43,7 +43,7 @@ export declare const configFileSchema: z.ZodObject<{
43
43
  colors: {
44
44
  main: Record<string, string>;
45
45
  neutral: string;
46
- support: Record<string, string>;
46
+ support?: Record<string, string> | undefined;
47
47
  };
48
48
  typography: {
49
49
  fontFamily: string;
@@ -69,7 +69,7 @@ export declare const configFileSchema: z.ZodObject<{
69
69
  colors: {
70
70
  main: Record<string, string>;
71
71
  neutral: string;
72
- support: Record<string, string>;
72
+ support?: Record<string, string> | undefined;
73
73
  };
74
74
  typography: {
75
75
  fontFamily: string;
@@ -89,7 +89,7 @@ export declare const combinedConfigSchema: z.ZodObject<{
89
89
  themes: z.ZodRecord<z.ZodString, z.ZodObject<{
90
90
  colors: z.ZodObject<{
91
91
  main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
92
- support: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>;
92
+ support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>>>>;
93
93
  neutral: z.ZodEffects<z.ZodString, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`, string>;
94
94
  }, "strip", z.ZodTypeAny, {
95
95
  main: Record<string, `#${string}` | `rgb(${number} ${number} ${number})` | `hsl(${number}deg ${number}% ${number}%)` | `hsv(${number}deg ${number}% ${number}%)` | `hsluv(${number} ${number} ${number})` | `lab(${number}% ${number} ${number})` | `lch(${number}% ${number} ${number}deg)` | `oklab(${number}% ${number} ${number})` | `oklch(${number}% ${number} ${number}deg)` | `jab(${number}% ${number} ${number})` | `jch(${number}% ${number} ${number}deg)`>;
@@ -98,7 +98,7 @@ export declare const combinedConfigSchema: z.ZodObject<{
98
98
  }, {
99
99
  main: Record<string, string>;
100
100
  neutral: string;
101
- support: Record<string, string>;
101
+ support?: Record<string, string> | undefined;
102
102
  }>;
103
103
  typography: z.ZodObject<{
104
104
  fontFamily: z.ZodString;
@@ -122,7 +122,7 @@ export declare const combinedConfigSchema: z.ZodObject<{
122
122
  colors: {
123
123
  main: Record<string, string>;
124
124
  neutral: string;
125
- support: Record<string, string>;
125
+ support?: Record<string, string> | undefined;
126
126
  };
127
127
  typography: {
128
128
  fontFamily: string;
@@ -149,7 +149,7 @@ export declare const combinedConfigSchema: z.ZodObject<{
149
149
  colors: {
150
150
  main: Record<string, string>;
151
151
  neutral: string;
152
- support: Record<string, string>;
152
+ support?: Record<string, string> | undefined;
153
153
  };
154
154
  typography: {
155
155
  fontFamily: string;
@@ -25,7 +25,7 @@ const themeSchema = z.object(
25
25
  colors: z.object(
26
26
  {
27
27
  main: colorCategorySchema,
28
- support: colorCategorySchema,
28
+ support: colorCategorySchema.optional().default({}),
29
29
  neutral: colorSchema
30
30
  },
31
31
  { description: "Defines the colors for this theme" }
@@ -44,14 +44,14 @@ function makeTokenCommands() {
44
44
  (radiusAsString) => Number(radiusAsString),
45
45
  4
46
46
  ).option("--theme <string>", "Theme name (ignored when using JSON config file)", DEFAULT_THEME_NAME).option(
47
- "--json <string>",
48
- `Path to JSON config file (default: "${DEFAULT_CONFIG_FILE}")`,
49
- (value) => parseJsonConfig(value, { allowFileNotFound: false })
47
+ "--config <string>",
48
+ `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`,
49
+ (value) => parseConfig(value, { allowFileNotFound: false })
50
50
  ).action(async (opts, cmd) => {
51
51
  if (opts.dry) {
52
52
  console.log(`Performing dry run, no files will be written`);
53
53
  }
54
- const configFile = await (opts.json ? opts.json : parseJsonConfig(DEFAULT_CONFIG_FILE, { allowFileNotFound: true }));
54
+ const configFile = await (opts.config ? opts.config : parseConfig(DEFAULT_CONFIG_FILE, { allowFileNotFound: true }));
55
55
  const propsFromJson = configFile?.config;
56
56
  if (propsFromJson) {
57
57
  const themeColors = Object.values(propsFromJson?.themes ?? {}).map(
@@ -60,7 +60,7 @@ function makeTokenCommands() {
60
60
  if (!R.all(R.equals(R.__, themeColors[0]), themeColors)) {
61
61
  console.error(
62
62
  chalk.redBright(
63
- `In JSON config ${configFile.path}, all themes must have the same custom color names, but we found:`
63
+ `In config ${configFile.path}, all themes must have the same custom color names, but we found:`
64
64
  )
65
65
  );
66
66
  const themeNames = R.keys(propsFromJson.themes ?? {});
@@ -103,7 +103,7 @@ function makeTokenCommands() {
103
103
  try {
104
104
  config = combinedConfigSchema.parse(unvalidatedConfig);
105
105
  } catch (err) {
106
- console.error(chalk.redBright("Invalid config after combining JSON file and CLI options"));
106
+ console.error(chalk.redBright("Invalid config after combining config file and CLI options"));
107
107
  const validationError = makeFriendlyError(err);
108
108
  console.error(validationError.toString());
109
109
  process.exit(1);
@@ -137,12 +137,12 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
137
137
  }
138
138
  });
139
139
  await program.parseAsync(process.argv);
140
- async function parseJsonConfig(jsonPath, options) {
141
- const resolvedPath = path.resolve(process.cwd(), jsonPath);
142
- let jsonFile;
140
+ async function parseConfig(configPath, options) {
141
+ const resolvedPath = path.resolve(process.cwd(), configPath);
142
+ let configFile;
143
143
  try {
144
- jsonFile = await fs.readFile(resolvedPath, { encoding: "utf-8" });
145
- console.log(`Found JSON config file: ${chalk.green(resolvedPath)}`);
144
+ configFile = await fs.readFile(resolvedPath, { encoding: "utf-8" });
145
+ console.log(`Found config file: ${chalk.green(resolvedPath)}`);
146
146
  } catch (err) {
147
147
  if (err instanceof Error) {
148
148
  const nodeErr = err;
@@ -154,11 +154,11 @@ async function parseJsonConfig(jsonPath, options) {
154
154
  }
155
155
  try {
156
156
  return {
157
- path: jsonPath,
158
- config: await configFileSchema.parseAsync(JSON.parse(jsonFile))
157
+ path: configPath,
158
+ config: await configFileSchema.parseAsync(JSON.parse(configFile))
159
159
  };
160
160
  } catch (err) {
161
- console.error(chalk.redBright(`Invalid JSON config in ${jsonPath}`));
161
+ console.error(chalk.redBright(`Invalid config in ${configPath}`));
162
162
  const validationError = makeFriendlyError(err);
163
163
  console.error(validationError.toString());
164
164
  process.exit(1);
@@ -30,7 +30,9 @@
30
30
  "description": "One or more color definitions"
31
31
  },
32
32
  "support": {
33
- "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main"
33
+ "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main",
34
+ "description": "One or more color definitions",
35
+ "default": {}
34
36
  },
35
37
  "neutral": {
36
38
  "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main/additionalProperties"
@@ -38,7 +40,6 @@
38
40
  },
39
41
  "required": [
40
42
  "main",
41
- "support",
42
43
  "neutral"
43
44
  ],
44
45
  "additionalProperties": false,
@@ -1 +1 @@
1
- {"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA8BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AA+PnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
1
+ {"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA8BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAwOnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
@@ -2,7 +2,7 @@ import { expandTypesMap, register } from "@tokens-studio/sd-transforms";
2
2
  import * as R from "ramda";
3
3
  import StyleDictionary from "style-dictionary";
4
4
  import { outputReferencesFilter } from "style-dictionary/utils";
5
- import { DEFAULT_COLOR, buildOptions } from "../build.js";
5
+ import { buildOptions } from "../build.js";
6
6
  import { isColorCategoryToken, isDigit, pathStartsWithOneOf, typeEquals } from "../utils.js";
7
7
  import { formats } from "./formats/css.js";
8
8
  import { jsTokens } from "./formats/js-tokens.js";
@@ -70,8 +70,8 @@ const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme },
70
70
  };
71
71
  const colorCategoryVariables = (category) => ({ "color-scheme": colorScheme, theme, [`${category}-color`]: color }, { outPath }) => {
72
72
  const layer = `ds.theme.color`;
73
- const isDefault = color === buildOptions?.accentColor;
74
- const selector = `${isDefault ? ":root, [data-color-scheme], " : ""}[data-color="${color}"]`;
73
+ const isRootColor = color === buildOptions?.rootColor;
74
+ const selector = `${isRootColor ? ":root, [data-color-scheme], " : ""}[data-color="${color}"]`;
75
75
  const config = {
76
76
  usesDtcg,
77
77
  preprocessors: ["tokens-studio"],
@@ -101,29 +101,6 @@ const colorCategoryVariables = (category) => ({ "color-scheme": colorScheme, the
101
101
  }
102
102
  }
103
103
  };
104
- if (isDefault && color !== DEFAULT_COLOR) {
105
- console.log(
106
- `Creating "${DEFAULT_COLOR}" color variables pointing to "${color}", since a color named "${DEFAULT_COLOR}" is not defined`
107
- );
108
- const defaultColorConfig = R.mergeDeepRight(config, {
109
- platforms: {
110
- css: {
111
- selector: ":root",
112
- files: [
113
- {
114
- ...config.platforms?.css?.files?.[0],
115
- destination: `color/${DEFAULT_COLOR}.css`
116
- }
117
- ],
118
- options: { replaceCategoryWith: DEFAULT_COLOR }
119
- }
120
- }
121
- });
122
- return [
123
- { config },
124
- { config: defaultColorConfig, permutationOverrides: { "main-color": `${DEFAULT_COLOR} \u2192 ${color}` } }
125
- ];
126
- }
127
104
  return config;
128
105
  };
129
106
  const semanticVariables = ({ theme }, { outPath }) => {
@@ -11,7 +11,7 @@ export type ColorCategories = keyof typeof colorCategories;
11
11
  export type ThemePermutation = {
12
12
  'color-scheme': string;
13
13
  'main-color': string;
14
- 'support-color': string;
14
+ 'support-color'?: string;
15
15
  semantic: string;
16
16
  size: string;
17
17
  theme: string;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE7D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE7D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}
@@ -1,4 +1,3 @@
1
- export declare const DEFAULT_COLOR = "accent";
2
1
  type Options = {
3
2
  /** Design tokens path */
4
3
  tokens: string;
@@ -8,8 +7,8 @@ type Options = {
8
7
  preview: boolean;
9
8
  /** Enable verbose output */
10
9
  verbose: boolean;
11
- /** Set the default "accent" color, if not overridden with data-color */
12
- accentColor?: string;
10
+ /** Set the default color for ":root" */
11
+ rootColor?: string;
13
12
  /** Dry run, no files will be written */
14
13
  dry?: boolean;
15
14
  /** Clean the output path before building tokens */
@@ -1 +1 @@
1
- {"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAqFjE"}
1
+ {"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAcA,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CA2FjE"}
@@ -8,7 +8,6 @@ import { colorCategories } from "./build/types.js";
8
8
  import { makeEntryFile } from "./build/utils/entryfile.js";
9
9
  import { processThemeObject } from "./build/utils/getMultidimensionalThemes.js";
10
10
  import { cleanDir, copyFile, writeFile } from "./utils.js";
11
- const DEFAULT_COLOR = "accent";
12
11
  let buildOptions;
13
12
  const sd = new StyleDictionary();
14
13
  const buildConfigs = {
@@ -48,24 +47,30 @@ async function buildTokens(options) {
48
47
  buildOptions = options;
49
48
  const $themes = JSON.parse(await fs.readFile(path.resolve(`${tokensDir}/$themes.json`), "utf-8")).map(processThemeObject);
50
49
  const relevant$themes = $themes.filter((theme) => R.not(theme.group === "size" && theme.name !== "medium"));
51
- if (!buildOptions.accentColor) {
52
- const accentOrFirstMainColor = relevant$themes.find((theme) => theme.name === DEFAULT_COLOR) || relevant$themes.find((theme) => theme.group === "main-color");
53
- buildOptions.accentColor = accentOrFirstMainColor?.name;
50
+ if (!buildOptions.rootColor) {
51
+ const firstMainColor = relevant$themes.find((theme) => theme.group === "main-color");
52
+ buildOptions.rootColor = firstMainColor?.name;
53
+ console.log(`Using first main color; ${chalk.blue(firstMainColor?.name)}, as ${chalk.green(`":root"`)} color`);
54
54
  }
55
- if (buildOptions.accentColor !== DEFAULT_COLOR) {
56
- console.log("accent color:", buildOptions.accentColor);
57
- }
58
- const buildAndSdConfigs = R.map(
59
- (val) => ({
60
- buildConfig: val,
61
- sdConfigs: getConfigsForThemeDimensions(val.getConfig, relevant$themes, val.dimensions, {
62
- outPath: targetDir,
63
- tokensDir,
64
- ...val.options
65
- })
66
- }),
67
- buildConfigs
68
- );
55
+ const buildAndSdConfigs = R.map((buildConfig) => {
56
+ const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, relevant$themes, buildConfig.dimensions, {
57
+ outPath: targetDir,
58
+ tokensDir,
59
+ ...buildConfig.options
60
+ });
61
+ const unknownConfigs = buildConfig.dimensions.map(
62
+ (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
63
+ );
64
+ for (const unknowns of unknownConfigs) {
65
+ if (unknowns.length === sdConfigs.length) {
66
+ buildConfig.enabled = () => false;
67
+ }
68
+ }
69
+ return {
70
+ buildConfig,
71
+ sdConfigs
72
+ };
73
+ }, buildConfigs);
69
74
  if (clean) {
70
75
  await cleanDir(targetDir, dry);
71
76
  }
@@ -121,7 +126,6 @@ ${mainAndSupportColors.map((color) => ` ${color}: never;`).join("\n")}
121
126
  await writeFile(path.resolve(outPath, colorsFileName), typeDeclaration, dry);
122
127
  }
123
128
  export {
124
- DEFAULT_COLOR,
125
129
  buildOptions,
126
130
  buildTokens
127
131
  };
@@ -20,7 +20,6 @@
20
20
  "semantic/modes/support-color/brand1",
21
21
  "semantic/modes/support-color/brand2",
22
22
  "semantic/modes/support-color/brand3",
23
- "semantic/style",
24
- "Figma/components"
23
+ "semantic/style"
25
24
  ]
26
25
  }
@@ -1 +1 @@
1
- {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAyG3B,CAAC"}
1
+ {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAwG3B,CAAC"}
@@ -16,7 +16,6 @@ const argsFromToPaths = (path_) => [
16
16
  const options = { recursive: true };
17
17
  const endsWithOneOf = (suffixes, str) => R.any((suffix) => R.endsWith(suffix, str), suffixes);
18
18
  const updateTemplates = async () => {
19
- await fs.cp(...argsFromToPaths("Figma"), options);
20
19
  await fs.cp(...argsFromToPaths("primitives/globals.json"), options);
21
20
  await fs.cp(...argsFromToPaths("primitives/modes/size"), options);
22
21
  await fs.cp(...argsFromToPaths("primitives/modes/typography/size"), options);
@@ -65,7 +65,7 @@ const cleanDir = async (dir, dry) => {
65
65
  console.log(`${chalk.blue("cleanDir")} ${dir}`);
66
66
  return Promise.resolve();
67
67
  }
68
- console.log(`${chalk.red("Cleaning outputDir: ")} ${dir}`);
68
+ console.log(`${chalk.red(`Cleaning outputDir: ${dir.trim()}`)} `);
69
69
  return await fs.rm(dir, { recursive: true, force: true });
70
70
  };
71
71
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"generate$metadata.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,KAAK,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAEvC,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAyBtG"}
1
+ {"version":3,"file":"generate$metadata.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,KAAK,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAEvC,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAwBtG"}
@@ -19,8 +19,7 @@ function generateMetadataJson(schemes, themes, colors) {
19
19
  "semantic/color",
20
20
  ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
21
21
  ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
22
- "semantic/style",
23
- "Figma/components"
22
+ "semantic/style"
24
23
  ]
25
24
  };
26
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet",
3
- "version": "1.0.0-next.47",
3
+ "version": "1.0.0-next.48",
4
4
  "description": "CLI for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "engines": {
@@ -40,52 +40,51 @@
40
40
  "build:types": "tsc --emitDeclarationOnly --declaration",
41
41
  "build:json-schema": "tsx ./src/build-scripts/createJsonSchema.ts",
42
42
  "types": "tsc --noEmit",
43
- "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682 complimentary:#ff0000 -n #003333 -s support1:#12404f support2:#0054a6 support3:#942977 -b 99 -o ./test-tokens-create --clean",
44
- "test:tokens-create-json": "yarn designsystemet tokens create --json ./test-tokens-create-complex.config.json",
43
+ "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682 -n #003333 -b 99 -o ./test-tokens-create --theme options-test --clean",
44
+ "test:tokens-create-config": "yarn designsystemet tokens create --config ./test-tokens-create-complex.config.json",
45
45
  "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -o ./test-tokens-build --clean",
46
46
  "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
47
- "test:tokens-create-and-build-json": "yarn test:tokens-create-json && yarn test:tokens-build",
48
- "test": "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-json",
47
+ "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build",
48
+ "test": "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
49
49
  "update:template": "tsx ./src/tokens/template.ts",
50
50
  "internal:tokens-create-digdir": "yarn designsystemet tokens create --theme theme -m accent:#0062BA -n #1E2B3C -s brand1:#F45F63 brand2:#E5AA20 brand3:#1E98F5 -o ./internal/design-tokens --clean",
51
- "internal:tokens-create-altinn": "yarn designsystemet tokens create --theme theme2 -m accent:#0162BA -n #1E2B3C -s brand1:#0162BA brand2:#3F3161 brand3:#E02F4A -o ./internal/design-tokens --clean",
52
- "internal:tokens-create-uutilsynet": "yarn designsystemet tokens create --theme theme3 -m accent:#0162BA -n #1E2B3C -s brand1:#5B60D1 brand2:#FEA769 brand3:#5DA290 -o ./internal/design-tokens --clean",
53
- "internal:tokens-create-portal": "yarn designsystemet tokens create --theme theme4 -m accent:#4D107D -n #1E2B3C -s brand1:#A259DC brand2:#DF73E4 brand3:#E86ABF -o ./internal/design-tokens --clean",
51
+ "internal:tokens-create-altinn": "yarn designsystemet tokens create --theme theme2 -m accent:#0162BA -n #1E2B3C -s brand1:#0162BA brand2:#3F3161 brand3:#E02F4A -o ./internal/design-tokens",
52
+ "internal:tokens-create-uutilsynet": "yarn designsystemet tokens create --theme theme3 -m accent:#0162BA -n #1E2B3C -s brand1:#5B60D1 brand2:#FEA769 brand3:#5DA290 -o ./internal/design-tokens",
53
+ "internal:tokens-create-portal": "yarn designsystemet tokens create --theme theme4 -m accent:#4D107D -n #1E2B3C -s brand1:#A259DC brand2:#DF73E4 brand3:#E86ABF -o ./internal/design-tokens",
54
54
  "internal:tokens-create-all": "yarn internal:tokens-create-digdir && yarn internal:tokens-create-altinn && yarn internal:tokens-create-uutilsynet && yarn internal:tokens-create-portal"
55
55
  },
56
56
  "dependencies": {
57
- "@commander-js/extra-typings": "^12.1.0",
58
- "@tokens-studio/sd-transforms": "1.2.2",
57
+ "@commander-js/extra-typings": "^13.0.0",
58
+ "@tokens-studio/sd-transforms": "1.2.9",
59
59
  "apca-w3": "^0.1.9",
60
- "chalk": "^5.3.0",
60
+ "chalk": "^5.4.1",
61
61
  "change-case": "^5.4.4",
62
- "chroma-js": "^2.6.0",
63
- "commander": "^12.1.0",
64
- "fast-glob": "^3.3.2",
62
+ "chroma-js": "^3.1.2",
63
+ "commander": "^13.1.0",
64
+ "fast-glob": "^3.3.3",
65
65
  "hsluv": "^1.0.1",
66
- "jscodeshift": "^0.16.1",
66
+ "jscodeshift": "^17.1.2",
67
67
  "object-hash": "^3.0.0",
68
- "postcss": "^8.4.41",
69
- "prompts": "^2.4.2",
68
+ "postcss": "^8.5.1",
70
69
  "ramda": "^0.30.1",
71
- "style-dictionary": "^4.0.1",
72
- "zod": "^3.23.8",
70
+ "style-dictionary": "^4.3.1",
71
+ "zod": "^3.24.1",
73
72
  "zod-validation-error": "^3.4.0"
74
73
  },
75
74
  "devDependencies": {
76
75
  "@types/apca-w3": "^0.1.3",
76
+ "@types/chroma-js": "^3.1.0",
77
77
  "@types/fs-extra": "^11.0.4",
78
78
  "@types/glob": "^8.1.0",
79
- "@types/jscodeshift": "^0.11.11",
80
- "@types/node": "^22.1.0",
79
+ "@types/jscodeshift": "^0.12.0",
80
+ "@types/node": "^22.10.7",
81
81
  "@types/object-hash": "^3.0.6",
82
- "@types/prompts": "^2.4.9",
83
- "@types/ramda": "^0.30.1",
84
- "fs-extra": "^11.2.0",
85
- "tslib": "^2.6.3",
86
- "tsup": "^8.2.4",
87
- "tsx": "^4.16.5",
88
- "typescript": "^5.5.4",
82
+ "@types/ramda": "^0.30.2",
83
+ "fs-extra": "^11.3.0",
84
+ "tslib": "^2.8.1",
85
+ "tsup": "^8.3.5",
86
+ "tsx": "^4.19.2",
87
+ "typescript": "^5.7.3",
89
88
  "zod-to-json-schema": "^3.24.1"
90
89
  }
91
90
  }
@@ -1,22 +0,0 @@
1
- {
2
- "switch": {
3
- "circle": {
4
- "small": {
5
- "$type": "sizing",
6
- "$value": "{_size.5} - {switch.border}"
7
- },
8
- "medium": {
9
- "$type": "sizing",
10
- "$value": "{_size.6} - {switch.border}"
11
- },
12
- "large": {
13
- "$type": "sizing",
14
- "$value": "{_size.7} - {switch.border}"
15
- }
16
- },
17
- "border": {
18
- "$type": "sizing",
19
- "$value": "4"
20
- }
21
- }
22
- }