@digdir/designsystemet 0.1.0-next.23 → 0.1.0-next.24
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/designsystemet.js +41 -13
- package/dist/src/colors/index.js +2 -2
- package/dist/src/colors/{themeUtils.js → theme.js} +16 -13
- package/dist/src/colors/{colorUtils.js → utils.js} +10 -0
- package/dist/src/init/generateMetadataJson.js +5 -2
- package/dist/src/init/generateThemesJson.js +8 -8
- package/dist/src/init/template/default-files/design-tokens/Figma/components.json +22 -0
- package/dist/src/init/template/default-files/design-tokens/themes/theme.json +334 -0
- package/dist/src/tokens/{build.js → build/index.js} +2 -2
- package/dist/src/tokens/create/README.md +3 -0
- package/dist/src/tokens/create/index.js +153 -0
- package/dist/src/tokens/index.js +4 -0
- package/dist/types/src/colors/index.d.ts +2 -2
- package/dist/types/src/colors/index.d.ts.map +1 -1
- package/dist/types/src/colors/{themeUtils.d.ts → theme.d.ts} +10 -27
- package/dist/types/src/colors/theme.d.ts.map +1 -0
- package/dist/types/src/colors/types.d.ts +3 -2
- package/dist/types/src/colors/types.d.ts.map +1 -1
- package/dist/types/src/colors/{colorUtils.d.ts → utils.d.ts} +14 -8
- package/dist/types/src/colors/utils.d.ts.map +1 -0
- package/dist/types/src/init/generateMetadataJson.d.ts.map +1 -1
- package/dist/types/src/init/generateThemesJson.d.ts.map +1 -1
- package/dist/types/src/tokens/build/actions.d.ts.map +1 -0
- package/dist/types/src/tokens/build/configs.d.ts.map +1 -0
- package/dist/types/src/tokens/build/formats/css.d.ts.map +1 -0
- package/dist/types/src/tokens/build/formats/js-tokens.d.ts.map +1 -0
- package/dist/types/src/tokens/{build.d.ts → build/index.d.ts} +2 -2
- package/dist/types/src/tokens/build/index.d.ts.map +1 -0
- package/dist/types/src/tokens/build/transformers.d.ts.map +1 -0
- package/dist/types/src/tokens/build/utils/entryfile.d.ts.map +1 -0
- package/dist/types/src/tokens/build/utils/noCase.d.ts.map +1 -0
- package/dist/types/src/tokens/build/utils/permutateThemes.d.ts.map +1 -0
- package/dist/types/src/tokens/build/utils/utils.d.ts.map +1 -0
- package/dist/types/src/tokens/create/index.d.ts +64 -0
- package/dist/types/src/tokens/create/index.d.ts.map +1 -0
- package/dist/types/src/tokens/index.d.ts +2 -0
- package/dist/types/src/tokens/index.d.ts.map +1 -0
- package/package.json +7 -3
- package/dist/types/src/colors/colorUtils.d.ts.map +0 -1
- package/dist/types/src/colors/themeUtils.d.ts.map +0 -1
- package/dist/types/src/tokens/actions.d.ts.map +0 -1
- package/dist/types/src/tokens/build.d.ts.map +0 -1
- package/dist/types/src/tokens/configs.d.ts.map +0 -1
- package/dist/types/src/tokens/formats/css.d.ts.map +0 -1
- package/dist/types/src/tokens/formats/js-tokens.d.ts.map +0 -1
- package/dist/types/src/tokens/transformers.d.ts.map +0 -1
- package/dist/types/src/tokens/utils/entryfile.d.ts.map +0 -1
- package/dist/types/src/tokens/utils/noCase.d.ts.map +0 -1
- package/dist/types/src/tokens/utils/permutateThemes.d.ts.map +0 -1
- package/dist/types/src/tokens/utils/utils.d.ts.map +0 -1
- /package/dist/src/tokens/{actions.js → build/actions.js} +0 -0
- /package/dist/src/tokens/{configs.js → build/configs.js} +0 -0
- /package/dist/src/tokens/{formats → build/formats}/css.js +0 -0
- /package/dist/src/tokens/{formats → build/formats}/js-tokens.js +0 -0
- /package/dist/src/tokens/{transformers.js → build/transformers.js} +0 -0
- /package/dist/src/tokens/{utils → build/utils}/entryfile.js +0 -0
- /package/dist/src/tokens/{utils → build/utils}/noCase.js +0 -0
- /package/dist/src/tokens/{utils → build/utils}/permutateThemes.js +0 -0
- /package/dist/src/tokens/{utils → build/utils}/utils.js +0 -0
- /package/dist/types/src/tokens/{actions.d.ts → build/actions.d.ts} +0 -0
- /package/dist/types/src/tokens/{configs.d.ts → build/configs.d.ts} +0 -0
- /package/dist/types/src/tokens/{formats → build/formats}/css.d.ts +0 -0
- /package/dist/types/src/tokens/{formats → build/formats}/js-tokens.d.ts +0 -0
- /package/dist/types/src/tokens/{transformers.d.ts → build/transformers.d.ts} +0 -0
- /package/dist/types/src/tokens/{utils → build/utils}/entryfile.d.ts +0 -0
- /package/dist/types/src/tokens/{utils → build/utils}/noCase.d.ts +0 -0
- /package/dist/types/src/tokens/{utils → build/utils}/permutateThemes.d.ts +0 -0
- /package/dist/types/src/tokens/{utils → build/utils}/utils.d.ts +0 -0
|
@@ -1,18 +1,44 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import { Argument,
|
|
2
|
+
import { Argument, createCommand, program } from "@commander-js/extra-typings";
|
|
3
3
|
import chalk from "chalk";
|
|
4
|
-
import {
|
|
4
|
+
import { convertToHex } from "../src/colors";
|
|
5
|
+
import { createTokensPackage } from "../src/init/createTokensPackage.js";
|
|
5
6
|
import migrations from "../src/migrations/index.js";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
program.
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
import { buildTokens } from "../src/tokens/build/index.js";
|
|
8
|
+
import { createTokens } from "../src/tokens/create//index.js";
|
|
9
|
+
program.name("Designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
|
|
10
|
+
function makeTokenCommands() {
|
|
11
|
+
const tokenCmd = createCommand("tokens");
|
|
12
|
+
tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
|
|
13
|
+
const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
|
|
14
|
+
const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
|
|
15
|
+
const preview = opts.preview;
|
|
16
|
+
console.log(`Bulding tokens in ${chalk.green(tokens)}`);
|
|
17
|
+
return buildTokens({ tokens, out, preview });
|
|
18
|
+
});
|
|
19
|
+
tokenCmd.command("create").description("Create Designsystemet tokens").option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, "./design-tokens").option("-a, --accent <number>", `Accent hex color`).option("-n, --neutral <number>", `Neutral hex color`).option("-b1, --brand1 <number>", `Brand1 hex color`).option("-b2, --brand2 <number>", `Brand2 hex color`).option("-b3, --brand3 <number>", `Brand3 hex color`).option("-f, --font-family <string>", `Font family`).action(async (opts) => {
|
|
20
|
+
console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts))}`);
|
|
21
|
+
const outPath = typeof opts.write === "string" ? opts.write : "./design-tokens";
|
|
22
|
+
const family = typeof opts.fontFamily === "string" ? opts.fontFamily : "Inter";
|
|
23
|
+
const props = {
|
|
24
|
+
colors: {
|
|
25
|
+
accent: convertToHex(opts.accent),
|
|
26
|
+
neutral: convertToHex(opts.neutral),
|
|
27
|
+
brand1: convertToHex(opts.brand1),
|
|
28
|
+
brand2: convertToHex(opts.brand2),
|
|
29
|
+
brand3: convertToHex(opts.brand3)
|
|
30
|
+
},
|
|
31
|
+
typography: {
|
|
32
|
+
family
|
|
33
|
+
},
|
|
34
|
+
outPath
|
|
35
|
+
};
|
|
36
|
+
await createTokens(props);
|
|
37
|
+
});
|
|
38
|
+
return tokenCmd;
|
|
39
|
+
}
|
|
40
|
+
program.addCommand(makeTokenCommands());
|
|
41
|
+
program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
|
|
16
42
|
const { glob, list } = opts;
|
|
17
43
|
if (list) {
|
|
18
44
|
for (const key of Object.keys(migrations)) {
|
|
@@ -30,5 +56,7 @@ program.command("migrate").showHelpAfterError().description("run a Designsysteme
|
|
|
30
56
|
console.log("Migrate: please specify a migration name or --list");
|
|
31
57
|
}
|
|
32
58
|
});
|
|
33
|
-
program.
|
|
59
|
+
program.command("init").description("create an initial token structure for Designsystemet").addArgument(new Argument("<targetDir>", "Target directory for the generated code")).action(async (targetDir) => {
|
|
60
|
+
await createTokensPackage(targetDir);
|
|
61
|
+
});
|
|
34
62
|
await program.parseAsync(process.argv);
|
package/dist/src/colors/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from "./
|
|
2
|
-
export * from "./
|
|
1
|
+
export * from "./utils";
|
|
2
|
+
export * from "./theme";
|
|
3
3
|
export * from "./types";
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
|
|
2
2
|
import { Hsluv } from "hsluv";
|
|
3
|
-
import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./utils";
|
|
4
|
+
const baseColors = {
|
|
5
|
+
blue: "#0A71C0",
|
|
6
|
+
green: "#078D19",
|
|
7
|
+
orange: "#CA5C21",
|
|
8
|
+
purple: "#663299",
|
|
9
|
+
red: "#C01B1B",
|
|
10
|
+
yellow: "#EABF28"
|
|
11
|
+
};
|
|
10
12
|
const generateThemeColor = (color, mode, contrastMode = "aa") => {
|
|
11
13
|
const leoBackgroundColor = new BackgroundColor({
|
|
12
14
|
name: "backgroundColor",
|
|
@@ -103,12 +105,12 @@ const generateThemeForColor = (color, contrastMode = "aa") => {
|
|
|
103
105
|
};
|
|
104
106
|
};
|
|
105
107
|
const generateGlobalColors = ({ contrastMode = "aa" }) => {
|
|
106
|
-
const blueTheme = generateThemeForColor(
|
|
107
|
-
const greenTheme = generateThemeForColor(
|
|
108
|
-
const orangeTheme = generateThemeForColor(
|
|
109
|
-
const purpleTheme = generateThemeForColor(
|
|
110
|
-
const redTheme = generateThemeForColor(
|
|
111
|
-
const yellowTheme = generateThemeForColor(
|
|
108
|
+
const blueTheme = generateThemeForColor(baseColors.blue, contrastMode);
|
|
109
|
+
const greenTheme = generateThemeForColor(baseColors.green, contrastMode);
|
|
110
|
+
const orangeTheme = generateThemeForColor(baseColors.orange, contrastMode);
|
|
111
|
+
const purpleTheme = generateThemeForColor(baseColors.purple, contrastMode);
|
|
112
|
+
const redTheme = generateThemeForColor(baseColors.red, contrastMode);
|
|
113
|
+
const yellowTheme = generateThemeForColor(baseColors.yellow, contrastMode);
|
|
112
114
|
return {
|
|
113
115
|
blue: blueTheme,
|
|
114
116
|
green: greenTheme,
|
|
@@ -230,6 +232,7 @@ const getCssVariable = (colorType, colorNumber) => {
|
|
|
230
232
|
return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
|
|
231
233
|
};
|
|
232
234
|
export {
|
|
235
|
+
baseColors,
|
|
233
236
|
calculateContrastOneColor,
|
|
234
237
|
calculateContrastTwoColor,
|
|
235
238
|
canTextBeUsedOnColors,
|
|
@@ -221,9 +221,19 @@ const getApcaContrastLc = (textColor, backgroundColor) => {
|
|
|
221
221
|
const isHexColor = (hex) => {
|
|
222
222
|
return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
|
|
223
223
|
};
|
|
224
|
+
const convertToHex = (color) => {
|
|
225
|
+
if (!color) {
|
|
226
|
+
return "#000000";
|
|
227
|
+
}
|
|
228
|
+
if (color.startsWith("#")) {
|
|
229
|
+
return color;
|
|
230
|
+
}
|
|
231
|
+
return chroma(color).hex();
|
|
232
|
+
};
|
|
224
233
|
export {
|
|
225
234
|
HSLToHex,
|
|
226
235
|
areColorsContrasting,
|
|
236
|
+
convertToHex,
|
|
227
237
|
getApcaContrastLc,
|
|
228
238
|
getContrastFromHex,
|
|
229
239
|
getContrastFromLightness,
|
|
@@ -3,7 +3,9 @@ function generateMetadataJson(modes, themes) {
|
|
|
3
3
|
return {
|
|
4
4
|
tokenSetOrder: [
|
|
5
5
|
"primitives/modes/globals",
|
|
6
|
-
"primitives/
|
|
6
|
+
"primitives/size/default",
|
|
7
|
+
"primitives/modes/typography/primary/theme",
|
|
8
|
+
"primitives/modes/typography/secondary/theme",
|
|
7
9
|
...modes.flatMap((mode) => [
|
|
8
10
|
`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
|
|
9
11
|
...themes.map(
|
|
@@ -12,7 +14,8 @@ function generateMetadataJson(modes, themes) {
|
|
|
12
14
|
]),
|
|
13
15
|
...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
|
|
14
16
|
"semantic/color",
|
|
15
|
-
"semantic/style"
|
|
17
|
+
"semantic/style",
|
|
18
|
+
"Figma/components"
|
|
16
19
|
]
|
|
17
20
|
};
|
|
18
21
|
}
|
|
@@ -19,15 +19,15 @@ function generateSizeGroup() {
|
|
|
19
19
|
"primitives/size/default": TokenSetStatus.ENABLED
|
|
20
20
|
},
|
|
21
21
|
group: "Size"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
id: randomUUID(),
|
|
25
|
-
name: "compact",
|
|
26
|
-
selectedTokenSets: {
|
|
27
|
-
"primitives/size/compact": TokenSetStatus.ENABLED
|
|
28
|
-
},
|
|
29
|
-
group: "Size"
|
|
30
22
|
}
|
|
23
|
+
// {
|
|
24
|
+
// id: randomUUID(),
|
|
25
|
+
// name: 'compact',
|
|
26
|
+
// selectedTokenSets: {
|
|
27
|
+
// 'primitives/size/compact': TokenSetStatus.ENABLED,
|
|
28
|
+
// },
|
|
29
|
+
// group: 'Size',
|
|
30
|
+
// },
|
|
31
31
|
];
|
|
32
32
|
}
|
|
33
33
|
function generateModesGroup(modes, themes) {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"switch": {
|
|
3
|
+
"circle": {
|
|
4
|
+
"small": {
|
|
5
|
+
"$type": "sizing",
|
|
6
|
+
"$value": "{sizing.5} - {switch.border}"
|
|
7
|
+
},
|
|
8
|
+
"medium": {
|
|
9
|
+
"$type": "sizing",
|
|
10
|
+
"$value": "{sizing.6} - {switch.border}"
|
|
11
|
+
},
|
|
12
|
+
"large": {
|
|
13
|
+
"$type": "sizing",
|
|
14
|
+
"$value": "{sizing.7} - {switch.border}"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"border": {
|
|
18
|
+
"$type": "sizing",
|
|
19
|
+
"$value": "4"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"accent": {
|
|
4
|
+
"1": {
|
|
5
|
+
"$type": "color",
|
|
6
|
+
"$value": "{theme.accent.1}"
|
|
7
|
+
},
|
|
8
|
+
"2": {
|
|
9
|
+
"$type": "color",
|
|
10
|
+
"$value": "{theme.accent.2}"
|
|
11
|
+
},
|
|
12
|
+
"3": {
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$value": "{theme.accent.3}"
|
|
15
|
+
},
|
|
16
|
+
"4": {
|
|
17
|
+
"$type": "color",
|
|
18
|
+
"$value": "{theme.accent.4}"
|
|
19
|
+
},
|
|
20
|
+
"5": {
|
|
21
|
+
"$type": "color",
|
|
22
|
+
"$value": "{theme.accent.5}"
|
|
23
|
+
},
|
|
24
|
+
"6": {
|
|
25
|
+
"$type": "color",
|
|
26
|
+
"$value": "{theme.accent.6}"
|
|
27
|
+
},
|
|
28
|
+
"7": {
|
|
29
|
+
"$type": "color",
|
|
30
|
+
"$value": "{theme.accent.7}"
|
|
31
|
+
},
|
|
32
|
+
"8": {
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$value": "{theme.accent.8}"
|
|
35
|
+
},
|
|
36
|
+
"9": {
|
|
37
|
+
"$type": "color",
|
|
38
|
+
"$value": "{theme.accent.9}"
|
|
39
|
+
},
|
|
40
|
+
"10": {
|
|
41
|
+
"$type": "color",
|
|
42
|
+
"$value": "{theme.accent.10}"
|
|
43
|
+
},
|
|
44
|
+
"11": {
|
|
45
|
+
"$type": "color",
|
|
46
|
+
"$value": "{theme.accent.11}"
|
|
47
|
+
},
|
|
48
|
+
"12": {
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$value": "{theme.accent.12}"
|
|
51
|
+
},
|
|
52
|
+
"13": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "{theme.accent.13}"
|
|
55
|
+
},
|
|
56
|
+
"contrast-1": {
|
|
57
|
+
"$type": "color",
|
|
58
|
+
"$value": "{theme.accent.contrast-1}"
|
|
59
|
+
},
|
|
60
|
+
"contrast-2": {
|
|
61
|
+
"$type": "color",
|
|
62
|
+
"$value": "{theme.accent.contrast-2}"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"neutral": {
|
|
66
|
+
"1": {
|
|
67
|
+
"$type": "color",
|
|
68
|
+
"$value": "{theme.neutral.1}"
|
|
69
|
+
},
|
|
70
|
+
"2": {
|
|
71
|
+
"$type": "color",
|
|
72
|
+
"$value": "{theme.neutral.2}"
|
|
73
|
+
},
|
|
74
|
+
"3": {
|
|
75
|
+
"$type": "color",
|
|
76
|
+
"$value": "{theme.neutral.3}"
|
|
77
|
+
},
|
|
78
|
+
"4": {
|
|
79
|
+
"$type": "color",
|
|
80
|
+
"$value": "{theme.neutral.4}"
|
|
81
|
+
},
|
|
82
|
+
"5": {
|
|
83
|
+
"$type": "color",
|
|
84
|
+
"$value": "{theme.neutral.5}"
|
|
85
|
+
},
|
|
86
|
+
"6": {
|
|
87
|
+
"$type": "color",
|
|
88
|
+
"$value": "{theme.neutral.6}"
|
|
89
|
+
},
|
|
90
|
+
"7": {
|
|
91
|
+
"$type": "color",
|
|
92
|
+
"$value": "{theme.neutral.7}"
|
|
93
|
+
},
|
|
94
|
+
"8": {
|
|
95
|
+
"$type": "color",
|
|
96
|
+
"$value": "{theme.neutral.8}"
|
|
97
|
+
},
|
|
98
|
+
"9": {
|
|
99
|
+
"$type": "color",
|
|
100
|
+
"$value": "{theme.neutral.9}"
|
|
101
|
+
},
|
|
102
|
+
"10": {
|
|
103
|
+
"$type": "color",
|
|
104
|
+
"$value": "{theme.neutral.10}"
|
|
105
|
+
},
|
|
106
|
+
"11": {
|
|
107
|
+
"$type": "color",
|
|
108
|
+
"$value": "{theme.neutral.11}"
|
|
109
|
+
},
|
|
110
|
+
"12": {
|
|
111
|
+
"$type": "color",
|
|
112
|
+
"$value": "{theme.neutral.12}"
|
|
113
|
+
},
|
|
114
|
+
"13": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "{theme.neutral.13}"
|
|
117
|
+
},
|
|
118
|
+
"contrast-1": {
|
|
119
|
+
"$type": "color",
|
|
120
|
+
"$value": "{theme.neutral.contrast-1}"
|
|
121
|
+
},
|
|
122
|
+
"contrast-2": {
|
|
123
|
+
"$type": "color",
|
|
124
|
+
"$value": "{theme.neutral.contrast-2}"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"brand1": {
|
|
128
|
+
"1": {
|
|
129
|
+
"$type": "color",
|
|
130
|
+
"$value": "{theme.brand1.1}"
|
|
131
|
+
},
|
|
132
|
+
"2": {
|
|
133
|
+
"$type": "color",
|
|
134
|
+
"$value": "{theme.brand1.2}"
|
|
135
|
+
},
|
|
136
|
+
"3": {
|
|
137
|
+
"$type": "color",
|
|
138
|
+
"$value": "{theme.brand1.3}"
|
|
139
|
+
},
|
|
140
|
+
"4": {
|
|
141
|
+
"$type": "color",
|
|
142
|
+
"$value": "{theme.brand1.4}"
|
|
143
|
+
},
|
|
144
|
+
"5": {
|
|
145
|
+
"$type": "color",
|
|
146
|
+
"$value": "{theme.brand1.5}"
|
|
147
|
+
},
|
|
148
|
+
"6": {
|
|
149
|
+
"$type": "color",
|
|
150
|
+
"$value": "{theme.brand1.6}"
|
|
151
|
+
},
|
|
152
|
+
"7": {
|
|
153
|
+
"$type": "color",
|
|
154
|
+
"$value": "{theme.brand1.7}"
|
|
155
|
+
},
|
|
156
|
+
"8": {
|
|
157
|
+
"$type": "color",
|
|
158
|
+
"$value": "{theme.brand1.8}"
|
|
159
|
+
},
|
|
160
|
+
"9": {
|
|
161
|
+
"$type": "color",
|
|
162
|
+
"$value": "{theme.brand1.9}"
|
|
163
|
+
},
|
|
164
|
+
"10": {
|
|
165
|
+
"$type": "color",
|
|
166
|
+
"$value": "{theme.brand1.10}"
|
|
167
|
+
},
|
|
168
|
+
"11": {
|
|
169
|
+
"$type": "color",
|
|
170
|
+
"$value": "{theme.brand1.11}"
|
|
171
|
+
},
|
|
172
|
+
"12": {
|
|
173
|
+
"$type": "color",
|
|
174
|
+
"$value": "{theme.brand1.12}"
|
|
175
|
+
},
|
|
176
|
+
"13": {
|
|
177
|
+
"$type": "color",
|
|
178
|
+
"$value": "{theme.brand1.13}"
|
|
179
|
+
},
|
|
180
|
+
"contrast-1": {
|
|
181
|
+
"$type": "color",
|
|
182
|
+
"$value": "{theme.brand1.contrast-1}"
|
|
183
|
+
},
|
|
184
|
+
"contrast-2": {
|
|
185
|
+
"$type": "color",
|
|
186
|
+
"$value": "{theme.brand1.contrast-2}"
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
"brand2": {
|
|
190
|
+
"1": {
|
|
191
|
+
"$type": "color",
|
|
192
|
+
"$value": "{theme.brand2.1}"
|
|
193
|
+
},
|
|
194
|
+
"2": {
|
|
195
|
+
"$type": "color",
|
|
196
|
+
"$value": "{theme.brand2.2}"
|
|
197
|
+
},
|
|
198
|
+
"3": {
|
|
199
|
+
"$type": "color",
|
|
200
|
+
"$value": "{theme.brand2.3}"
|
|
201
|
+
},
|
|
202
|
+
"4": {
|
|
203
|
+
"$type": "color",
|
|
204
|
+
"$value": "{theme.brand2.4}"
|
|
205
|
+
},
|
|
206
|
+
"5": {
|
|
207
|
+
"$type": "color",
|
|
208
|
+
"$value": "{theme.brand2.5}"
|
|
209
|
+
},
|
|
210
|
+
"6": {
|
|
211
|
+
"$type": "color",
|
|
212
|
+
"$value": "{theme.brand2.6}"
|
|
213
|
+
},
|
|
214
|
+
"7": {
|
|
215
|
+
"$type": "color",
|
|
216
|
+
"$value": "{theme.brand2.7}"
|
|
217
|
+
},
|
|
218
|
+
"8": {
|
|
219
|
+
"$type": "color",
|
|
220
|
+
"$value": "{theme.brand2.8}"
|
|
221
|
+
},
|
|
222
|
+
"9": {
|
|
223
|
+
"$type": "color",
|
|
224
|
+
"$value": "{theme.brand2.9}"
|
|
225
|
+
},
|
|
226
|
+
"10": {
|
|
227
|
+
"$type": "color",
|
|
228
|
+
"$value": "{theme.brand2.10}"
|
|
229
|
+
},
|
|
230
|
+
"11": {
|
|
231
|
+
"$type": "color",
|
|
232
|
+
"$value": "{theme.brand2.11}"
|
|
233
|
+
},
|
|
234
|
+
"12": {
|
|
235
|
+
"$type": "color",
|
|
236
|
+
"$value": "{theme.brand2.12}"
|
|
237
|
+
},
|
|
238
|
+
"13": {
|
|
239
|
+
"$type": "color",
|
|
240
|
+
"$value": "{theme.brand2.13}"
|
|
241
|
+
},
|
|
242
|
+
"contrast-1": {
|
|
243
|
+
"$type": "color",
|
|
244
|
+
"$value": "{theme.brand2.contrast-1}"
|
|
245
|
+
},
|
|
246
|
+
"contrast-2": {
|
|
247
|
+
"$type": "color",
|
|
248
|
+
"$value": "{theme.brand2.contrast-2}"
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
"brand3": {
|
|
252
|
+
"1": {
|
|
253
|
+
"$type": "color",
|
|
254
|
+
"$value": "{theme.brand3.1}"
|
|
255
|
+
},
|
|
256
|
+
"2": {
|
|
257
|
+
"$type": "color",
|
|
258
|
+
"$value": "{theme.brand3.2}"
|
|
259
|
+
},
|
|
260
|
+
"3": {
|
|
261
|
+
"$type": "color",
|
|
262
|
+
"$value": "{theme.brand3.3}"
|
|
263
|
+
},
|
|
264
|
+
"4": {
|
|
265
|
+
"$type": "color",
|
|
266
|
+
"$value": "{theme.brand3.4}"
|
|
267
|
+
},
|
|
268
|
+
"5": {
|
|
269
|
+
"$type": "color",
|
|
270
|
+
"$value": "{theme.brand3.5}"
|
|
271
|
+
},
|
|
272
|
+
"6": {
|
|
273
|
+
"$type": "color",
|
|
274
|
+
"$value": "{theme.brand3.6}"
|
|
275
|
+
},
|
|
276
|
+
"7": {
|
|
277
|
+
"$type": "color",
|
|
278
|
+
"$value": "{theme.brand3.7}"
|
|
279
|
+
},
|
|
280
|
+
"8": {
|
|
281
|
+
"$type": "color",
|
|
282
|
+
"$value": "{theme.brand3.8}"
|
|
283
|
+
},
|
|
284
|
+
"9": {
|
|
285
|
+
"$type": "color",
|
|
286
|
+
"$value": "{theme.brand3.9}"
|
|
287
|
+
},
|
|
288
|
+
"10": {
|
|
289
|
+
"$type": "color",
|
|
290
|
+
"$value": "{theme.brand3.10}"
|
|
291
|
+
},
|
|
292
|
+
"11": {
|
|
293
|
+
"$type": "color",
|
|
294
|
+
"$value": "{theme.brand3.11}"
|
|
295
|
+
},
|
|
296
|
+
"12": {
|
|
297
|
+
"$type": "color",
|
|
298
|
+
"$value": "{theme.brand3.12}"
|
|
299
|
+
},
|
|
300
|
+
"13": {
|
|
301
|
+
"$type": "color",
|
|
302
|
+
"$value": "{theme.brand3.13}"
|
|
303
|
+
},
|
|
304
|
+
"contrast-1": {
|
|
305
|
+
"$type": "color",
|
|
306
|
+
"$value": "{theme.brand3.contrast-1}"
|
|
307
|
+
},
|
|
308
|
+
"contrast-2": {
|
|
309
|
+
"$type": "color",
|
|
310
|
+
"$value": "{theme.brand3.contrast-2}"
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
"font": {
|
|
315
|
+
"family": {
|
|
316
|
+
"$type": "fontFamilies",
|
|
317
|
+
"$value": "{theme.main}"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
"font-weight": {
|
|
321
|
+
"medium": {
|
|
322
|
+
"$type": "fontWeights",
|
|
323
|
+
"$value": "{theme.bold}"
|
|
324
|
+
},
|
|
325
|
+
"semibold": {
|
|
326
|
+
"$type": "fontWeights",
|
|
327
|
+
"$value": "{theme.extra-bold}"
|
|
328
|
+
},
|
|
329
|
+
"regular": {
|
|
330
|
+
"$type": "fontWeights",
|
|
331
|
+
"$value": "{theme.regular}"
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
@@ -7,7 +7,7 @@ import * as configs from "./configs.js";
|
|
|
7
7
|
import { makeEntryFile } from "./utils/entryfile.js";
|
|
8
8
|
const { permutateThemes, getConfigs } = configs;
|
|
9
9
|
const sd = new StyleDictionary();
|
|
10
|
-
async function
|
|
10
|
+
async function buildTokens(options) {
|
|
11
11
|
const tokensDir = options.tokens;
|
|
12
12
|
const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
|
|
13
13
|
const outPath = path.resolve(options.out);
|
|
@@ -81,5 +81,5 @@ async function run(options) {
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
export {
|
|
84
|
-
|
|
84
|
+
buildTokens
|
|
85
85
|
};
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import fs from "node:fs/promises";
|
|
2
|
+
import path from "node:path";
|
|
3
|
+
import * as R from "ramda";
|
|
4
|
+
import { baseColors, generateScaleForColor } from "../../colors";
|
|
5
|
+
import generateMetadataJson from "../../init/generateMetadataJson";
|
|
6
|
+
import generateThemesJson from "../../init/generateThemesJson";
|
|
7
|
+
const DIRNAME = import.meta.dirname || __dirname;
|
|
8
|
+
const DEFAULT_FILES_PATH = path.join(DIRNAME, "../../init/template/default-files/design-tokens/");
|
|
9
|
+
const createColorTokens = (colorArray) => {
|
|
10
|
+
const obj = {};
|
|
11
|
+
const $type = "color";
|
|
12
|
+
for (let i = 0; i < colorArray.length; i++) {
|
|
13
|
+
if (i === 13 && colorArray.length >= 14) {
|
|
14
|
+
obj["contrast-1"] = {
|
|
15
|
+
$type,
|
|
16
|
+
$value: colorArray[i].hex
|
|
17
|
+
};
|
|
18
|
+
} else if (i === 14 && colorArray.length >= 15) {
|
|
19
|
+
obj["contrast-2"] = {
|
|
20
|
+
$type,
|
|
21
|
+
$value: colorArray[i].hex
|
|
22
|
+
};
|
|
23
|
+
} else {
|
|
24
|
+
obj[i + 1] = { $type, $value: colorArray[i].hex };
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return obj;
|
|
28
|
+
};
|
|
29
|
+
const generateTypographyTokens = ({ family }) => {
|
|
30
|
+
return {
|
|
31
|
+
theme: {
|
|
32
|
+
main: {
|
|
33
|
+
$type: "fontFamilies",
|
|
34
|
+
$value: family
|
|
35
|
+
},
|
|
36
|
+
bold: {
|
|
37
|
+
$type: "fontWeights",
|
|
38
|
+
$value: "Medium"
|
|
39
|
+
},
|
|
40
|
+
"extra-bold": {
|
|
41
|
+
$type: "fontWeights",
|
|
42
|
+
$value: "Semi bold"
|
|
43
|
+
},
|
|
44
|
+
regular: {
|
|
45
|
+
$type: "fontWeights",
|
|
46
|
+
$value: "Regular"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
const generateThemeTokens = (theme, colors) => {
|
|
52
|
+
const accentColors = generateScaleForColor(colors.accent, theme);
|
|
53
|
+
const neutralColors = generateScaleForColor(colors.neutral, theme);
|
|
54
|
+
const brand1Colors = generateScaleForColor(colors.brand1, theme);
|
|
55
|
+
const brand2Colors = generateScaleForColor(colors.brand2, theme);
|
|
56
|
+
const brand3Colors = generateScaleForColor(colors.brand3, theme);
|
|
57
|
+
return {
|
|
58
|
+
theme: {
|
|
59
|
+
accent: createColorTokens(accentColors),
|
|
60
|
+
neutral: createColorTokens(neutralColors),
|
|
61
|
+
brand1: createColorTokens(brand1Colors),
|
|
62
|
+
brand2: createColorTokens(brand2Colors),
|
|
63
|
+
brand3: createColorTokens(brand3Colors)
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
const generateColorModeFile = (folder, name, tokens, outPath) => {
|
|
68
|
+
const path2 = `${outPath}/primitives/modes/colors/${folder}`;
|
|
69
|
+
return {
|
|
70
|
+
data: `${JSON.stringify(tokens, null, 2)}
|
|
71
|
+
`,
|
|
72
|
+
path: path2,
|
|
73
|
+
filePath: `${path2}/${name}.json`
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
const generateTypographyFile = (folder, name, tokens, outPath) => {
|
|
77
|
+
const path2 = `${outPath}/primitives/modes/typography/${folder}`;
|
|
78
|
+
return {
|
|
79
|
+
data: `${JSON.stringify(tokens, null, 2)}
|
|
80
|
+
`,
|
|
81
|
+
path: path2,
|
|
82
|
+
filePath: `${path2}/${name}.json`
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
const generateGlobalTokens = (theme) => {
|
|
86
|
+
const blueScale = generateScaleForColor(baseColors.blue, theme);
|
|
87
|
+
const greenScale = generateScaleForColor(baseColors.green, theme);
|
|
88
|
+
const orangeScale = generateScaleForColor(baseColors.orange, theme);
|
|
89
|
+
const purpleScale = generateScaleForColor(baseColors.purple, theme);
|
|
90
|
+
const redScale = generateScaleForColor(baseColors.red, theme);
|
|
91
|
+
const yellowScale = generateScaleForColor(baseColors.yellow, theme);
|
|
92
|
+
return {
|
|
93
|
+
global: {
|
|
94
|
+
blue: createColorTokens(blueScale),
|
|
95
|
+
green: createColorTokens(greenScale),
|
|
96
|
+
orange: createColorTokens(orangeScale),
|
|
97
|
+
purple: createColorTokens(purpleScale),
|
|
98
|
+
red: createColorTokens(redScale),
|
|
99
|
+
yellow: createColorTokens(yellowScale)
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
const createTokens = async (opts) => {
|
|
104
|
+
const { colors, outPath, typography } = opts;
|
|
105
|
+
const tokens = {
|
|
106
|
+
colors: {
|
|
107
|
+
light: {
|
|
108
|
+
theme: generateThemeTokens("light", colors),
|
|
109
|
+
global: generateGlobalTokens("light")
|
|
110
|
+
},
|
|
111
|
+
dark: { theme: generateThemeTokens("dark", colors), global: generateGlobalTokens("dark") },
|
|
112
|
+
contrast: { theme: generateThemeTokens("contrast", colors), global: generateGlobalTokens("contrast") }
|
|
113
|
+
},
|
|
114
|
+
typography: {
|
|
115
|
+
primary: generateTypographyTokens(typography)
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
const write = R.isNotNil(outPath);
|
|
119
|
+
if (write) {
|
|
120
|
+
const targetDir = path.resolve(process.cwd(), outPath);
|
|
121
|
+
await fs.mkdir(targetDir, { recursive: true });
|
|
122
|
+
console.log("Generating metadata and themes files");
|
|
123
|
+
const $theme = generateThemesJson(["Light", "Dark", "Contrast"], ["theme"]);
|
|
124
|
+
const $metadata = generateMetadataJson(["Light", "Dark", "Contrast"], ["theme"]);
|
|
125
|
+
await fs.writeFile(path.join(targetDir, "$themes.json"), JSON.stringify($theme, null, 2));
|
|
126
|
+
await fs.writeFile(path.join(targetDir, "$metadata.json"), JSON.stringify($metadata, null, 2));
|
|
127
|
+
console.log(`Copy files to ${targetDir}`);
|
|
128
|
+
await fs.cp(DEFAULT_FILES_PATH, targetDir, {
|
|
129
|
+
recursive: true
|
|
130
|
+
});
|
|
131
|
+
const files = [
|
|
132
|
+
generateColorModeFile("light", "theme", tokens.colors.light.theme, outPath),
|
|
133
|
+
generateColorModeFile("light", "global", tokens.colors.light.global, outPath),
|
|
134
|
+
generateColorModeFile("dark", "theme", tokens.colors.dark.theme, outPath),
|
|
135
|
+
generateColorModeFile("dark", "global", tokens.colors.dark.global, outPath),
|
|
136
|
+
generateColorModeFile("contrast", "theme", tokens.colors.contrast.theme, outPath),
|
|
137
|
+
generateColorModeFile("contrast", "global", tokens.colors.contrast.global, outPath),
|
|
138
|
+
generateTypographyFile("primary", "theme", tokens.typography.primary, outPath),
|
|
139
|
+
generateTypographyFile("secondary", "theme", tokens.typography.primary, outPath)
|
|
140
|
+
];
|
|
141
|
+
for (const file of files) {
|
|
142
|
+
const path_ = path.resolve(file.path);
|
|
143
|
+
const filePath = path.resolve(file.filePath);
|
|
144
|
+
console.log(`Writing file ${filePath}`);
|
|
145
|
+
await fs.mkdir(path_, { recursive: true });
|
|
146
|
+
await fs.writeFile(filePath, file.data, { encoding: "utf-8" });
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
return tokens;
|
|
150
|
+
};
|
|
151
|
+
export {
|
|
152
|
+
createTokens
|
|
153
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import type { CssColor } from '@adobe/leonardo-contrast-colors';
|
|
2
|
-
import type { ColorInfo, ColorNumber, ContrastMode,
|
|
2
|
+
import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeColors, ThemeInfo } from './types';
|
|
3
|
+
export declare const baseColors: Record<GlobalColors, CssColor>;
|
|
4
|
+
type Colors = Record<ThemeColors, CssColor>;
|
|
3
5
|
export type ColorError = 'none' | 'decorative' | 'interaction';
|
|
4
6
|
type GlobalGenType = {
|
|
5
|
-
themeMode?:
|
|
7
|
+
themeMode?: ColorMode | 'all';
|
|
6
8
|
contrastMode?: ContrastMode;
|
|
7
9
|
};
|
|
8
10
|
type ThemeGenType = {
|
|
9
|
-
colors:
|
|
10
|
-
accent: CssColor;
|
|
11
|
-
neutral: CssColor;
|
|
12
|
-
brand1: CssColor;
|
|
13
|
-
brand2: CssColor;
|
|
14
|
-
brand3: CssColor;
|
|
15
|
-
};
|
|
11
|
+
colors: Colors;
|
|
16
12
|
contrastMode?: ContrastMode;
|
|
17
13
|
};
|
|
18
14
|
/**
|
|
@@ -22,7 +18,7 @@ type ThemeGenType = {
|
|
|
22
18
|
* @param color The base color that is used to generate the color scale
|
|
23
19
|
* @param mode The mode of the theme
|
|
24
20
|
*/
|
|
25
|
-
export declare const generateScaleForColor: (color: CssColor, mode:
|
|
21
|
+
export declare const generateScaleForColor: (color: CssColor, mode: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
|
|
26
22
|
/**
|
|
27
23
|
*
|
|
28
24
|
* Generates a color theme based on a base color. Light, Dark and Contrast scales are includes.
|
|
@@ -30,14 +26,7 @@ export declare const generateScaleForColor: (color: CssColor, mode: Mode, contra
|
|
|
30
26
|
* @param color The base color that is used to generate the color theme
|
|
31
27
|
*/
|
|
32
28
|
export declare const generateThemeForColor: (color: CssColor, contrastMode?: "aa" | "aaa") => ThemeInfo;
|
|
33
|
-
export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) =>
|
|
34
|
-
blue: ThemeInfo;
|
|
35
|
-
green: ThemeInfo;
|
|
36
|
-
orange: ThemeInfo;
|
|
37
|
-
purple: ThemeInfo;
|
|
38
|
-
red: ThemeInfo;
|
|
39
|
-
yellow: ThemeInfo;
|
|
40
|
-
};
|
|
29
|
+
export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) => Record<GlobalColors, ThemeInfo>;
|
|
41
30
|
/**
|
|
42
31
|
* This function generates a complete theme for a set of colors.
|
|
43
32
|
*
|
|
@@ -45,20 +34,14 @@ export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) =>
|
|
|
45
34
|
* @param contrastMode The contrast mode to use
|
|
46
35
|
* @returns
|
|
47
36
|
*/
|
|
48
|
-
export declare const generateColorTheme: ({ colors, contrastMode }: ThemeGenType) =>
|
|
49
|
-
accent: ThemeInfo;
|
|
50
|
-
neutral: ThemeInfo;
|
|
51
|
-
brand1: ThemeInfo;
|
|
52
|
-
brand2: ThemeInfo;
|
|
53
|
-
brand3: ThemeInfo;
|
|
54
|
-
};
|
|
37
|
+
export declare const generateColorTheme: ({ colors, contrastMode }: ThemeGenType) => Record<ThemeColors, ThemeInfo>;
|
|
55
38
|
/**
|
|
56
39
|
*
|
|
57
40
|
* This function calculates a color that can be used as a strong contrast color to a base color.
|
|
58
41
|
*
|
|
59
42
|
* @param baseColor The base color
|
|
60
43
|
*/
|
|
61
|
-
export declare const calculateContrastOneColor: (baseColor: CssColor) => "#
|
|
44
|
+
export declare const calculateContrastOneColor: (baseColor: CssColor) => "#000000" | "#ffffff";
|
|
62
45
|
/**
|
|
63
46
|
*
|
|
64
47
|
* This function calculates a color that can be used as a subtle contrast color to a base color.
|
|
@@ -99,4 +82,4 @@ export declare const getColorNameFromNumber: (number: ColorNumber) => string;
|
|
|
99
82
|
export declare const getBaseColor: (color: CssColor) => CssColor;
|
|
100
83
|
export declare const getCssVariable: (colorType: string, colorNumber: ColorNumber) => string;
|
|
101
84
|
export {};
|
|
102
|
-
//# sourceMappingURL=
|
|
85
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGrH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAoEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UACzB,QAAQ,QACT,SAAS,iBACD,IAAI,GAAG,KAAK,KACzB,SAAS,EAuCX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAU1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa,KAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAgB3G,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY,KAAG,MAAM,CAAC,WAAW,EAAE,SAAS,CAc/G,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { CssColor } from '@adobe/leonardo-contrast-colors';
|
|
2
|
-
export type
|
|
2
|
+
export type ColorMode = 'light' | 'dark' | 'contrast';
|
|
3
3
|
export type ContrastMode = 'aa' | 'aaa';
|
|
4
4
|
export type ColorNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
|
|
5
|
-
export type
|
|
5
|
+
export type GlobalColors = 'red' | 'blue' | 'green' | 'orange' | 'purple' | 'yellow';
|
|
6
|
+
export type ThemeColors = 'accent' | 'neutral' | 'brand1' | 'brand2' | 'brand3';
|
|
6
7
|
export type ColorInfo = {
|
|
7
8
|
hex: CssColor;
|
|
8
9
|
number: ColorNumber;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC1F,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChF,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,CAAC"}
|
|
@@ -90,8 +90,8 @@ export declare const getLightnessFromHex: (hex: string) => number;
|
|
|
90
90
|
/**
|
|
91
91
|
* Get the contrast ratio between two HEX colors
|
|
92
92
|
*
|
|
93
|
-
* @param
|
|
94
|
-
* @param
|
|
93
|
+
* @param color1 The first color
|
|
94
|
+
* @param color2 The second color
|
|
95
95
|
* @returns
|
|
96
96
|
*/
|
|
97
97
|
export declare const getContrastFromHex: (color1: CssColor, color2: CssColor) => number;
|
|
@@ -110,17 +110,23 @@ export declare const getContrastFromLightness: (lightness: number, mainColor: Cs
|
|
|
110
110
|
/**
|
|
111
111
|
* Check if two colors have enough contrast to be used together
|
|
112
112
|
*
|
|
113
|
-
* @param
|
|
114
|
-
* @param
|
|
115
|
-
* @returns
|
|
113
|
+
* @param color1 The first color
|
|
114
|
+
* @param color2 The second color
|
|
115
|
+
* @returns If the colors have enough contrast
|
|
116
116
|
*/
|
|
117
117
|
export declare const areColorsContrasting: (color1: CssColor, color2: CssColor, type?: "decorative" | "aa" | "aaa") => boolean;
|
|
118
118
|
export declare const getApcaContrastLc: (textColor: CssColor, backgroundColor: CssColor) => string | number;
|
|
119
119
|
/**
|
|
120
120
|
* Check if aa string value is a HEX color
|
|
121
121
|
*
|
|
122
|
-
* @param
|
|
123
|
-
* @returns
|
|
122
|
+
* @param hex The string to check
|
|
123
|
+
* @returns If the string is a HEX color
|
|
124
124
|
*/
|
|
125
125
|
export declare const isHexColor: (hex: string) => boolean;
|
|
126
|
-
|
|
126
|
+
/**
|
|
127
|
+
*
|
|
128
|
+
* @param color
|
|
129
|
+
* @returns
|
|
130
|
+
*/
|
|
131
|
+
export declare const convertToHex: (color?: string) => CssColor;
|
|
132
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/colors/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,iCA6CtC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,aAwCjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,aAKrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,EAAE,WAExC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WA+CvD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAS,MAAM;;;;QAYnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WAM/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,QAAS,QAAQ,WAS7C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,SAAU,MAAM,QAAQ,MAAM,WAKzD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAAS,QAAQ,WAElD,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAS,QAAQ,WAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,WAK9C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,WAAY,QAAQ,UAAU,QAAQ,WAOpE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,cAAe,MAAM,aAAa,QAAQ,mBAAmB,QAAQ,WAYzG,CAAC;AAEF;;GAEG;AAKH;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,WAAY,QAAQ,UAAU,QAAQ,SAAQ,YAAY,GAAG,IAAI,GAAG,KAAK,YAYzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAe,QAAQ,mBAAmB,QAAQ,oBAW/E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,YAErC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,WAAY,MAAM,KAAG,QAQ7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateMetadataJson.d.ts","sourceRoot":"","sources":["../../../../src/init/generateMetadataJson.ts"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IAChB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"generateMetadataJson.d.ts","sourceRoot":"","sources":["../../../../src/init/generateMetadataJson.ts"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IAChB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAmBpH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateThemesJson.d.ts","sourceRoot":"","sources":["../../../../src/init/generateThemesJson.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"generateThemesJson.d.ts","sourceRoot":"","sources":["../../../../src/init/generateThemesJson.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,EAC3C,MAAM,EAAE,MAAM,EAAE,GACf,WAAW,EAAE,CAQf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAuB3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAOvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,SAAS,MAAM,CAAC;AAyC7B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAEvF,eAAO,MAAM,eAAe,YAAa,WAAW,EAAE,qBAGlD,CAAC;AAEL,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAK,MAAM,CAAC;AAEb,eAAO,MAAM,kBAAkB,EAAE,SAkChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAqC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SA2C3B,CAAC;AAEF,KAAK,UAAU,GAAG,CAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,gBAAgB,KACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC;AAE3G,eAAO,MAAM,UAAU,EAAE,UAqCd,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD,eAAO,MAAM,SAAS,EAAE,MA4BvB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAsCtB,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,MAuFxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAkBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MA2BtB,CAAC"}
|
|
@@ -6,6 +6,6 @@ type Options = {
|
|
|
6
6
|
/** Generate preview tokens */
|
|
7
7
|
preview: boolean;
|
|
8
8
|
};
|
|
9
|
-
export declare function
|
|
9
|
+
export declare function buildTokens(options: Options): Promise<void>;
|
|
10
10
|
export {};
|
|
11
|
-
//# sourceMappingURL=
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/index.ts"],"names":[],"mappings":"AAaA,KAAK,OAAO,GAAG;IACb,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CA4FjE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SASvB,CAAC;AASF,eAAO,MAAM,mBAAmB,EAAE,SASjC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entryfile.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/utils/entryfile.ts"],"names":[],"mappings":"AA2BA,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"noCase.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/utils/noCase.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACtE;AAQD;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,OAAY,UAkB1D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"permutateThemes.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/utils/permutateThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,WAAW,OAAO;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,eAAe,EAAE,CAAC;AAMjD,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,SAAe,EAAE,GAAS,OAAO,GAAG,gBAAgB,CAoD5G"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/build/utils/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM5E;;;;GAIG;AACH,eAAO,MAAM,OAAO,UAAW,gBAAgB,WAAkD,CAAC;AAElG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,gBAAgB,GAAG,WAAW,KAAG,CAAuC,CAAC;AAE5G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,yDAAmB,MAAM,EAAE,GAAG,MAAM,SAAS,gBAAgB,aAMlF,CAAC;AAEH,eAAO,MAAM,mBAAmB,yDAAmB,MAAM,EAAE,SAAS,gBAAgB,aASlF,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type { CssColor } from '@adobe/leonardo-contrast-colors';
|
|
2
|
+
import type { ThemeColors } from '../../colors';
|
|
3
|
+
type Colors = Record<ThemeColors, CssColor>;
|
|
4
|
+
type Typography = Record<string, string>;
|
|
5
|
+
type CreateTokens = {
|
|
6
|
+
colors: Colors;
|
|
7
|
+
typography: Typography;
|
|
8
|
+
outPath: string;
|
|
9
|
+
};
|
|
10
|
+
type DesignTokens = Record<string, {
|
|
11
|
+
$value: string;
|
|
12
|
+
$type: string;
|
|
13
|
+
}>;
|
|
14
|
+
type Tokens2ary = Record<string, Record<string, DesignTokens>>;
|
|
15
|
+
type Tokens1ary = Record<string, DesignTokens>;
|
|
16
|
+
type Tokens = Tokens1ary | Tokens2ary;
|
|
17
|
+
export declare const createTokens: (opts: CreateTokens) => Promise<{
|
|
18
|
+
colors: {
|
|
19
|
+
light: {
|
|
20
|
+
theme: Tokens;
|
|
21
|
+
global: {
|
|
22
|
+
global: {
|
|
23
|
+
blue: DesignTokens;
|
|
24
|
+
green: DesignTokens;
|
|
25
|
+
orange: DesignTokens;
|
|
26
|
+
purple: DesignTokens;
|
|
27
|
+
red: DesignTokens;
|
|
28
|
+
yellow: DesignTokens;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
dark: {
|
|
33
|
+
theme: Tokens;
|
|
34
|
+
global: {
|
|
35
|
+
global: {
|
|
36
|
+
blue: DesignTokens;
|
|
37
|
+
green: DesignTokens;
|
|
38
|
+
orange: DesignTokens;
|
|
39
|
+
purple: DesignTokens;
|
|
40
|
+
red: DesignTokens;
|
|
41
|
+
yellow: DesignTokens;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
contrast: {
|
|
46
|
+
theme: Tokens;
|
|
47
|
+
global: {
|
|
48
|
+
global: {
|
|
49
|
+
blue: DesignTokens;
|
|
50
|
+
green: DesignTokens;
|
|
51
|
+
orange: DesignTokens;
|
|
52
|
+
purple: DesignTokens;
|
|
53
|
+
red: DesignTokens;
|
|
54
|
+
yellow: DesignTokens;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
typography: {
|
|
60
|
+
primary: Tokens;
|
|
61
|
+
};
|
|
62
|
+
}>;
|
|
63
|
+
export {};
|
|
64
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,EAAwB,WAAW,EAAE,MAAM,cAAc,CAAC;AAItE,KAAK,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC5C,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAGzC,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAQF,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACtE,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;AAC/D,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAC/C,KAAK,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AA2GtC,eAAO,MAAM,YAAY,SAAgB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDpD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet",
|
|
3
|
-
"version": "0.1.0-next.
|
|
3
|
+
"version": "0.1.0-next.24",
|
|
4
4
|
"description": "CLI for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"repository": {
|
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
"./color": {
|
|
20
20
|
"types": "./dist/types/src/colors/index.d.ts",
|
|
21
21
|
"import": "./dist/src/colors/index.js"
|
|
22
|
+
},
|
|
23
|
+
"./tokens": {
|
|
24
|
+
"types": "./dist/types/src/tokens/index.d.ts",
|
|
25
|
+
"import": "./dist/src/tokens/index.js"
|
|
22
26
|
}
|
|
23
27
|
},
|
|
24
28
|
"publishConfig": {
|
|
@@ -26,8 +30,8 @@
|
|
|
26
30
|
},
|
|
27
31
|
"scripts": {
|
|
28
32
|
"designsystemet": "tsx ./bin/designsystemet.ts",
|
|
29
|
-
"build:tokens": "yarn clean:theme && yarn designsystemet tokens -p -t ../../design-tokens -o ../../packages/theme/brand",
|
|
30
|
-
"build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens -p -t ../../design-tokens -o ../../packages/theme/brand",
|
|
33
|
+
"build:tokens": "yarn clean:theme && yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",
|
|
34
|
+
"build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",
|
|
31
35
|
"build": "tsup && yarn build:types",
|
|
32
36
|
"build:swc": "yarn clean && swc src bin --copy-files -d dist && yarn build:types",
|
|
33
37
|
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../src/colors/colorUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,iCA6CtC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,aAwCjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,aAKrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,EAAE,WAExC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WA+CvD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAS,MAAM;;;;QAYnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WAM/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,QAAS,QAAQ,WAS7C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,SAAU,MAAM,QAAQ,MAAM,WAKzD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAAS,QAAQ,WAElD,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAS,QAAQ,WAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,WAK9C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,WAAY,QAAQ,UAAU,QAAQ,WAOpE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,cAAe,MAAM,aAAa,QAAQ,mBAAmB,QAAQ,WAYzG,CAAC;AAEF;;GAEG;AAKH;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,WAAY,QAAQ,UAAU,QAAQ,SAAQ,YAAY,GAAG,IAAI,GAAG,KAAK,YAYzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAe,QAAQ,mBAAmB,QAAQ,oBAW/E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,YAErC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"themeUtils.d.ts","sourceRoot":"","sources":["../../../../src/colors/themeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AASrF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ,CAAC;QACjB,OAAO,EAAE,QAAQ,CAAC;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,QAAQ,CAAC;KAClB,CAAC;IACF,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAoEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,QAAQ,IAAI,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAAS,EAuC/G,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAS1E,SACN,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa;;;;;;;CAgB1E,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY;;;;;;CAc/E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../src/tokens/actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAuB3B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build.ts"],"names":[],"mappings":"AAaA,KAAK,OAAO,GAAG;IACb,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,wBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CA4FzD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/configs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAOvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,SAAS,MAAM,CAAC;AAyC7B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAEvF,eAAO,MAAM,eAAe,YAAa,WAAW,EAAE,qBAGlD,CAAC;AAEL,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAK,MAAM,CAAC;AAEb,eAAO,MAAM,kBAAkB,EAAE,SAkChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAqC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SA2C3B,CAAC;AAEF,KAAK,UAAU,GAAG,CAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,gBAAgB,KACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC;AAE3G,eAAO,MAAM,UAAU,EAAE,UAqCd,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD,eAAO,MAAM,SAAS,EAAE,MA4BvB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAsCtB,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,MAuFxB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAkBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MA2BtB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../src/tokens/transformers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SASvB,CAAC;AASF,eAAO,MAAM,mBAAmB,EAAE,SASjC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"entryfile.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/utils/entryfile.ts"],"names":[],"mappings":"AA2BA,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"noCase.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/utils/noCase.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACtE;AAQD;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,OAAY,UAkB1D"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"permutateThemes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/utils/permutateThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,WAAW,OAAO;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,eAAe,EAAE,CAAC;AAMjD,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,SAAe,EAAE,GAAS,OAAO,GAAG,gBAAgB,CAoD5G"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/utils/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM5E;;;;GAIG;AACH,eAAO,MAAM,OAAO,UAAW,gBAAgB,WAAkD,CAAC;AAElG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,gBAAgB,GAAG,WAAW,KAAG,CAAuC,CAAC;AAE5G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,yDAAmB,MAAM,EAAE,GAAG,MAAM,SAAS,gBAAgB,aAMlF,CAAC;AAEH,eAAO,MAAM,mBAAmB,yDAAmB,MAAM,EAAE,SAAS,gBAAgB,aASlF,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|