@norges-domstoler/dds-design-tokens 2.0.0 → 3.0.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 (24) hide show
  1. package/dist/cjs/index.d.ts +2 -0
  2. package/dist/css/border.css +31 -31
  3. package/dist/css/borderRadius.css +22 -22
  4. package/dist/css/breakpoints.css +12 -12
  5. package/dist/css/colors.css +73 -73
  6. package/dist/css/ddsTokens.css +448 -448
  7. package/dist/css/font.css +282 -282
  8. package/dist/css/grid.css +32 -32
  9. package/dist/css/iconSize.css +10 -10
  10. package/dist/css/innershadow.css +11 -11
  11. package/dist/css/outershadow.css +15 -15
  12. package/dist/css/spacing.css +55 -55
  13. package/dist/index.d.ts +2 -0
  14. package/dist/scss/_border.scss +27 -27
  15. package/dist/scss/_borderRadius.scss +18 -18
  16. package/dist/scss/_breakpoints.scss +8 -8
  17. package/dist/scss/_colors.scss +69 -69
  18. package/dist/scss/_ddsTokens.scss +444 -444
  19. package/dist/scss/_font.scss +278 -278
  20. package/dist/scss/_iconSize.scss +6 -6
  21. package/dist/scss/_innershadow.scss +7 -7
  22. package/dist/scss/_outershadow.scss +11 -11
  23. package/dist/scss/_spacing.scss +51 -51
  24. package/package.json +5 -5
package/dist/cjs/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./src/ddsBaseTokens";
2
+ export * from "./src/ddsReferenceTokens";
package/dist/css/border.css CHANGED
@@ -1,31 +1,31 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Thu, 22 Sep 2022 09:11:12 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-ondark-stroke-align: inside;
12
- --borders-dds-border-focus-ondark-stroke-miter-limit: 4;
13
- --borders-dds-border-focus-ondark-stroke-weight: 1px;
14
- --borders-dds-border-focus-ondark-stroke: rgba(251, 243, 184, 1);
15
- --borders-dds-border-focus-inputfield-stroke-align: inside;
16
- --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
17
- --borders-dds-border-focus-inputfield-stroke-weight: 2px;
18
- --borders-dds-border-focus-inputfield-stroke: rgba(46, 120, 170, 1);
19
- --borders-dds-border-focus-card-stroke-align: outside;
20
- --borders-dds-border-focus-card-stroke-miter-limit: 4;
21
- --borders-dds-border-focus-card-stroke-weight: 2px;
22
- --borders-dds-border-focus-card-stroke: rgba(98, 90, 31, 1);
23
- --borders-dds-border-style-light-stroke-align: inside;
24
- --borders-dds-border-style-light-stroke-miter-limit: 4;
25
- --borders-dds-border-style-light-stroke-weight: 1px;
26
- --borders-dds-border-style-light-stroke: rgba(172, 187, 198, 1);
27
- --borders-dds-border-style-dark-stroke-align: inside;
28
- --borders-dds-border-style-dark-stroke-miter-limit: 4;
29
- --borders-dds-border-style-dark-stroke-weight: 1px;
30
- --borders-dds-border-style-dark-stroke: rgba(53, 71, 84, 1);
31
- }
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 22 Sep 2022 09:11:12 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-ondark-stroke-align: inside;
12
+ --borders-dds-border-focus-ondark-stroke-miter-limit: 4;
13
+ --borders-dds-border-focus-ondark-stroke-weight: 1px;
14
+ --borders-dds-border-focus-ondark-stroke: rgba(251, 243, 184, 1);
15
+ --borders-dds-border-focus-inputfield-stroke-align: inside;
16
+ --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
17
+ --borders-dds-border-focus-inputfield-stroke-weight: 2px;
18
+ --borders-dds-border-focus-inputfield-stroke: rgba(46, 120, 170, 1);
19
+ --borders-dds-border-focus-card-stroke-align: outside;
20
+ --borders-dds-border-focus-card-stroke-miter-limit: 4;
21
+ --borders-dds-border-focus-card-stroke-weight: 2px;
22
+ --borders-dds-border-focus-card-stroke: rgba(98, 90, 31, 1);
23
+ --borders-dds-border-style-light-stroke-align: inside;
24
+ --borders-dds-border-style-light-stroke-miter-limit: 4;
25
+ --borders-dds-border-style-light-stroke-weight: 1px;
26
+ --borders-dds-border-style-light-stroke: rgba(172, 187, 198, 1);
27
+ --borders-dds-border-style-dark-stroke-align: inside;
28
+ --borders-dds-border-style-dark-stroke-miter-limit: 4;
29
+ --borders-dds-border-style-dark-stroke-weight: 1px;
30
+ --borders-dds-border-style-dark-stroke: rgba(53, 71, 84, 1);
31
+ }
package/dist/css/borderRadius.css CHANGED
@@ -1,22 +1,22 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Thu, 22 Sep 2022 09:11:12 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 Thu, 22 Sep 2022 09:11:12 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
+ }
package/dist/css/breakpoints.css CHANGED
@@ -1,12 +1,12 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Thu, 22 Sep 2022 09:11:12 GMT
4
- */
5
-
6
- :root {
7
- --dds-breakpoint-xs: 1px;
8
- --dds-breakpoint-sm: 600px;
9
- --dds-breakpoint-md: 960px;
10
- --dds-breakpoint-lg: 1280px;
11
- --dds-breakpoint-xl: 1920px;
12
- }
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 22 Sep 2022 09:11:12 GMT
4
+ */
5
+
6
+ :root {
7
+ --dds-breakpoint-xs: 1px;
8
+ --dds-breakpoint-sm: 600px;
9
+ --dds-breakpoint-md: 960px;
10
+ --dds-breakpoint-lg: 1280px;
11
+ --dds-breakpoint-xl: 1920px;
12
+ }
package/dist/css/colors.css CHANGED
@@ -1,73 +1,73 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Thu, 22 Sep 2022 09:11:12 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 Thu, 22 Sep 2022 09:11:12 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
+ }