@digdir/designsystemet 1.0.0-next.51 → 1.0.0

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.
Files changed (31) hide show
  1. package/README.md +94 -3
  2. package/dist/bin/config.d.ts +16 -16
  3. package/dist/bin/config.d.ts.map +1 -1
  4. package/dist/bin/config.js +17 -2
  5. package/dist/bin/designsystemet.js +10 -10
  6. package/dist/bin/options.d.ts +9 -4
  7. package/dist/bin/options.d.ts.map +1 -1
  8. package/dist/bin/options.js +6 -4
  9. package/dist/config.schema.json +4 -2
  10. package/dist/src/colors/theme.d.ts +1 -0
  11. package/dist/src/colors/theme.d.ts.map +1 -1
  12. package/dist/src/colors/theme.js +13 -0
  13. package/dist/src/migrations/beta-to-v1.js +1 -1
  14. package/dist/src/tokens/build/configs.js +1 -1
  15. package/dist/src/tokens/create.d.ts.map +1 -1
  16. package/dist/src/tokens/create.js +14 -12
  17. package/dist/src/tokens/design-tokens/default/primitives/globals.json +1 -1
  18. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json +1 -1
  19. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json +1 -1
  20. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json +1 -1
  21. package/dist/src/tokens/design-tokens/default/semantic/style.json +25 -25
  22. package/dist/src/tokens/design-tokens/template/$themes.json +20 -20
  23. package/dist/src/tokens/design-tokens/template/semantic/color-base-file.json +8 -0
  24. package/dist/src/tokens/design-tokens/template/themes/theme-base-file.json +6 -8
  25. package/dist/src/tokens/template.d.ts.map +1 -1
  26. package/dist/src/tokens/template.js +1 -0
  27. package/dist/src/tokens/types.d.ts +3 -4
  28. package/dist/src/tokens/types.d.ts.map +1 -1
  29. package/dist/src/tokens/write.d.ts.map +1 -1
  30. package/dist/src/tokens/write.js +1 -0
  31. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,98 @@ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to ge
10
10
  ## Usage
11
11
 
12
12
  ### Create tokens
13
- We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet.
14
13
 
15
- ### Build tokens
16
- Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.
14
+ Use `npx @digdir/designsystemet tokens create <options>` to create design tokens for use with Designsystemet.
15
+
16
+ This allows you to define themes including custom colors, font-family, and border-radius.
17
+ We recommend using the [Designsystemet theme builder](https://theme.designsystemet.no/) for generating a valid command with correct options.
18
+
19
+ #### Update tokens
20
+
21
+ Whenever a new version of the CLI is released, or you have done changes, we recommend to update design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
22
+
23
+ To update design tokens, re-run `npx @digdir/designsystemet tokens create <options> --clean`.
24
+ If a [config file](#using-a-config-file) you can also re-run with `"clean": true`.
25
+
26
+ > ⚠️ **WARNING** ⚠️
27
+ > The design tokens created by this tool are considered an implementation detail, and is subject
28
+ > to change at any time without being considered a breaking change. We **only** support customisations
29
+ > done through the CLI options. Direct editing of the design tokens are **not** supported.
30
+ >
31
+ > Since tokens may be added or removed at any time, it is necessary to routinely re-run this
32
+ > command when upgrading the libraries. This will remove any direct edits to the design tokens.
33
+
34
+ ### Build CSS from tokens
35
+
36
+ Use `npx @digdir/designsystemet tokens build <options>` to build CSS from design tokens generated in the previous step.
37
+
38
+ > ⚠️ **WARNING** ⚠️
39
+ > The CSS files from created by this tool are considered build artifacts. They should **not** be
40
+ > edited directly. While the CSS will not change unexpectedly, new variables may be added at any
41
+ > time. Therefore, it is necessary to routinely re-run this command when upgrading the libraries.
42
+ > This will remove any direct edits to the CSS.
43
+
44
+ #### Update built CSS
45
+
46
+ Whenever a new version of the CLI is released, or you have done changes, we recommend to build a new set of CSS from design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
47
+
48
+
49
+ ### Using a config file
50
+
51
+ > ⚠️ **WARNING** ⚠️
52
+ > This feature is experimental. The config schema may change at any time.
53
+
54
+
55
+ The `tokens create` command supports a config file. It will auto-detect a `designsystemet.config.json` file in the current directory. You can also use the `--config <path>` option to supply a different config name and location.
56
+
57
+ The main advantage of using a config file is for automation in scenarios with multiple themes.
58
+
59
+ To get started, use this template for a `designsystemet.config.json` file:
60
+
61
+ ```jsonc
62
+ {
63
+ "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
64
+ }
65
+ ```
66
+
67
+ In editors which support JSON Schema, the `$schema` will then give you editor hints for the structure of the file.
68
+
69
+ #### Minimal config example
70
+ As a minimal example, the following CLI snippet from the theme builder
71
+
72
+ ```
73
+ npx @digdir/designsystemet tokens create \
74
+ --main-colors "primary:#0062BA" "accent:#1E98F5" \
75
+ --neutral-color "#1E2B3C" \
76
+ --support-colors "extra1:#F45F63" "extra2:#E5AA20" \
77
+ --border-radius 4 \
78
+ --theme "theme"
79
+ ```
80
+
81
+ ...is equivalent to this `designsystemet.config.json` file
82
+ ```jsonc
83
+ {
84
+ "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
85
+ "outDir": "../path/to/design-tokens",
86
+ "themes": {
87
+ "theme": {
88
+ "colors": {
89
+ "main": { "primary": "#0062BA", "accent": "#1E98F5" },
90
+ "neutral": "#1E2B3C",
91
+ "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
92
+ },
93
+ "borderRadius": 4
94
+ }
95
+ }
96
+ }
97
+ ```
98
+ To generate new design tokens and CSS files, you would then run.
99
+
100
+ ```
101
+ npx @digdir/designsystemet tokens create
102
+ npx @digdir/designsystemet tokens build
103
+ ```
104
+
105
+ #### Complex config example
106
+
107
+ Have a look at the `*.config.json` files under the `packages/cli` in the Github repo for more complex examples.
@@ -9,16 +9,16 @@ export declare const configFileSchema: z.ZodObject<{
9
9
  clean: z.ZodOptional<z.ZodBoolean>;
10
10
  themes: z.ZodRecord<z.ZodString, z.ZodObject<{
11
11
  colors: z.ZodObject<{
12
- main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
13
- support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
12
+ main: z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>;
13
+ support: z.ZodDefault<z.ZodOptional<z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>>>;
14
14
  neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
15
15
  }, "strip", z.ZodTypeAny, {
16
- main: Record<string, `#${string}`>;
17
16
  neutral: `#${string}`;
17
+ main: Record<string, `#${string}`>;
18
18
  support: Record<string, `#${string}`>;
19
19
  }, {
20
- main: Record<string, string>;
21
20
  neutral: string;
21
+ main: Record<string, string>;
22
22
  support?: Record<string, string> | undefined;
23
23
  }>;
24
24
  typography: z.ZodOptional<z.ZodObject<{
@@ -31,8 +31,8 @@ export declare const configFileSchema: z.ZodObject<{
31
31
  borderRadius: z.ZodOptional<z.ZodNumber>;
32
32
  }, "strip", z.ZodTypeAny, {
33
33
  colors: {
34
- main: Record<string, `#${string}`>;
35
34
  neutral: `#${string}`;
35
+ main: Record<string, `#${string}`>;
36
36
  support: Record<string, `#${string}`>;
37
37
  };
38
38
  typography?: {
@@ -41,8 +41,8 @@ export declare const configFileSchema: z.ZodObject<{
41
41
  borderRadius?: number | undefined;
42
42
  }, {
43
43
  colors: {
44
- main: Record<string, string>;
45
44
  neutral: string;
45
+ main: Record<string, string>;
46
46
  support?: Record<string, string> | undefined;
47
47
  };
48
48
  typography?: {
@@ -53,8 +53,8 @@ export declare const configFileSchema: z.ZodObject<{
53
53
  }, "strip", z.ZodTypeAny, {
54
54
  themes: Record<string, {
55
55
  colors: {
56
- main: Record<string, `#${string}`>;
57
56
  neutral: `#${string}`;
57
+ main: Record<string, `#${string}`>;
58
58
  support: Record<string, `#${string}`>;
59
59
  };
60
60
  typography?: {
@@ -67,8 +67,8 @@ export declare const configFileSchema: z.ZodObject<{
67
67
  }, {
68
68
  themes: Record<string, {
69
69
  colors: {
70
- main: Record<string, string>;
71
70
  neutral: string;
71
+ main: Record<string, string>;
72
72
  support?: Record<string, string> | undefined;
73
73
  };
74
74
  typography?: {
@@ -88,16 +88,16 @@ export declare const combinedConfigSchema: z.ZodObject<{
88
88
  clean: z.ZodBoolean;
89
89
  themes: z.ZodRecord<z.ZodString, z.ZodObject<{
90
90
  colors: z.ZodObject<{
91
- main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
92
- support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
91
+ main: z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>;
92
+ support: z.ZodDefault<z.ZodOptional<z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>>>;
93
93
  neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
94
94
  }, "strip", z.ZodTypeAny, {
95
- main: Record<string, `#${string}`>;
96
95
  neutral: `#${string}`;
96
+ main: Record<string, `#${string}`>;
97
97
  support: Record<string, `#${string}`>;
98
98
  }, {
99
- main: Record<string, string>;
100
99
  neutral: string;
100
+ main: Record<string, string>;
101
101
  support?: Record<string, string> | undefined;
102
102
  }>;
103
103
  typography: z.ZodOptional<z.ZodObject<{
@@ -110,8 +110,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
110
110
  borderRadius: z.ZodOptional<z.ZodNumber>;
111
111
  }, "strip", z.ZodTypeAny, {
112
112
  colors: {
113
- main: Record<string, `#${string}`>;
114
113
  neutral: `#${string}`;
114
+ main: Record<string, `#${string}`>;
115
115
  support: Record<string, `#${string}`>;
116
116
  };
117
117
  typography?: {
@@ -120,8 +120,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
120
120
  borderRadius?: number | undefined;
121
121
  }, {
122
122
  colors: {
123
- main: Record<string, string>;
124
123
  neutral: string;
124
+ main: Record<string, string>;
125
125
  support?: Record<string, string> | undefined;
126
126
  };
127
127
  typography?: {
@@ -133,8 +133,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
133
133
  clean: boolean;
134
134
  themes: Record<string, {
135
135
  colors: {
136
- main: Record<string, `#${string}`>;
137
136
  neutral: `#${string}`;
137
+ main: Record<string, `#${string}`>;
138
138
  support: Record<string, `#${string}`>;
139
139
  };
140
140
  typography?: {
@@ -147,8 +147,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
147
147
  clean: boolean;
148
148
  themes: Record<string, {
149
149
  colors: {
150
- main: Record<string, string>;
151
150
  neutral: string;
151
+ main: Record<string, string>;
152
152
  support?: Record<string, string> | undefined;
153
153
  };
154
154
  typography?: {
@@ -1 +1 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAUD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA+BnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA+CnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import * as R from "ramda";
2
2
  import { z } from "zod";
3
3
  import { convertToHex } from "../src/colors/index.js";
4
+ import { RESERVED_COLORS } from "../src/colors/theme.js";
4
5
  import { cliOptions } from "../src/tokens/create.js";
5
6
  function mapPathToOptionName(path) {
6
7
  const normalisedPath = path[0] === "themes" ? ["theme", ...R.drop(2, path)] : path;
@@ -17,9 +18,23 @@ const hexPatterns = [
17
18
  `#[0-9a-fA-F]{6}`,
18
19
  `#[0-9a-fA-F]{8}`
19
20
  ];
21
+ const reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
20
22
  const colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
21
- const colorSchema = z.string({ description: "A hex color, which is used for creating a color scale" }).regex(colorRegex).transform(convertToHex);
22
- const colorCategorySchema = z.record(colorSchema, { description: "One or more color definitions" });
23
+ const colorSchema = z.string({
24
+ description: `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
25
+ }).regex(colorRegex).transform(convertToHex);
26
+ const colorCategorySchema = z.record(
27
+ z.string().regex(new RegExp(reservedColorsPattern, "i"), {
28
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
29
+ }),
30
+ colorSchema,
31
+ {
32
+ description: "One or more color definitions",
33
+ invalid_type_error: "Color definitions must be hex color values"
34
+ }
35
+ ).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
36
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
37
+ });
23
38
  const themeSchema = z.object(
24
39
  {
25
40
  colors: z.object(
@@ -12,7 +12,7 @@ import { cliOptions, createTokens } from "../src/tokens/create.js";
12
12
  import { cleanDir } from "../src/tokens/utils.js";
13
13
  import { writeTokens } from "../src/tokens/write.js";
14
14
  import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
15
- import { getDefaultOrExplicitOption } from "./options.js";
15
+ import { getCliOption, getDefaultCliOption, getSuppliedCliOption } from "./options.js";
16
16
  program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
17
17
  function makeTokenCommands() {
18
18
  const tokenCmd = createCommand("tokens");
@@ -39,7 +39,7 @@ function makeTokenCommands() {
39
39
  `-o, --${cliOptions.outDir} <string>`,
40
40
  `Output directory for created ${chalk.blue("design-tokens")}`,
41
41
  DEFAULT_TOKENS_CREATE_DIR
42
- ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family`, DEFAULT_FONT).option(
42
+ ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
43
43
  `-b, --${cliOptions.theme.borderRadius} <number>`,
44
44
  `Unitless base border-radius in px`,
45
45
  (radiusAsString) => Number(radiusAsString),
@@ -86,17 +86,17 @@ function makeTokenCommands() {
86
86
  borderRadius: optionGetter(cmd, "borderRadius")
87
87
  });
88
88
  const unvalidatedConfig = noUndefined({
89
- outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, "outDir"),
90
- clean: propsFromJson?.clean ?? getDefaultOrExplicitOption(cmd, "clean"),
91
- themes: propsFromJson?.themes ? (
92
- // For each theme specified in the JSON config, we override the config values
93
- // with the explicitly set options from the CLI.
94
- R.map((theme) => R.mergeDeepRight(theme, getThemeOptions(getDefaultOrExplicitOption)), propsFromJson.themes)
95
- ) : (
89
+ outDir: propsFromJson?.outDir ?? getCliOption(cmd, "outDir"),
90
+ clean: propsFromJson?.clean ?? getCliOption(cmd, "clean"),
91
+ themes: propsFromJson?.themes ? R.map((jsonThemeValues) => {
92
+ const defaultThemeValues = getThemeOptions(getDefaultCliOption);
93
+ const cliThemeValues = getThemeOptions(getSuppliedCliOption);
94
+ return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
95
+ }, propsFromJson.themes) : (
96
96
  // If there are no themes specified in the JSON config, we use both explicit
97
97
  // and default theme options from the CLI.
98
98
  {
99
- [opts.theme]: getThemeOptions(getDefaultOrExplicitOption)
99
+ [opts.theme]: getThemeOptions(getCliOption)
100
100
  }
101
101
  )
102
102
  });
@@ -6,11 +6,16 @@ export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
6
6
  * The difference between this and using the option directly is that we return undefined
7
7
  * instead of the default value if the option was not explicitly set.
8
8
  */
9
- export declare const getExplicitOptionOnly: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
9
+ export declare const getSuppliedCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
10
10
  /**
11
- * This function is basically the default behaviour, unlike {@link getExplicitOptionOnly}.
12
- * It is provided so that the program can choose its behaviour as needed.
11
+ * Get the default value specified for a CLI command option.
12
+ * Mostly useful for getting values which may later be overridden.
13
13
  */
14
- export declare const getDefaultOrExplicitOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
14
+ export declare const getDefaultCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
15
+ /**
16
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
17
+ * for the option as defined in the {@link Command}
18
+ */
19
+ export declare const getCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
15
20
  export {};
16
21
  //# sourceMappingURL=options.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAjB/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAewD,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAvBpC,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqBwE,CAAC"}
1
+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAjB9B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAeuD,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAvB7B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqB0D,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,YAAY,GA7BtB,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBA2B0D,CAAC"}
@@ -4,9 +4,11 @@ const getOptionIfMatchingSource = (...sources) => (command, option) => {
4
4
  return command.getOptionValue(option);
5
5
  }
6
6
  };
7
- const getExplicitOptionOnly = getOptionIfMatchingSource("cli");
8
- const getDefaultOrExplicitOption = getOptionIfMatchingSource("cli", "default");
7
+ const getSuppliedCliOption = getOptionIfMatchingSource("cli");
8
+ const getDefaultCliOption = getOptionIfMatchingSource("default");
9
+ const getCliOption = getOptionIfMatchingSource("cli", "default");
9
10
  export {
10
- getDefaultOrExplicitOption,
11
- getExplicitOptionOnly
11
+ getCliOption,
12
+ getDefaultCliOption,
13
+ getSuppliedCliOption
12
14
  };
@@ -25,13 +25,15 @@
25
25
  "additionalProperties": {
26
26
  "type": "string",
27
27
  "pattern": "^#[0-9a-fA-F]{3}|#[0-9a-fA-F]{4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}$",
28
- "description": "A hex color, which is used for creating a color scale"
28
+ "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
29
+ },
30
+ "propertyNames": {
31
+ "pattern": "^(?!(?:neutral|success|warning|danger|info|blue|green|orange|purple|red)$)"
29
32
  },
30
33
  "description": "One or more color definitions"
31
34
  },
32
35
  "support": {
33
36
  "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main",
34
- "description": "One or more color definitions",
35
37
  "default": {}
36
38
  },
37
39
  "neutral": {
@@ -1,5 +1,6 @@
1
1
  import type { CssColor } from './types.js';
2
2
  import type { Color, ColorNumber, ColorScheme, ThemeInfo } from './types.js';
3
+ export declare const RESERVED_COLORS: string[];
3
4
  /**
4
5
  * Generates a color scale based on a base color and a color mode.
5
6
  *
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,KAAK,EAwBnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,QAAQ,SAAS,GAAG,QAAQ,KAAG,QAgBnF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E,eAAO,MAAM,eAAe,UAW3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,KAAK,EAwBnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,QAAQ,SAAS,GAAG,QAAQ,KAAG,QAgBnF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
@@ -2,6 +2,18 @@ import chroma from "chroma-js";
2
2
  import * as R from "ramda";
3
3
  import { colorMetadata, getColorMetadataByNumber } from "./colorMetadata.js";
4
4
  import { getLightnessFromHex, getLuminanceFromLightness } from "./utils.js";
5
+ const RESERVED_COLORS = [
6
+ "neutral",
7
+ "success",
8
+ "warning",
9
+ "danger",
10
+ "info",
11
+ "blue",
12
+ "green",
13
+ "orange",
14
+ "purple",
15
+ "red"
16
+ ];
5
17
  const generateColorScale = (color, colorScheme) => {
6
18
  const colors = R.mapObjIndexed((colorData) => {
7
19
  const luminance = colorData.luminance[colorScheme];
@@ -60,6 +72,7 @@ const getCssVariable = (colorType, colorNumber) => {
60
72
  return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
61
73
  };
62
74
  export {
75
+ RESERVED_COLORS,
63
76
  generateColorContrast,
64
77
  generateColorScale,
65
78
  generateColorSchemes,
@@ -276,7 +276,7 @@ var beta_to_v1_default = (glob) => runCssCodemod({
276
276
  "--fds-sizing-22": "--ds-size-22",
277
277
  "--fds-sizing-26": "--ds-size-26",
278
278
  "--fds-sizing-30": "--ds-size-30",
279
- "--fds-opacity-disabled": "--ds-disabled-opacity",
279
+ "--fds-opacity-disabled": "--ds-opacity-disabled",
280
280
  "--fds-colors-blue-100": "--ds-global-blue-1",
281
281
  "--fds-colors-blue-200": "--ds-global-blue-2",
282
282
  "--fds-colors-blue-700": "--ds-global-blue-7",
@@ -57,7 +57,7 @@ const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme },
57
57
  {
58
58
  destination: `color-scheme/${colorScheme}.css`,
59
59
  format: formats.colorScheme.name,
60
- filter: (token) => !token.isSource && typeEquals("color", token)
60
+ filter: (token) => !token.isSource && typeEquals("color", token) && !R.startsWith(["global"], token.path)
61
61
  }
62
62
  ],
63
63
  options: {
@@ -1 +1 @@
1
- {"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,KAAK,EAAE,MAAM,EAAqC,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAcb,CAAC;AAkEX,eAAO,MAAM,YAAY,SAAU,KAAK,WAqBvC,CAAC"}
1
+ {"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,KAAK,EAAE,MAAM,EAAyB,MAAM,YAAY,CAAC;AAE/E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAcb,CAAC;AAoEX,eAAO,MAAM,YAAY,SAAU,KAAK,WAqBvC,CAAC"}
@@ -26,21 +26,23 @@ const createColorTokens = (colorArray) => {
26
26
  const generateTypographyTokens = (themeName, { fontFamily }) => {
27
27
  return {
28
28
  [themeName]: {
29
- main: {
29
+ "font-family": {
30
30
  $type: "fontFamilies",
31
31
  $value: fontFamily ?? "Inter"
32
32
  },
33
- bold: {
34
- $type: "fontWeights",
35
- $value: "Medium"
36
- },
37
- "extra-bold": {
38
- $type: "fontWeights",
39
- $value: "Semi bold"
40
- },
41
- regular: {
42
- $type: "fontWeights",
43
- $value: "Regular"
33
+ "font-weight": {
34
+ medium: {
35
+ $type: "fontWeights",
36
+ $value: "Medium"
37
+ },
38
+ semibold: {
39
+ $type: "fontWeights",
40
+ $value: "SemiBold"
41
+ },
42
+ regular: {
43
+ $type: "fontWeights",
44
+ $value: "Regular"
45
+ }
44
46
  }
45
47
  }
46
48
  };
@@ -140,4 +140,4 @@
140
140
  "$value": "30%"
141
141
  }
142
142
  }
143
- }
143
+ }
@@ -93,4 +93,4 @@
93
93
  "$value": "1.5%"
94
94
  }
95
95
  }
96
- }
96
+ }
@@ -93,4 +93,4 @@
93
93
  "$value": "1.5%"
94
94
  }
95
95
  }
96
- }
96
+ }
@@ -93,4 +93,4 @@
93
93
  "$value": "1.5%"
94
94
  }
95
95
  }
96
- }
96
+ }
@@ -4,7 +4,7 @@
4
4
  "2xl": {
5
5
  "$type": "typography",
6
6
  "$value": {
7
- "fontFamily": "{font.family}",
7
+ "fontFamily": "{font-family}",
8
8
  "fontWeight": "{font-weight.medium}",
9
9
  "lineHeight": "{line-height.sm}",
10
10
  "fontSize": "{font-size.10}",
@@ -14,7 +14,7 @@
14
14
  "xl": {
15
15
  "$type": "typography",
16
16
  "$value": {
17
- "fontFamily": "{font.family}",
17
+ "fontFamily": "{font-family}",
18
18
  "fontWeight": "{font-weight.medium}",
19
19
  "lineHeight": "{line-height.sm}",
20
20
  "fontSize": "{font-size.9}",
@@ -24,7 +24,7 @@
24
24
  "lg": {
25
25
  "$type": "typography",
26
26
  "$value": {
27
- "fontFamily": "{font.family}",
27
+ "fontFamily": "{font-family}",
28
28
  "fontWeight": "{font-weight.medium}",
29
29
  "lineHeight": "{line-height.sm}",
30
30
  "fontSize": "{font-size.8}",
@@ -34,7 +34,7 @@
34
34
  "md": {
35
35
  "$type": "typography",
36
36
  "$value": {
37
- "fontFamily": "{font.family}",
37
+ "fontFamily": "{font-family}",
38
38
  "fontWeight": "{font-weight.medium}",
39
39
  "lineHeight": "{line-height.sm}",
40
40
  "fontSize": "{font-size.7}",
@@ -44,7 +44,7 @@
44
44
  "sm": {
45
45
  "$type": "typography",
46
46
  "$value": {
47
- "fontFamily": "{font.family}",
47
+ "fontFamily": "{font-family}",
48
48
  "fontWeight": "{font-weight.medium}",
49
49
  "lineHeight": "{line-height.sm}",
50
50
  "fontSize": "{font-size.6}",
@@ -54,7 +54,7 @@
54
54
  "xs": {
55
55
  "$type": "typography",
56
56
  "$value": {
57
- "fontFamily": "{font.family}",
57
+ "fontFamily": "{font-family}",
58
58
  "fontWeight": "{font-weight.medium}",
59
59
  "lineHeight": "{line-height.sm}",
60
60
  "fontSize": "{font-size.5}",
@@ -64,7 +64,7 @@
64
64
  "2xs": {
65
65
  "$type": "typography",
66
66
  "$value": {
67
- "fontFamily": "{font.family}",
67
+ "fontFamily": "{font-family}",
68
68
  "fontWeight": "{font-weight.medium}",
69
69
  "lineHeight": "{line-height.sm}",
70
70
  "fontSize": "{font-size.4}",
@@ -76,7 +76,7 @@
76
76
  "xl": {
77
77
  "$type": "typography",
78
78
  "$value": {
79
- "fontFamily": "{font.family}",
79
+ "fontFamily": "{font-family}",
80
80
  "fontWeight": "{font-weight.regular}",
81
81
  "lineHeight": "{line-height.md}",
82
82
  "fontSize": "{font-size.6}",
@@ -86,7 +86,7 @@
86
86
  "lg": {
87
87
  "$type": "typography",
88
88
  "$value": {
89
- "fontFamily": "{font.family}",
89
+ "fontFamily": "{font-family}",
90
90
  "fontWeight": "{font-weight.regular}",
91
91
  "lineHeight": "{line-height.md}",
92
92
  "fontSize": "{font-size.5}",
@@ -96,7 +96,7 @@
96
96
  "md": {
97
97
  "$type": "typography",
98
98
  "$value": {
99
- "fontFamily": "{font.family}",
99
+ "fontFamily": "{font-family}",
100
100
  "fontWeight": "{font-weight.regular}",
101
101
  "lineHeight": "{line-height.md}",
102
102
  "fontSize": "{font-size.4}",
@@ -106,7 +106,7 @@
106
106
  "sm": {
107
107
  "$type": "typography",
108
108
  "$value": {
109
- "fontFamily": "{font.family}",
109
+ "fontFamily": "{font-family}",
110
110
  "fontWeight": "{font-weight.regular}",
111
111
  "lineHeight": "{line-height.md}",
112
112
  "fontSize": "{font-size.3}",
@@ -116,7 +116,7 @@
116
116
  "xs": {
117
117
  "$type": "typography",
118
118
  "$value": {
119
- "fontFamily": "{font.family}",
119
+ "fontFamily": "{font-family}",
120
120
  "fontWeight": "{font-weight.regular}",
121
121
  "lineHeight": "{line-height.md}",
122
122
  "fontSize": "{font-size.2}",
@@ -127,7 +127,7 @@
127
127
  "xl": {
128
128
  "$type": "typography",
129
129
  "$value": {
130
- "fontFamily": "{font.family}",
130
+ "fontFamily": "{font-family}",
131
131
  "fontWeight": "{font-weight.regular}",
132
132
  "lineHeight": "{line-height.sm}",
133
133
  "fontSize": "{font-size.6}",
@@ -137,7 +137,7 @@
137
137
  "lg": {
138
138
  "$type": "typography",
139
139
  "$value": {
140
- "fontFamily": "{font.family}",
140
+ "fontFamily": "{font-family}",
141
141
  "fontWeight": "{font-weight.regular}",
142
142
  "lineHeight": "{line-height.sm}",
143
143
  "fontSize": "{font-size.5}",
@@ -147,7 +147,7 @@
147
147
  "md": {
148
148
  "$type": "typography",
149
149
  "$value": {
150
- "fontFamily": "{font.family}",
150
+ "fontFamily": "{font-family}",
151
151
  "fontWeight": "{font-weight.regular}",
152
152
  "lineHeight": "{line-height.sm}",
153
153
  "fontSize": "{font-size.4}",
@@ -157,7 +157,7 @@
157
157
  "sm": {
158
158
  "$type": "typography",
159
159
  "$value": {
160
- "fontFamily": "{font.family}",
160
+ "fontFamily": "{font-family}",
161
161
  "fontWeight": "{font-weight.regular}",
162
162
  "lineHeight": "{line-height.sm}",
163
163
  "fontSize": "{font-size.3}",
@@ -167,7 +167,7 @@
167
167
  "xs": {
168
168
  "$type": "typography",
169
169
  "$value": {
170
- "fontFamily": "{font.family}",
170
+ "fontFamily": "{font-family}",
171
171
  "fontWeight": "{font-weight.regular}",
172
172
  "lineHeight": "{line-height.sm}",
173
173
  "fontSize": "{font-size.2}",
@@ -179,7 +179,7 @@
179
179
  "xl": {
180
180
  "$type": "typography",
181
181
  "$value": {
182
- "fontFamily": "{font.family}",
182
+ "fontFamily": "{font-family}",
183
183
  "fontWeight": "{font-weight.regular}",
184
184
  "lineHeight": "{line-height.lg}",
185
185
  "fontSize": "{font-size.6}",
@@ -189,7 +189,7 @@
189
189
  "lg": {
190
190
  "$type": "typography",
191
191
  "$value": {
192
- "fontFamily": "{font.family}",
192
+ "fontFamily": "{font-family}",
193
193
  "fontWeight": "{font-weight.regular}",
194
194
  "lineHeight": "{line-height.lg}",
195
195
  "fontSize": "{font-size.5}",
@@ -199,7 +199,7 @@
199
199
  "md": {
200
200
  "$type": "typography",
201
201
  "$value": {
202
- "fontFamily": "{font.family}",
202
+ "fontFamily": "{font-family}",
203
203
  "fontWeight": "{font-weight.regular}",
204
204
  "lineHeight": "{line-height.lg}",
205
205
  "fontSize": "{font-size.4}",
@@ -209,7 +209,7 @@
209
209
  "sm": {
210
210
  "$type": "typography",
211
211
  "$value": {
212
- "fontFamily": "{font.family}",
212
+ "fontFamily": "{font-family}",
213
213
  "fontWeight": "{font-weight.regular}",
214
214
  "lineHeight": "{line-height.lg}",
215
215
  "fontSize": "{font-size.3}",
@@ -219,7 +219,7 @@
219
219
  "xs": {
220
220
  "$type": "typography",
221
221
  "$value": {
222
- "fontFamily": "{font.family}",
222
+ "fontFamily": "{font-family}",
223
223
  "fontWeight": "{font-weight.regular}",
224
224
  "lineHeight": "{line-height.lg}",
225
225
  "fontSize": "{font-size.2}",
@@ -229,8 +229,8 @@
229
229
  }
230
230
  }
231
231
  },
232
- "disabled": {
233
- "opacity": {
232
+ "opacity": {
233
+ "disabled": {
234
234
  "$type": "opacity",
235
235
  "$value": "{opacity.30}"
236
236
  }
@@ -375,4 +375,4 @@
375
375
  "$value": "{_size.30}"
376
376
  }
377
377
  }
378
- }
378
+ }
@@ -993,22 +993,22 @@
993
993
  "$figmaCollectionId": "VariableCollectionId:36248:20769",
994
994
  "$figmaModeId": "36248:2",
995
995
  "$figmaVariableReferences": {
996
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
997
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
998
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
999
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
1000
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
1001
996
  "altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
1002
997
  "altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
1003
998
  "altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
1004
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
1005
999
  "uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
1006
1000
  "uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
1007
1001
  "uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
1008
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
1009
1002
  "portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
1010
1003
  "portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
1011
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
1004
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
1005
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
1006
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
1007
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
1008
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
1009
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
1010
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
1011
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
1012
1012
  },
1013
1013
  "group": "Typography"
1014
1014
  },
@@ -1025,22 +1025,22 @@
1025
1025
  "$figmaCollectionId": "VariableCollectionId:36248:20769",
1026
1026
  "$figmaModeId": "36248:3",
1027
1027
  "$figmaVariableReferences": {
1028
- "digdir.main": "856b5d6abbcf6bc06b02838682edab2667c12783",
1029
- "digdir.bold": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
1030
- "digdir.extra-bold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
1031
- "digdir.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
1032
- "altinn.main": "7efa525773ed529cfeb44e208412f02539868535",
1033
1028
  "altinn.bold": "3af4338852fc67331cf46c429493ccc5f7e09899",
1034
1029
  "altinn.extra-bold": "b4ec11d393468420a89988b9a11979aeeea32c50",
1035
1030
  "altinn.regular": "770eecc1f59894aa05daaa4574006edd0bc19529",
1036
- "uutilsynet.main": "5e762a7b0a24e3281508b05856e24794ff01d084",
1037
1031
  "uutilsynet.bold": "ae115e5abeb6b8cde347c18753ccd04d0fbeab16",
1038
1032
  "uutilsynet.extra-bold": "7bf9d7606f15b50122745802c38324ff2bd1b712",
1039
1033
  "uutilsynet.regular": "e8a386d8fcb4aecb8ba13a4a5e7587c156c1a244",
1040
- "portal.main": "b1f98b1619271bd779e64a70e601ed407a2d6b3f",
1041
1034
  "portal.bold": "5a2c9d220adc36dd0006ea89dee954faba51579e",
1042
1035
  "portal.extra-bold": "9bf5619eaa33305407b1cafdba23bb9f61db318c",
1043
- "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0"
1036
+ "portal.regular": "494220ceeec054c743b337943dd3c7768feb9db0",
1037
+ "digdir.font-weight.semibold": "cbc7c1691a8a78015feaaf737170d1bad69127f3",
1038
+ "digdir.font-weight.medium": "e0ba0f14f562bd47bbbc2762b0276952bff6dc0e",
1039
+ "digdir.font-weight.regular": "428c6974bf9dfefd2b6aa6773cabb22759aa5536",
1040
+ "digdir.font-family": "856b5d6abbcf6bc06b02838682edab2667c12783",
1041
+ "altinn.font-family": "7efa525773ed529cfeb44e208412f02539868535",
1042
+ "uutilsynet.font-family": "5e762a7b0a24e3281508b05856e24794ff01d084",
1043
+ "portal.font-family": "b1f98b1619271bd779e64a70e601ed407a2d6b3f"
1044
1044
  },
1045
1045
  "group": "Typography"
1046
1046
  },
@@ -1134,7 +1134,6 @@
1134
1134
  "color.brand3.14": "4800bfc73d2fb46383e7d16ab5531e8a9419e9ec",
1135
1135
  "color.brand3.15": "6bcf7be039ae7e1fae1bd2bd37c850e43273477d",
1136
1136
  "color.brand3.16": "0cfbc6301ffe1e7bcc7cfb9dbc39765ccceaeb94",
1137
- "font.family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0",
1138
1137
  "font-weight.medium": "d48aac48a9fecf0dbe2e5c7b68427961007eac36",
1139
1138
  "font-weight.semibold": "d684180ad99ad0b200080b18529a25476554343f",
1140
1139
  "font-weight.regular": "82250a86efe7517071ff39e79b2579c5b57a6083",
@@ -1145,7 +1144,8 @@
1145
1144
  "border-radius.5": "c1d38a59c2eb078642aafd112e1a23cc3107e2b1",
1146
1145
  "border-radius.6": "ec8f63c551a3feed56576a1030e284ea0efe7ed9",
1147
1146
  "border-radius.base": "80b5d08a35a320b9bd2d4ecdbe2ccf0086315b88",
1148
- "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77"
1147
+ "border-radius.scale": "692a8c1f2038457a196ba0e077cdc70c6bad5e77",
1148
+ "font-family": "32f399ee0e608727f1c4d02e8ceb892a6c3e79e0"
1149
1149
  },
1150
1150
  "group": "Theme"
1151
1151
  },
@@ -1347,7 +1347,6 @@
1347
1347
  "color.warning.base-contrast-default": "3d38f3079fb9fd155567ec24c7fde25f68c40f42",
1348
1348
  "color.focus.inner": "1ec8f76f658042889b1eb4b08f3ce9bca1b7e603",
1349
1349
  "color.focus.outer": "09e04f0bfff8fdc309db58a0131b5d07dae6b4f8",
1350
- "disabled.opacity": "d94940d06b80e1cb6184ae12c5793a1ef95420ba",
1351
1350
  "border-width.default": "ac5b6181d17de3d25249c91674dce4fef8711216",
1352
1351
  "border-width.highlight": "dd40bb1cb729138762c0bfa29d26adb58b726354",
1353
1352
  "border-radius.sm": "7b2af5d22e01253d20184bf5c3f872a18d41a315",
@@ -1375,7 +1374,8 @@
1375
1374
  "size.18": "803716e7a1ab4f0ed08180713a5ddc53f5a80a13",
1376
1375
  "size.22": "f0e62cce260051ffae97ed9709e77fb22e2dac2e",
1377
1376
  "size.26": "a42e9a42d13ce2453de8005b58147b9a9b9b5dde",
1378
- "size.30": "600d545445deae2077866ba3953a64000a123606"
1377
+ "size.30": "600d545445deae2077866ba3953a64000a123606",
1378
+ "opacity.disabled": "d94940d06b80e1cb6184ae12c5793a1ef95420ba"
1379
1379
  },
1380
1380
  "group": "Semantic"
1381
1381
  },
@@ -274,5 +274,13 @@
274
274
  "$value": "{color.neutral.text-default}"
275
275
  }
276
276
  }
277
+ },
278
+ "link": {
279
+ "color": {
280
+ "visited": {
281
+ "$type": "color",
282
+ "$value": "{global.purple.12}"
283
+ }
284
+ }
277
285
  }
278
286
  }
@@ -1,23 +1,21 @@
1
1
  {
2
2
  "color": {},
3
- "font": {
4
- "family": {
5
- "$type": "fontFamilies",
6
- "$value": "{<theme>.main}"
7
- }
3
+ "font-family": {
4
+ "$type": "fontFamilies",
5
+ "$value": "{<theme>.font-family}"
8
6
  },
9
7
  "font-weight": {
10
8
  "medium": {
11
9
  "$type": "fontWeights",
12
- "$value": "{<theme>.bold}"
10
+ "$value": "{<theme>.font-weight.medium}"
13
11
  },
14
12
  "semibold": {
15
13
  "$type": "fontWeights",
16
- "$value": "{<theme>.extra-bold}"
14
+ "$value": "{<theme>.font-weight.semibold}"
17
15
  },
18
16
  "regular": {
19
17
  "$type": "fontWeights",
20
- "$value": "{<theme>.regular}"
18
+ "$value": "{<theme>.font-weight.regular}"
21
19
  }
22
20
  },
23
21
  "border-radius": {
@@ -1 +1 @@
1
- {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAwG3B,CAAC"}
1
+ {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAyG3B,CAAC"}
@@ -28,6 +28,7 @@ const updateTemplates = async () => {
28
28
  JSON.stringify(categoryColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
29
29
  );
30
30
  const colorBaseFile = {
31
+ ...originalColorJson,
31
32
  color: R.omit(["accent", "neutral", "brand1", "brand2", "brand3"], originalColorJson.color)
32
33
  };
33
34
  await fs.writeFile(
@@ -3,10 +3,9 @@ export type Token = {
3
3
  $value: string;
4
4
  $type: string;
5
5
  };
6
- export type Tokens1ary = Record<string, Token>;
7
- export type Tokens2ary = Record<string, Tokens1ary>;
8
- export type Tokens3ary = Record<string, Record<string, Tokens1ary>>;
9
- export type TokensSet = Tokens1ary | Tokens2ary | Tokens3ary;
6
+ export type TokensSet = {
7
+ [key: string]: Token | TokensSet;
8
+ };
10
9
  export type ColorModeTokens = {
11
10
  global: TokensSet;
12
11
  [key: string]: TokensSet;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAGF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAGzC,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE;QACN,KAAK,EAAE,eAAe,CAAC;QACvB,IAAI,EAAE,eAAe,CAAC;QACtB,QAAQ,CAAC,EAAE,eAAe,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,SAAS,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAGF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAGzC,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE;QACN,KAAK,EAAE,eAAe,CAAC;QACvB,IAAI,EAAE,eAAe,CAAC;QACtB,QAAQ,CAAC,EAAE,eAAe,CAAC;KAC5B,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,SAAS,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../src/tokens/write.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAoB,KAAK,EAAE,MAAM,EAA8B,MAAM,YAAY,CAAC;AAS9F,eAAO,MAAM,SAAS,SAAU,OAAO,WAAkC,CAAC;AAyB1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,YAAmB,kBAAkB,kBA4K5D,CAAC"}
1
+ {"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../src/tokens/write.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAoB,KAAK,EAAE,MAAM,EAA8B,MAAM,YAAY,CAAC;AAS9F,eAAO,MAAM,SAAS,SAAU,OAAO,WAAkC,CAAC;AAyB1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,YAAmB,kBAAkB,kBA6K5D,CAAC"}
@@ -98,6 +98,7 @@ const writeTokens = async (options) => {
98
98
  ]
99
99
  );
100
100
  const semanticColors = {
101
+ ...semanticColorBaseFile,
101
102
  color: {
102
103
  ...Object.fromEntries(semanticColorTokens),
103
104
  ...semanticColorBaseFile.color
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet",
3
- "version": "1.0.0-next.51",
3
+ "version": "1.0.0",
4
4
  "description": "CLI for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "engines": {