@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.
- package/dist/bin/config.d.ts +8 -8
- package/dist/bin/config.js +1 -1
- package/dist/bin/designsystemet.js +14 -14
- package/dist/config.schema.json +3 -2
- package/dist/src/tokens/build/configs.d.ts.map +1 -1
- package/dist/src/tokens/build/configs.js +3 -26
- package/dist/src/tokens/build/types.d.ts +1 -1
- package/dist/src/tokens/build/types.d.ts.map +1 -1
- package/dist/src/tokens/build.d.ts +2 -3
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +23 -19
- package/dist/src/tokens/design-tokens/template/$metadata.json +1 -2
- package/dist/src/tokens/template.d.ts.map +1 -1
- package/dist/src/tokens/template.js +0 -1
- package/dist/src/tokens/utils.js +1 -1
- package/dist/src/tokens/write/generate$metadata.d.ts.map +1 -1
- package/dist/src/tokens/write/generate$metadata.js +1 -2
- package/package.json +27 -28
- package/dist/src/tokens/design-tokens/default/Figma/components.json +0 -22
package/dist/bin/config.d.ts
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
152
|
+
support?: Record<string, string> | undefined;
|
|
153
153
|
};
|
|
154
154
|
typography: {
|
|
155
155
|
fontFamily: string;
|
package/dist/bin/config.js
CHANGED
|
@@ -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
|
-
"--
|
|
48
|
-
`Path to
|
|
49
|
-
(value) =>
|
|
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.
|
|
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
|
|
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
|
|
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
|
|
141
|
-
const resolvedPath = path.resolve(process.cwd(),
|
|
142
|
-
let
|
|
140
|
+
async function parseConfig(configPath, options) {
|
|
141
|
+
const resolvedPath = path.resolve(process.cwd(), configPath);
|
|
142
|
+
let configFile;
|
|
143
143
|
try {
|
|
144
|
-
|
|
145
|
-
console.log(`Found
|
|
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:
|
|
158
|
-
config: await configFileSchema.parseAsync(JSON.parse(
|
|
157
|
+
path: configPath,
|
|
158
|
+
config: await configFileSchema.parseAsync(JSON.parse(configFile))
|
|
159
159
|
};
|
|
160
160
|
} catch (err) {
|
|
161
|
-
console.error(chalk.redBright(`Invalid
|
|
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);
|
package/dist/config.schema.json
CHANGED
|
@@ -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;
|
|
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 {
|
|
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
|
|
74
|
-
const selector = `${
|
|
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'
|
|
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;
|
|
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
|
|
12
|
-
|
|
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,
|
|
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"}
|
package/dist/src/tokens/build.js
CHANGED
|
@@ -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.
|
|
52
|
-
const
|
|
53
|
-
buildOptions.
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,
|
|
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);
|
package/dist/src/tokens/utils.js
CHANGED
|
@@ -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(
|
|
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,
|
|
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.
|
|
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
|
|
44
|
-
"test:tokens-create-
|
|
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-
|
|
48
|
-
"test": "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-
|
|
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
|
|
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
|
|
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": "^
|
|
58
|
-
"@tokens-studio/sd-transforms": "1.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.
|
|
60
|
+
"chalk": "^5.4.1",
|
|
61
61
|
"change-case": "^5.4.4",
|
|
62
|
-
"chroma-js": "^
|
|
63
|
-
"commander": "^
|
|
64
|
-
"fast-glob": "^3.3.
|
|
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": "^
|
|
66
|
+
"jscodeshift": "^17.1.2",
|
|
67
67
|
"object-hash": "^3.0.0",
|
|
68
|
-
"postcss": "^8.
|
|
69
|
-
"prompts": "^2.4.2",
|
|
68
|
+
"postcss": "^8.5.1",
|
|
70
69
|
"ramda": "^0.30.1",
|
|
71
|
-
"style-dictionary": "^4.
|
|
72
|
-
"zod": "^3.
|
|
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.
|
|
80
|
-
"@types/node": "^22.
|
|
79
|
+
"@types/jscodeshift": "^0.12.0",
|
|
80
|
+
"@types/node": "^22.10.7",
|
|
81
81
|
"@types/object-hash": "^3.0.6",
|
|
82
|
-
"@types/
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"
|
|
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
|
-
}
|