@norges-domstoler/dds-design-tokens 0.0.6 → 0.0.8

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 (37) hide show
  1. package/README.md +1 -1
  2. package/dist/css/border.css +27 -27
  3. package/dist/css/borderRadius.css +22 -22
  4. package/dist/css/colors.css +73 -73
  5. package/dist/css/ddsTokens.css +483 -472
  6. package/dist/css/font.css +326 -315
  7. package/dist/css/grid.css +32 -32
  8. package/dist/css/iconSize.css +10 -10
  9. package/dist/css/innershadow.css +11 -11
  10. package/dist/css/outershadow.css +15 -15
  11. package/dist/css/spacing.css +55 -23
  12. package/dist/dds/build/js/border.d.ts +1 -1
  13. package/dist/dds/build/js/borderRadius.d.ts +1 -1
  14. package/dist/dds/build/js/colors.d.ts +1 -1
  15. package/dist/dds/build/js/ddsTokens.d.ts +36 -22
  16. package/dist/dds/build/js/font.d.ts +36 -22
  17. package/dist/dds/build/js/fontObject.d.ts +205 -1
  18. package/dist/dds/build/js/grid.d.ts +1 -1
  19. package/dist/dds/build/js/iconSize.d.ts +1 -1
  20. package/dist/dds/build/js/innershadow.d.ts +1 -1
  21. package/dist/dds/build/js/outershadow.d.ts +1 -1
  22. package/dist/dds/build/js/spacing.d.ts +65 -1
  23. package/dist/dds/formattedStyles/fontPackages/fontPackages.d.ts +19 -0
  24. package/dist/index.es.js +482 -61
  25. package/dist/index.es.js.map +1 -1
  26. package/dist/index.js +482 -61
  27. package/dist/scss/_border.scss +23 -23
  28. package/dist/scss/_borderRadius.scss +18 -18
  29. package/dist/scss/_colors.scss +69 -69
  30. package/dist/scss/_ddsTokens.scss +479 -468
  31. package/dist/scss/_font.scss +323 -312
  32. package/dist/scss/_iconSize.scss +6 -6
  33. package/dist/scss/_innershadow.scss +7 -7
  34. package/dist/scss/_outershadow.scss +11 -11
  35. package/dist/scss/_spacing.scss +52 -20
  36. package/dist/src/ddsBaseTokens.d.ts +19 -0
  37. package/package.json +4 -2
package/README.md CHANGED
@@ -93,4 +93,4 @@ Genererte variabler ligger i `/dds/build` organisert etter plattform.
93
93
 
94
94
  ### Build
95
95
 
96
- Det brukes custom build for generering av variabler, den ligger i `/dds/build.js`. I tillegg spesifiserer `/dds/config.json` hva output skal være og mappestruktur for den etter `npm run build` kjøres.
96
+ Det brukes custom build for generering av variabler, den ligger i `/dds/build.js`. I tillegg spesifiserer `/dds/config.json` hva output skal være og mappestruktur for den etter `npm run build-tokens` kjøres.
@@ -1,27 +1,27 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
4
- */
5
-
6
- :root {
7
- --borders-dds-border-focus-base-stroke-align: inside;
8
- --borders-dds-border-focus-base-stroke-miter-limit: 4;
9
- --borders-dds-border-focus-base-stroke-weight: 1px;
10
- --borders-dds-border-focus-base-stroke: rgba(98, 90, 31, 1);
11
- --borders-dds-border-focus-inputfield-stroke-align: inside;
12
- --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
13
- --borders-dds-border-focus-inputfield-stroke-weight: 2px;
14
- --borders-dds-border-focus-inputfield-stroke: rgba(46, 120, 170, 1);
15
- --borders-dds-border-focus-card-stroke-align: outside;
16
- --borders-dds-border-focus-card-stroke-miter-limit: 4;
17
- --borders-dds-border-focus-card-stroke-weight: 2px;
18
- --borders-dds-border-focus-card-stroke: rgba(98, 90, 31, 1);
19
- --borders-dds-border-style-light-stroke-align: inside;
20
- --borders-dds-border-style-light-stroke-miter-limit: 4;
21
- --borders-dds-border-style-light-stroke-weight: 1px;
22
- --borders-dds-border-style-light-stroke: rgba(172, 187, 198, 1);
23
- --borders-dds-border-style-dark-stroke-align: inside;
24
- --borders-dds-border-style-dark-stroke-miter-limit: 4;
25
- --borders-dds-border-style-dark-stroke-weight: 1px;
26
- --borders-dds-border-style-dark-stroke: rgba(53, 71, 84, 1);
27
- }
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 14 Mar 2022 12:29:21 GMT
4
+ */
5
+
6
+ :root {
7
+ --borders-dds-border-focus-base-stroke-align: inside;
8
+ --borders-dds-border-focus-base-stroke-miter-limit: 4;
9
+ --borders-dds-border-focus-base-stroke-weight: 1px;
10
+ --borders-dds-border-focus-base-stroke: rgba(98, 90, 31, 1);
11
+ --borders-dds-border-focus-inputfield-stroke-align: inside;
12
+ --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
13
+ --borders-dds-border-focus-inputfield-stroke-weight: 2px;
14
+ --borders-dds-border-focus-inputfield-stroke: rgba(46, 120, 170, 1);
15
+ --borders-dds-border-focus-card-stroke-align: outside;
16
+ --borders-dds-border-focus-card-stroke-miter-limit: 4;
17
+ --borders-dds-border-focus-card-stroke-weight: 2px;
18
+ --borders-dds-border-focus-card-stroke: rgba(98, 90, 31, 1);
19
+ --borders-dds-border-style-light-stroke-align: inside;
20
+ --borders-dds-border-style-light-stroke-miter-limit: 4;
21
+ --borders-dds-border-style-light-stroke-weight: 1px;
22
+ --borders-dds-border-style-light-stroke: rgba(172, 187, 198, 1);
23
+ --borders-dds-border-style-dark-stroke-align: inside;
24
+ --borders-dds-border-style-dark-stroke-miter-limit: 4;
25
+ --borders-dds-border-style-dark-stroke-weight: 1px;
26
+ --borders-dds-border-style-dark-stroke: rgba(53, 71, 84, 1);
27
+ }
@@ -1,22 +1,22 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
4
- */
5
-
6
- :root {
7
- --radii-dds-border-radius-1-radius: 2px;
8
- --radii-dds-border-radius-1-radii-top-left: 2px;
9
- --radii-dds-border-radius-1-radii-top-right: 2px;
10
- --radii-dds-border-radius-1-radii-bottom-right: 2px;
11
- --radii-dds-border-radius-1-radii-bottom-left: 2px;
12
- --radii-dds-border-radius-2-radius: 4px;
13
- --radii-dds-border-radius-2-radii-top-left: 4px;
14
- --radii-dds-border-radius-2-radii-top-right: 4px;
15
- --radii-dds-border-radius-2-radii-bottom-right: 4px;
16
- --radii-dds-border-radius-2-radii-bottom-left: 4px;
17
- --radii-dds-border-radius-3-radius: 8px;
18
- --radii-dds-border-radius-3-radii-top-left: 8px;
19
- --radii-dds-border-radius-3-radii-top-right: 8px;
20
- --radii-dds-border-radius-3-radii-bottom-right: 8px;
21
- --radii-dds-border-radius-3-radii-bottom-left: 8px;
22
- }
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 14 Mar 2022 12:29:21 GMT
4
+ */
5
+
6
+ :root {
7
+ --radii-dds-border-radius-1-radius: 2px;
8
+ --radii-dds-border-radius-1-radii-top-left: 2px;
9
+ --radii-dds-border-radius-1-radii-top-right: 2px;
10
+ --radii-dds-border-radius-1-radii-bottom-right: 2px;
11
+ --radii-dds-border-radius-1-radii-bottom-left: 2px;
12
+ --radii-dds-border-radius-2-radius: 4px;
13
+ --radii-dds-border-radius-2-radii-top-left: 4px;
14
+ --radii-dds-border-radius-2-radii-top-right: 4px;
15
+ --radii-dds-border-radius-2-radii-bottom-right: 4px;
16
+ --radii-dds-border-radius-2-radii-bottom-left: 4px;
17
+ --radii-dds-border-radius-3-radius: 8px;
18
+ --radii-dds-border-radius-3-radii-top-left: 8px;
19
+ --radii-dds-border-radius-3-radii-top-right: 8px;
20
+ --radii-dds-border-radius-3-radii-bottom-right: 8px;
21
+ --radii-dds-border-radius-3-radii-bottom-left: 8px;
22
+ }
@@ -1,73 +1,73 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
4
- */
5
-
6
- :root {
7
- --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
- --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
- --dds-color-primary-light: rgba(79, 106, 126, 1);
10
- --dds-color-primary-base: rgba(53, 71, 84, 1); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
11
- --dds-color-primary-dark: rgba(49, 61, 69, 1);
12
- --dds-color-primary-darker: rgba(32, 43, 50, 1);
13
- --dds-color-primary-darkest: rgba(21, 28, 34, 1);
14
- --dds-color-neutrals-white: rgba(255, 255, 255, 1);
15
- --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
16
- --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
17
- --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
18
- --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
19
- --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
20
- --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
21
- --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
22
- --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
23
- --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
24
- --dds-color-interactive-lightest: rgba(234, 242, 247, 1);
25
- --dds-color-interactive-lighter: rgba(171, 201, 221, 1);
26
- --dds-color-interactive-light: rgba(109, 161, 196, 1);
27
- --dds-color-interactive-base: rgba(46, 120, 170, 1); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
28
- --dds-color-interactive-dark: rgba(37, 96, 136, 1);
29
- --dds-color-interactive-darker: rgba(28, 72, 102, 1);
30
- --dds-color-interactive-darkest: rgba(18, 48, 68, 1);
31
- --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
32
- --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
33
- --dds-color-secondary-light: rgba(184, 205, 205, 1);
34
- --dds-color-secondary-base: rgba(154, 184, 183, 1); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
35
- --dds-color-secondary-dark: rgba(123, 147, 146, 1);
36
- --dds-color-secondary-darker: rgba(77, 100, 99, 1);
37
- --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
38
- --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
39
- --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
40
- --dds-color-tertiary-light: rgba(246, 193, 177, 1);
41
- --dds-color-tertiary-base: rgba(242, 166, 143, 1); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
42
- --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
43
- --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
44
- --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
45
- --dds-color-success-lightest: rgba(240, 249, 240, 1);
46
- --dds-color-success-lighter: rgba(193, 229, 194, 1);
47
- --dds-color-success-light: rgba(147, 210, 148, 1);
48
- --dds-color-success-base: rgba(101, 190, 102, 1); /* Brukes for å kommunisere suksess eller noe som er riktig. */
49
- --dds-color-success-dark: rgba(81, 152, 82, 1);
50
- --dds-color-success-darker: rgba(61, 114, 61, 1);
51
- --dds-color-success-darkest: rgba(40, 76, 41, 1);
52
- --dds-color-danger-lightest: rgba(251, 235, 235, 1);
53
- --dds-color-danger-lighter: rgba(239, 175, 175, 1);
54
- --dds-color-danger-light: rgba(228, 115, 115, 1);
55
- --dds-color-danger-base: rgba(216, 55, 55, 1); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
56
- --dds-color-danger-dark: rgba(173, 44, 44, 1);
57
- --dds-color-danger-darker: rgba(130, 33, 33, 1);
58
- --dds-color-danger-darkest: rgba(86, 22, 22, 1);
59
- --dds-color-warning-lightest: rgba(254, 252, 237, 1);
60
- --dds-color-warning-lighter: rgba(251, 243, 184, 1);
61
- --dds-color-warning-light: rgba(247, 233, 130, 1);
62
- --dds-color-warning-base: rgba(244, 224, 77, 1); /* Brukes for å kommunisere varsler. */
63
- --dds-color-warning-dark: rgba(195, 179, 62, 1);
64
- --dds-color-warning-darker: rgba(146, 134, 46, 1);
65
- --dds-color-warning-darkest: rgba(98, 90, 31, 1);
66
- --dds-color-info-lightest: rgba(241, 248, 253, 1);
67
- --dds-color-info-lighter: rgba(200, 227, 245, 1);
68
- --dds-color-info-light: rgba(158, 206, 238, 1);
69
- --dds-color-info-base: rgba(117, 185, 230, 1);
70
- --dds-color-info-dark: rgba(94, 148, 184, 1);
71
- --dds-color-info-darker: rgba(70, 111, 138, 1);
72
- --dds-color-info-darkest: rgba(47, 74, 92, 1);
73
- }
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 14 Mar 2022 12:29:21 GMT
4
+ */
5
+
6
+ :root {
7
+ --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
+ --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
+ --dds-color-primary-light: rgba(79, 106, 126, 1);
10
+ --dds-color-primary-base: rgba(53, 71, 84, 1); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
11
+ --dds-color-primary-dark: rgba(49, 61, 69, 1);
12
+ --dds-color-primary-darker: rgba(32, 43, 50, 1);
13
+ --dds-color-primary-darkest: rgba(21, 28, 34, 1);
14
+ --dds-color-neutrals-white: rgba(255, 255, 255, 1);
15
+ --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
16
+ --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
17
+ --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
18
+ --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
19
+ --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
20
+ --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
21
+ --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
22
+ --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
23
+ --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
24
+ --dds-color-interactive-lightest: rgba(234, 242, 247, 1);
25
+ --dds-color-interactive-lighter: rgba(171, 201, 221, 1);
26
+ --dds-color-interactive-light: rgba(109, 161, 196, 1);
27
+ --dds-color-interactive-base: rgba(46, 120, 170, 1); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
28
+ --dds-color-interactive-dark: rgba(37, 96, 136, 1);
29
+ --dds-color-interactive-darker: rgba(28, 72, 102, 1);
30
+ --dds-color-interactive-darkest: rgba(18, 48, 68, 1);
31
+ --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
32
+ --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
33
+ --dds-color-secondary-light: rgba(184, 205, 205, 1);
34
+ --dds-color-secondary-base: rgba(154, 184, 183, 1); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
35
+ --dds-color-secondary-dark: rgba(123, 147, 146, 1);
36
+ --dds-color-secondary-darker: rgba(77, 100, 99, 1);
37
+ --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
38
+ --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
39
+ --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
40
+ --dds-color-tertiary-light: rgba(246, 193, 177, 1);
41
+ --dds-color-tertiary-base: rgba(242, 166, 143, 1); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
42
+ --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
43
+ --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
44
+ --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
45
+ --dds-color-success-lightest: rgba(240, 249, 240, 1);
46
+ --dds-color-success-lighter: rgba(193, 229, 194, 1);
47
+ --dds-color-success-light: rgba(147, 210, 148, 1);
48
+ --dds-color-success-base: rgba(101, 190, 102, 1); /* Brukes for å kommunisere suksess eller noe som er riktig. */
49
+ --dds-color-success-dark: rgba(81, 152, 82, 1);
50
+ --dds-color-success-darker: rgba(61, 114, 61, 1);
51
+ --dds-color-success-darkest: rgba(40, 76, 41, 1);
52
+ --dds-color-danger-lightest: rgba(251, 235, 235, 1);
53
+ --dds-color-danger-lighter: rgba(239, 175, 175, 1);
54
+ --dds-color-danger-light: rgba(228, 115, 115, 1);
55
+ --dds-color-danger-base: rgba(216, 55, 55, 1); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
56
+ --dds-color-danger-dark: rgba(173, 44, 44, 1);
57
+ --dds-color-danger-darker: rgba(130, 33, 33, 1);
58
+ --dds-color-danger-darkest: rgba(86, 22, 22, 1);
59
+ --dds-color-warning-lightest: rgba(254, 252, 237, 1);
60
+ --dds-color-warning-lighter: rgba(251, 243, 184, 1);
61
+ --dds-color-warning-light: rgba(247, 233, 130, 1);
62
+ --dds-color-warning-base: rgba(244, 224, 77, 1); /* Brukes for å kommunisere varsler. */
63
+ --dds-color-warning-dark: rgba(195, 179, 62, 1);
64
+ --dds-color-warning-darker: rgba(146, 134, 46, 1);
65
+ --dds-color-warning-darkest: rgba(98, 90, 31, 1);
66
+ --dds-color-info-lightest: rgba(241, 248, 253, 1);
67
+ --dds-color-info-lighter: rgba(200, 227, 245, 1);
68
+ --dds-color-info-light: rgba(158, 206, 238, 1);
69
+ --dds-color-info-base: rgba(117, 185, 230, 1);
70
+ --dds-color-info-dark: rgba(94, 148, 184, 1);
71
+ --dds-color-info-darker: rgba(70, 111, 138, 1);
72
+ --dds-color-info-darkest: rgba(47, 74, 92, 1);
73
+ }