@digdir/designsystemet 1.11.1 → 1.12.1

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 (100) hide show
  1. package/dist/bin/config.js +24 -4
  2. package/dist/bin/designsystemet.js +909 -1220
  3. package/dist/src/colors/index.js +27 -1
  4. package/dist/src/colors/types.d.ts +24 -21
  5. package/dist/src/colors/types.d.ts.map +1 -1
  6. package/dist/src/colors/types.js +27 -0
  7. package/dist/src/config.js +24 -4
  8. package/dist/src/index.js +815 -1119
  9. package/dist/src/scripts/createJsonSchema.js +24 -4
  10. package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -1
  11. package/dist/src/scripts/update-preview-tokens.js +1356 -1662
  12. package/dist/src/tokens/build.js +4 -5
  13. package/dist/src/tokens/create/generators/$designsystemet.js +4 -5
  14. package/dist/src/tokens/create/generators/$metadata.d.ts +2 -2
  15. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -1
  16. package/dist/src/tokens/create/generators/$metadata.js +3 -7
  17. package/dist/src/tokens/create/generators/$themes.d.ts +17 -2
  18. package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -1
  19. package/dist/src/tokens/create/generators/$themes.js +3 -3
  20. package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts +5 -0
  21. package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts.map +1 -0
  22. package/dist/src/tokens/create/generators/{color.js → primitives/color-scheme.js} +29 -6
  23. package/dist/src/tokens/create/generators/primitives/globals.d.ts +3 -0
  24. package/dist/src/tokens/create/generators/primitives/globals.d.ts.map +1 -0
  25. package/dist/src/tokens/create/generators/primitives/globals.js +148 -0
  26. package/dist/src/tokens/create/generators/primitives/size.d.ts +4 -0
  27. package/dist/src/tokens/create/generators/primitives/size.d.ts.map +1 -0
  28. package/dist/src/tokens/create/generators/primitives/size.js +157 -0
  29. package/dist/src/tokens/create/generators/primitives/typography.d.ts +4 -0
  30. package/dist/src/tokens/create/generators/primitives/typography.d.ts.map +1 -0
  31. package/dist/src/tokens/create/generators/primitives/typography.js +220 -0
  32. package/dist/src/tokens/create/generators/semantic/color-modes.d.ts +8 -0
  33. package/dist/src/tokens/create/generators/semantic/color-modes.d.ts.map +1 -0
  34. package/dist/src/tokens/create/generators/semantic/color-modes.js +61 -0
  35. package/dist/src/tokens/create/generators/semantic/color.d.ts +5 -0
  36. package/dist/src/tokens/create/generators/semantic/color.d.ts.map +1 -0
  37. package/dist/src/tokens/create/generators/{semantic.js → semantic/color.js} +50 -194
  38. package/dist/src/tokens/create/generators/semantic/style.d.ts +3 -0
  39. package/dist/src/tokens/create/generators/semantic/style.d.ts.map +1 -0
  40. package/dist/src/tokens/create/generators/semantic/style.js +384 -0
  41. package/dist/src/tokens/create/generators/{theme.d.ts → themes/theme.d.ts} +1 -1
  42. package/dist/src/tokens/create/generators/themes/theme.d.ts.map +1 -0
  43. package/dist/src/tokens/create/generators/{theme.js → themes/theme.js} +87 -129
  44. package/dist/src/tokens/create/write.d.ts.map +1 -1
  45. package/dist/src/tokens/create/write.js +13 -17
  46. package/dist/src/tokens/create.d.ts +1 -1
  47. package/dist/src/tokens/create.d.ts.map +1 -1
  48. package/dist/src/tokens/create.js +1340 -1647
  49. package/dist/src/tokens/format.d.ts.map +1 -1
  50. package/dist/src/tokens/format.js +1360 -1667
  51. package/dist/src/tokens/index.js +1360 -1667
  52. package/dist/src/tokens/process/output/declarations.js +4 -5
  53. package/dist/src/tokens/process/output/theme.js +4 -5
  54. package/dist/src/tokens/types.d.ts +7 -0
  55. package/dist/src/tokens/types.d.ts.map +1 -1
  56. package/package.json +5 -6
  57. package/dist/color.base.template-Z7YWN2TF.json +0 -22
  58. package/dist/color.template-LMPUQ72A.json +0 -66
  59. package/dist/color.template-XQNSHLTU.json +0 -66
  60. package/dist/global-Y35YADVH.json +0 -100
  61. package/dist/globals-76VAFMDF.json +0 -143
  62. package/dist/large-CIIHO7AY.json +0 -96
  63. package/dist/large-UUOZ6DYI.json +0 -16
  64. package/dist/medium-OQ7S7P4P.json +0 -16
  65. package/dist/medium-VSB2S4X3.json +0 -96
  66. package/dist/small-AEXJ6U7Z.json +0 -96
  67. package/dist/small-ZY4KOJWX.json +0 -16
  68. package/dist/src/scripts/update-template.d.ts +0 -2
  69. package/dist/src/scripts/update-template.d.ts.map +0 -1
  70. package/dist/src/scripts/update-template.js +0 -1366
  71. package/dist/src/tokens/create/defaults.d.ts +0 -7
  72. package/dist/src/tokens/create/defaults.d.ts.map +0 -1
  73. package/dist/src/tokens/create/defaults.js +0 -998
  74. package/dist/src/tokens/create/generators/color.d.ts +0 -5
  75. package/dist/src/tokens/create/generators/color.d.ts.map +0 -1
  76. package/dist/src/tokens/create/generators/semantic.d.ts +0 -32
  77. package/dist/src/tokens/create/generators/semantic.d.ts.map +0 -1
  78. package/dist/src/tokens/create/generators/theme.d.ts.map +0 -1
  79. package/dist/src/tokens/create/generators/typography.d.ts +0 -3
  80. package/dist/src/tokens/create/generators/typography.d.ts.map +0 -1
  81. package/dist/src/tokens/create/generators/typography.js +0 -33
  82. package/dist/src/tokens/template/design-tokens/primitives/globals.js +0 -5
  83. package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +0 -5
  84. package/dist/src/tokens/template/design-tokens/primitives/modes/size/large.js +0 -5
  85. package/dist/src/tokens/template/design-tokens/primitives/modes/size/medium.js +0 -5
  86. package/dist/src/tokens/template/design-tokens/primitives/modes/size/small.js +0 -5
  87. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/large.js +0 -5
  88. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.js +0 -5
  89. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/small.js +0 -5
  90. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.js +0 -5
  91. package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +0 -5
  92. package/dist/src/tokens/template/design-tokens/semantic/color.template.js +0 -5
  93. package/dist/src/tokens/template/design-tokens/semantic/modes/color.template.js +0 -5
  94. package/dist/src/tokens/template/design-tokens/semantic/style.js +0 -5
  95. package/dist/src/tokens/template/design-tokens/themes/theme.base.template.js +0 -5
  96. package/dist/src/tokens/template/design-tokens/themes/theme.template.js +0 -5
  97. package/dist/style-FP5XVCUD.json +0 -378
  98. package/dist/theme.base.template-Y4RMFBQY.json +0 -55
  99. package/dist/theme.template-CTQRNOMO.json +0 -66
  100. package/dist/typography.template-4N5YLH7F.json +0 -22
@@ -464,6 +464,29 @@ var generateColorContrast = (color, type) => {
464
464
  var getCssVariable = (colorType, colorNumber) => {
465
465
  return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
466
466
  };
467
+
468
+ // src/colors/types.ts
469
+ import * as R3 from "ramda";
470
+ var semanticColorMap = {
471
+ "background-default": 1,
472
+ "background-tinted": 2,
473
+ "surface-default": 3,
474
+ "surface-tinted": 4,
475
+ "surface-hover": 5,
476
+ "surface-active": 6,
477
+ "border-subtle": 7,
478
+ "border-default": 8,
479
+ "border-strong": 9,
480
+ "text-subtle": 10,
481
+ "text-default": 11,
482
+ "base-default": 12,
483
+ "base-hover": 13,
484
+ "base-active": 14,
485
+ "base-contrast-subtle": 15,
486
+ "base-contrast-default": 16
487
+ };
488
+ var semanticColorNames = R3.keys(semanticColorMap);
489
+ var semanticColorNumbers = R3.values(semanticColorMap);
467
490
  export {
468
491
  HSLToHex,
469
492
  RESERVED_COLORS,
@@ -492,5 +515,8 @@ export {
492
515
  hexToRgb,
493
516
  hslArrToCss,
494
517
  isHexColor,
495
- rgbToHex
518
+ rgbToHex,
519
+ semanticColorMap,
520
+ semanticColorNames,
521
+ semanticColorNumbers
496
522
  };
@@ -1,31 +1,34 @@
1
1
  export type ColorScheme = 'light' | 'dark' | 'contrast';
2
2
  export type ContrastMode = 'aa' | 'aaa';
3
- export type ColorNumber = SemanticColorNumberMap[keyof SemanticColorNumberMap];
4
- export type ColorNames = keyof SemanticColorNumberMap;
3
+ export type ColorNumber = SemanticColorMap[keyof SemanticColorMap];
4
+ export type ColorNames = keyof SemanticColorMap;
5
5
  export type GlobalColors = 'danger' | 'info' | 'success' | 'warning';
6
6
  export type ColorError = 'none' | 'decorative' | 'interaction';
7
- type SemanticColorNumberMap = {
8
- 'background-default': 1;
9
- 'background-tinted': 2;
10
- 'surface-default': 3;
11
- 'surface-tinted': 4;
12
- 'surface-hover': 5;
13
- 'surface-active': 6;
14
- 'border-subtle': 7;
15
- 'border-default': 8;
16
- 'border-strong': 9;
17
- 'text-subtle': 10;
18
- 'text-default': 11;
19
- 'base-default': 12;
20
- 'base-hover': 13;
21
- 'base-active': 14;
22
- 'base-contrast-subtle': 15;
23
- 'base-contrast-default': 16;
7
+ export declare const semanticColorMap: {
8
+ readonly 'background-default': 1;
9
+ readonly 'background-tinted': 2;
10
+ readonly 'surface-default': 3;
11
+ readonly 'surface-tinted': 4;
12
+ readonly 'surface-hover': 5;
13
+ readonly 'surface-active': 6;
14
+ readonly 'border-subtle': 7;
15
+ readonly 'border-default': 8;
16
+ readonly 'border-strong': 9;
17
+ readonly 'text-subtle': 10;
18
+ readonly 'text-default': 11;
19
+ readonly 'base-default': 12;
20
+ readonly 'base-hover': 13;
21
+ readonly 'base-active': 14;
22
+ readonly 'base-contrast-subtle': 15;
23
+ readonly 'base-contrast-default': 16;
24
24
  };
25
+ export declare const semanticColorNames: ("background-default" | "background-tinted" | "surface-default" | "surface-tinted" | "surface-hover" | "surface-active" | "border-subtle" | "border-default" | "border-strong" | "text-subtle" | "text-default" | "base-default" | "base-hover" | "base-active" | "base-contrast-subtle" | "base-contrast-default")[];
26
+ export declare const semanticColorNumbers: (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16)[];
27
+ type SemanticColorMap = typeof semanticColorMap;
25
28
  type SemanticColorMapping = {
26
- [K in keyof SemanticColorNumberMap]: {
29
+ [K in keyof SemanticColorMap]: {
27
30
  name: K;
28
- number: SemanticColorNumberMap[K];
31
+ number: SemanticColorMap[K];
29
32
  };
30
33
  };
31
34
  export type ColorMetadataByName = {
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,sBAAsB,CAAC,MAAM,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,MAAM,sBAAsB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,sBAAsB,GAAG;IAC5B,oBAAoB,EAAE,CAAC,CAAC;IACxB,mBAAmB,EAAE,CAAC,CAAC;IACvB,iBAAiB,EAAE,CAAC,CAAC;IACrB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,aAAa,EAAE,EAAE,CAAC;IAClB,cAAc,EAAE,EAAE,CAAC;IACnB,cAAc,EAAE,EAAE,CAAC;IACnB,YAAY,EAAE,EAAE,CAAC;IACjB,aAAa,EAAE,EAAE,CAAC;IAClB,sBAAsB,EAAE,EAAE,CAAC;IAC3B,uBAAuB,EAAE,EAAE,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;KACzB,CAAC,IAAI,MAAM,sBAAsB,GAAG;QACnC,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;KACnC;CACF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,GAAG,aAAa;CAC3E,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,QAAQ,EAAE,KAAK,EAAE,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,gBAAgB,CAAC,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEX,eAAO,MAAM,kBAAkB,uTAA2B,CAAC;AAC3D,eAAO,MAAM,oBAAoB,0EAA6B,CAAC;AAE/D,KAAK,gBAAgB,GAAG,OAAO,gBAAgB,CAAC;AAEhD,KAAK,oBAAoB,GAAG;KACzB,CAAC,IAAI,MAAM,gBAAgB,GAAG;QAC7B,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC7B;CACF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,GAAG,aAAa;CAC3E,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,QAAQ,EAAE,KAAK,EAAE,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAC"}
@@ -0,0 +1,27 @@
1
+ // src/colors/types.ts
2
+ import * as R from "ramda";
3
+ var semanticColorMap = {
4
+ "background-default": 1,
5
+ "background-tinted": 2,
6
+ "surface-default": 3,
7
+ "surface-tinted": 4,
8
+ "surface-hover": 5,
9
+ "surface-active": 6,
10
+ "border-subtle": 7,
11
+ "border-default": 8,
12
+ "border-strong": 9,
13
+ "text-subtle": 10,
14
+ "text-default": 11,
15
+ "base-default": 12,
16
+ "base-hover": 13,
17
+ "base-active": 14,
18
+ "base-contrast-subtle": 15,
19
+ "base-contrast-default": 16
20
+ };
21
+ var semanticColorNames = R.keys(semanticColorMap);
22
+ var semanticColorNumbers = R.values(semanticColorMap);
23
+ export {
24
+ semanticColorMap,
25
+ semanticColorNames,
26
+ semanticColorNumbers
27
+ };
@@ -279,16 +279,36 @@ var convertToHex = (color) => {
279
279
  // src/colors/theme.ts
280
280
  var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
281
281
 
282
- // src/tokens/create/defaults.ts
282
+ // src/colors/types.ts
283
283
  import * as R3 from "ramda";
284
+ var semanticColorMap = {
285
+ "background-default": 1,
286
+ "background-tinted": 2,
287
+ "surface-default": 3,
288
+ "surface-tinted": 4,
289
+ "surface-hover": 5,
290
+ "surface-active": 6,
291
+ "border-subtle": 7,
292
+ "border-default": 8,
293
+ "border-strong": 9,
294
+ "text-subtle": 10,
295
+ "text-default": 11,
296
+ "base-default": 12,
297
+ "base-hover": 13,
298
+ "base-active": 14,
299
+ "base-contrast-subtle": 15,
300
+ "base-contrast-default": 16
301
+ };
302
+ var semanticColorNames = R3.keys(semanticColorMap);
303
+ var semanticColorNumbers = R3.values(semanticColorMap);
284
304
 
285
- // src/tokens/create/generators/color.ts
305
+ // src/tokens/create/generators/primitives/color-scheme.ts
286
306
  import * as R4 from "ramda";
287
307
 
288
- // src/tokens/create/generators/semantic.ts
308
+ // src/tokens/create/generators/semantic/color.ts
289
309
  import * as R5 from "ramda";
290
310
 
291
- // src/tokens/create/generators/theme.ts
311
+ // src/tokens/create/generators/themes/theme.ts
292
312
  import * as R6 from "ramda";
293
313
 
294
314
  // src/tokens/create.ts