@norconsult-digital-public/isypixel 0.2.1 → 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 (11) hide show
  1. package/dist/css/styles.css +122 -100
  2. package/dist/css/typography-helpers.css +0 -2
  3. package/dist/css/typography.css +0 -2
  4. package/dist/esm/tokens/meta/tokens-meta.d.ts +174 -122
  5. package/dist/esm/tokens/meta/tokens-meta.js +189 -127
  6. package/dist/esm/tokens/semantic/color-semantic-variables.d.ts +197 -141
  7. package/dist/esm/tokens/semantic/color-semantic-variables.js +197 -141
  8. package/dist/scss/abstracts/_color-semantic-variables.scss +180 -146
  9. package/dist/scss/abstracts/_semantic-variables.scss +0 -4
  10. package/docs/tokens.md +195 -185
  11. package/package.json +2 -2
package/dist/esm/tokens/semantic/color-semantic-variables.d.ts CHANGED
@@ -5,58 +5,12 @@
5
5
  */
6
6
  export declare const colorSemanticVariables: {
7
7
  readonly color: {
8
- readonly text: {
9
- readonly darkTextOnLight: {
10
- readonly light: "rgb(16, 20, 23)";
11
- readonly dark: "rgb(254, 254, 254)";
12
- };
13
- readonly darkTextOnLightSecondary: {
14
- readonly light: "rgb(64, 78, 89)";
15
- readonly dark: "rgb(249, 249, 249)";
16
- };
17
- readonly lightTextOnDark: {
18
- readonly light: "rgb(254, 254, 254)";
19
- readonly dark: "rgb(16, 20, 23)";
20
- };
21
- readonly primaryBlack: {
22
- readonly light: "rgb(16, 20, 23)";
23
- readonly dark: "rgb(254, 254, 254)";
24
- };
25
- readonly primaryBlackInverse: {
26
- readonly light: "rgb(254, 254, 254)";
27
- readonly dark: "rgb(16, 20, 23)";
28
- };
29
- readonly secondary: {
30
- readonly light: "rgb(90, 97, 102)";
31
- readonly dark: "rgb(214, 214, 214)";
32
- };
33
- readonly secondaryInverse: {
34
- readonly light: "rgb(214, 214, 214)";
35
- readonly dark: "rgb(90, 97, 102)";
36
- };
37
- readonly primaryBlue: {
38
- readonly light: "rgb(61, 80, 102)";
39
- readonly dark: "rgb(205, 213, 220)";
40
- };
41
- readonly tertiary: {
42
- readonly light: "rgb(133, 138, 141)";
43
- readonly dark: "rgb(214, 214, 214)";
44
- };
45
- readonly quaternary: {
46
- readonly light: "rgb(95, 114, 135)";
47
- readonly dark: "rgb(214, 214, 214)";
48
- };
49
- readonly primaryBlueInverse: {
50
- readonly light: "rgb(205, 213, 220)";
51
- readonly dark: "rgb(61, 80, 102)";
52
- };
53
- };
54
8
  readonly brand: {
55
- readonly accentPrimary: {
9
+ readonly accentPrimaryDefault: {
56
10
  readonly light: "rgb(0, 163, 166)";
57
11
  readonly dark: "rgb(0, 163, 166)";
58
12
  };
59
- readonly accentSecondary: {
13
+ readonly accentSecondaryDefault: {
60
14
  readonly light: "rgb(120, 205, 206)";
61
15
  readonly dark: "rgb(120, 205, 206)";
62
16
  };
@@ -74,81 +28,117 @@ export declare const colorSemanticVariables: {
74
28
  };
75
29
  };
76
30
  readonly menu: {
77
- readonly mainMenuItem: {
78
- readonly backgroundPrimarySelectedDefault: {
79
- readonly light: "rgb(25, 31, 36)";
80
- readonly dark: "rgb(26, 33, 38)";
81
- };
82
- readonly backgroundPrimaryActive: {
83
- readonly light: "rgb(20, 26, 31)";
84
- readonly dark: "rgb(20, 26, 31)";
85
- };
86
- readonly backgroundPrimarySelectedActive: {
87
- readonly light: "rgb(20, 26, 31)";
88
- readonly dark: "rgb(20, 26, 31)";
89
- };
90
- readonly backgroundPrimaryHover: {
91
- readonly light: "rgb(45, 55, 63)";
92
- readonly dark: "rgb(33, 42, 49)";
93
- };
94
- readonly backgroundPrimarySelectedHover: {
95
- readonly light: "rgb(45, 55, 63)";
96
- readonly dark: "rgb(33, 42, 49)";
31
+ readonly main: {
32
+ readonly item: {
33
+ readonly backgroundPrimarySelectedDefault: {
34
+ readonly light: "rgb(25, 31, 36)";
35
+ readonly dark: "rgb(26, 33, 38)";
36
+ };
37
+ readonly backgroundPrimaryActive: {
38
+ readonly light: "rgb(20, 26, 31)";
39
+ readonly dark: "rgb(20, 26, 31)";
40
+ };
41
+ readonly backgroundPrimarySelectedActive: {
42
+ readonly light: "rgb(20, 26, 31)";
43
+ readonly dark: "rgb(20, 26, 31)";
44
+ };
45
+ readonly backgroundPrimaryHover: {
46
+ readonly light: "rgb(45, 55, 63)";
47
+ readonly dark: "rgb(33, 42, 49)";
48
+ };
49
+ readonly backgroundPrimarySelectedHover: {
50
+ readonly light: "rgb(45, 55, 63)";
51
+ readonly dark: "rgb(33, 42, 49)";
52
+ };
53
+ readonly backgroundPrimaryDefault: {
54
+ readonly light: "rgb(33, 42, 49)";
55
+ readonly dark: "rgb(20, 26, 31)";
56
+ };
57
+ readonly verticalDividerPrimaryDefault: {
58
+ readonly light: "rgb(0, 163, 166)";
59
+ readonly dark: "rgb(0, 163, 166)";
60
+ };
61
+ readonly verticalDividerSecondaryDefault: {
62
+ readonly light: "rgb(91, 111, 128)";
63
+ readonly dark: "rgb(91, 111, 128)";
64
+ };
97
65
  };
98
66
  readonly backgroundPrimaryDefault: {
99
67
  readonly light: "rgb(33, 42, 49)";
100
68
  readonly dark: "rgb(20, 26, 31)";
101
69
  };
102
- readonly verticalDividerPrimaryDefault: {
103
- readonly light: "rgb(0, 163, 166)";
104
- readonly dark: "rgb(0, 163, 166)";
70
+ readonly groupItem: {
71
+ readonly backgroundPrimarySelectedActive: {
72
+ readonly light: "rgb(20, 26, 31)";
73
+ readonly dark: "rgb(20, 26, 31)";
74
+ };
75
+ readonly backgroundPrimarySelectedDefault: {
76
+ readonly light: "rgb(16, 20, 23)";
77
+ readonly dark: "rgb(16, 20, 23)";
78
+ };
79
+ readonly backgroundPrimarySelectedHover: {
80
+ readonly light: "rgb(45, 55, 63)";
81
+ readonly dark: "rgb(33, 42, 49)";
82
+ };
83
+ readonly backgroundPrimaryActive: {
84
+ readonly light: "rgb(20, 26, 31)";
85
+ readonly dark: "rgb(20, 26, 31)";
86
+ };
87
+ readonly backgroundPrimaryDefault: {
88
+ readonly light: "rgb(25, 31, 36)";
89
+ readonly dark: "rgb(26, 33, 38)";
90
+ };
91
+ readonly verticalDividerPrimaryDefault: {
92
+ readonly light: "rgb(0, 163, 166)";
93
+ readonly dark: "rgb(0, 163, 166)";
94
+ };
95
+ readonly backgroundPrimaryHover: {
96
+ readonly light: "rgb(45, 55, 63)";
97
+ readonly dark: "rgb(33, 42, 49)";
98
+ };
99
+ readonly verticalDividerSecondaryDefault: {
100
+ readonly light: "rgb(91, 111, 128)";
101
+ readonly dark: "rgb(91, 111, 128)";
102
+ };
105
103
  };
106
- readonly verticalDividerSecondaryDefault: {
107
- readonly light: "rgb(91, 111, 128)";
108
- readonly dark: "rgb(91, 111, 128)";
104
+ readonly dividerBorderPrimaryDefault: {
105
+ readonly light: "rgb(33, 42, 49)";
106
+ readonly dark: "rgb(61, 69, 75)";
109
107
  };
110
108
  };
111
- readonly mainMenuBackgroundPrimaryDefault: {
112
- readonly light: "rgb(33, 42, 49)";
113
- readonly dark: "rgb(20, 26, 31)";
109
+ };
110
+ readonly text: {
111
+ readonly primaryBlack: {
112
+ readonly light: "rgb(16, 20, 23)";
113
+ readonly dark: "rgb(254, 254, 254)";
114
114
  };
115
- readonly mainMenuGroupItem: {
116
- readonly backgroundPrimarySelectedActive: {
117
- readonly light: "rgb(20, 26, 31)";
118
- readonly dark: "rgb(20, 26, 31)";
119
- };
120
- readonly backgroundPrimarySelectedDefault: {
121
- readonly light: "rgb(16, 20, 23)";
122
- readonly dark: "rgb(16, 20, 23)";
123
- };
124
- readonly backgroundPrimarySelectedHover: {
125
- readonly light: "rgb(45, 55, 63)";
126
- readonly dark: "rgb(33, 42, 49)";
127
- };
128
- readonly backgroundPrimaryActive: {
129
- readonly light: "rgb(20, 26, 31)";
130
- readonly dark: "rgb(20, 26, 31)";
131
- };
132
- readonly backgroundPrimaryDefault: {
133
- readonly light: "rgb(25, 31, 36)";
134
- readonly dark: "rgb(26, 33, 38)";
135
- };
136
- readonly verticalDividerPrimaryDefault: {
137
- readonly light: "rgb(0, 163, 166)";
138
- readonly dark: "rgb(0, 163, 166)";
139
- };
140
- readonly backgroundPrimaryHover: {
141
- readonly light: "rgb(45, 55, 63)";
142
- readonly dark: "rgb(33, 42, 49)";
143
- };
144
- readonly verticalDividerSecondaryDefault: {
145
- readonly light: "rgb(91, 111, 128)";
146
- readonly dark: "rgb(91, 111, 128)";
147
- };
115
+ readonly primaryBlackInverse: {
116
+ readonly light: "rgb(254, 254, 254)";
117
+ readonly dark: "rgb(16, 20, 23)";
148
118
  };
149
- readonly mainMenuDividerBorderPrimaryDefault: {
150
- readonly light: "rgb(33, 42, 49)";
151
- readonly dark: "rgb(61, 69, 75)";
119
+ readonly secondaryDefault: {
120
+ readonly light: "rgb(90, 97, 102)";
121
+ readonly dark: "rgb(214, 214, 214)";
122
+ };
123
+ readonly secondaryInverse: {
124
+ readonly light: "rgb(214, 214, 214)";
125
+ readonly dark: "rgb(90, 97, 102)";
126
+ };
127
+ readonly primaryBlue: {
128
+ readonly light: "rgb(61, 80, 102)";
129
+ readonly dark: "rgb(205, 213, 220)";
130
+ };
131
+ readonly tertiaryDefault: {
132
+ readonly light: "rgb(133, 138, 141)";
133
+ readonly dark: "rgb(214, 214, 214)";
134
+ };
135
+ readonly quaternaryDefault: {
136
+ readonly light: "rgb(95, 114, 135)";
137
+ readonly dark: "rgb(214, 214, 214)";
138
+ };
139
+ readonly primaryBlueInverse: {
140
+ readonly light: "rgb(205, 213, 220)";
141
+ readonly dark: "rgb(61, 80, 102)";
152
142
  };
153
143
  };
154
144
  readonly topNavbar: {
@@ -324,7 +314,7 @@ export declare const colorSemanticVariables: {
324
314
  readonly light: "rgb(61, 80, 102)";
325
315
  readonly dark: "rgb(205, 213, 220)";
326
316
  };
327
- readonly iconPrimaryInverseDefault: {
317
+ readonly iconPrimaryInverse: {
328
318
  readonly light: "rgb(205, 213, 220)";
329
319
  readonly dark: "rgb(205, 213, 220)";
330
320
  };
@@ -336,17 +326,21 @@ export declare const colorSemanticVariables: {
336
326
  readonly light: "rgb(33, 42, 49)";
337
327
  readonly dark: "rgb(254, 254, 254)";
338
328
  };
329
+ readonly backgroundPrimaryDefault: {
330
+ readonly light: "rgb(254, 254, 254)";
331
+ readonly dark: "rgb(26, 33, 38)";
332
+ };
339
333
  };
340
334
  readonly icon: {
341
335
  readonly primaryInverse: {
342
336
  readonly light: "rgb(205, 213, 220)";
343
337
  readonly dark: "rgb(61, 80, 102)";
344
338
  };
345
- readonly primary: {
339
+ readonly primaryDefault: {
346
340
  readonly light: "rgb(61, 80, 102)";
347
341
  readonly dark: "rgb(205, 213, 220)";
348
342
  };
349
- readonly tertiary: {
343
+ readonly tertiaryDefault: {
350
344
  readonly light: "rgb(148, 165, 179)";
351
345
  readonly dark: "rgb(205, 213, 220)";
352
346
  };
@@ -356,7 +350,7 @@ export declare const colorSemanticVariables: {
356
350
  readonly light: "rgba(16, 20, 23, 0.15)";
357
351
  readonly dark: "rgba(254, 254, 254, 0.15)";
358
352
  };
359
- readonly primary: {
353
+ readonly primaryDefault: {
360
354
  readonly light: "rgb(186, 189, 191)";
361
355
  readonly dark: "rgb(61, 69, 75)";
362
356
  };
@@ -417,7 +411,7 @@ export declare const colorSemanticVariables: {
417
411
  readonly light: "rgb(0, 163, 166)";
418
412
  readonly dark: "rgb(120, 205, 206)";
419
413
  };
420
- readonly textPrimaryDefault2: {
414
+ readonly textPrimaryDefault: {
421
415
  readonly light: "rgb(61, 80, 102)";
422
416
  readonly dark: "rgb(254, 254, 254)";
423
417
  };
@@ -425,7 +419,7 @@ export declare const colorSemanticVariables: {
425
419
  readonly light: "rgb(148, 165, 179)";
426
420
  readonly dark: "rgb(205, 213, 220)";
427
421
  };
428
- readonly borderSecondary: {
422
+ readonly borderSecondaryDefault: {
429
423
  readonly light: "rgb(111, 118, 122)";
430
424
  readonly dark: "rgb(80, 87, 93)";
431
425
  };
@@ -484,51 +478,51 @@ export declare const colorSemanticVariables: {
484
478
  };
485
479
  };
486
480
  readonly hyperlink: {
487
- readonly hyperlinkTextPrimaryDefault: {
481
+ readonly textPrimaryDefault: {
488
482
  readonly light: "rgb(35, 92, 123)";
489
483
  readonly dark: "rgb(143, 212, 213)";
490
484
  };
491
- readonly hyperlinkTextPrimaryHover: {
485
+ readonly textPrimaryHover: {
492
486
  readonly light: "rgb(35, 92, 123)";
493
487
  readonly dark: "rgb(143, 212, 213)";
494
488
  };
495
- readonly hyperlinkTextPrimaryActive: {
489
+ readonly textPrimaryActive: {
496
490
  readonly light: "rgb(55, 67, 77)";
497
491
  readonly dark: "rgb(0, 122, 124)";
498
492
  };
499
- readonly hyperlinkTextVisitedDefault: {
493
+ readonly textVisitedDefault: {
500
494
  readonly light: "rgb(85, 104, 119)";
501
495
  readonly dark: "rgb(183, 227, 228)";
502
496
  };
503
- readonly hyperlinkTextVisitedHover: {
497
+ readonly textVisitedHover: {
504
498
  readonly light: "rgb(85, 104, 119)";
505
499
  readonly dark: "rgb(143, 212, 213)";
506
500
  };
507
- readonly hyperlinkTextVisitedActive: {
501
+ readonly textVisitedActive: {
508
502
  readonly light: "rgb(55, 67, 77)";
509
503
  readonly dark: "rgb(0, 122, 124)";
510
504
  };
511
- readonly hyperlinkTextInvertedVisitedActive: {
505
+ readonly textInvertedVisitedActive: {
512
506
  readonly light: "rgb(0, 122, 124)";
513
507
  readonly dark: "rgb(55, 67, 77)";
514
508
  };
515
- readonly hyperlinkTextInvertedVisitedHover: {
509
+ readonly textInvertedVisitedHover: {
516
510
  readonly light: "rgb(143, 212, 213)";
517
511
  readonly dark: "rgb(85, 104, 119)";
518
512
  };
519
- readonly hyperlinkTextInvertedVisited: {
513
+ readonly textInvertedVisited: {
520
514
  readonly light: "rgb(183, 227, 228)";
521
515
  readonly dark: "rgb(85, 104, 119)";
522
516
  };
523
- readonly hyperlinkTextInvertedActive: {
517
+ readonly textInvertedActive: {
524
518
  readonly light: "rgb(0, 122, 124)";
525
519
  readonly dark: "rgb(55, 67, 77)";
526
520
  };
527
- readonly hyperlinkTextInvertedHover: {
521
+ readonly textInvertedHover: {
528
522
  readonly light: "rgb(143, 212, 213)";
529
523
  readonly dark: "rgb(35, 92, 123)";
530
524
  };
531
- readonly hyperlinkTextInverted: {
525
+ readonly textInverted: {
532
526
  readonly light: "rgb(143, 212, 213)";
533
527
  readonly dark: "rgb(35, 92, 123)";
534
528
  };
@@ -754,7 +748,7 @@ export declare const colorSemanticVariables: {
754
748
  readonly light: "rgb(61, 80, 102)";
755
749
  readonly dark: "rgb(205, 213, 220)";
756
750
  };
757
- readonly backgroundPrimary: {
751
+ readonly backgroundPrimaryDefault: {
758
752
  readonly light: "rgb(218, 225, 232)";
759
753
  readonly dark: "rgb(45, 55, 63)";
760
754
  };
@@ -763,30 +757,92 @@ export declare const colorSemanticVariables: {
763
757
  readonly dark: "rgb(205, 213, 220)";
764
758
  };
765
759
  readonly backgroundSecondaryActive: {
766
- readonly light: "rgb(26, 33, 38)";
767
- readonly dark: "rgb(254, 254, 254)";
760
+ readonly light: "rgb(225, 229, 234)";
761
+ readonly dark: "rgb(55, 67, 77)";
768
762
  };
769
763
  readonly backgroundSecondaryHover: {
770
- readonly light: "rgb(45, 55, 63)";
771
- readonly dark: "rgb(254, 254, 254)";
764
+ readonly light: "rgb(233, 236, 240)";
765
+ readonly dark: "rgb(45, 55, 63)";
772
766
  };
773
- readonly backgroundSecondary: {
774
- readonly light: "rgb(55, 67, 77)";
775
- readonly dark: "rgb(254, 254, 254)";
767
+ readonly backgroundSecondaryDefault: {
768
+ readonly light: "rgb(254, 254, 254)";
769
+ readonly dark: "rgb(26, 33, 38)";
776
770
  };
777
771
  readonly iconSecondaryInverseDefault: {
778
772
  readonly light: "rgb(205, 213, 220)";
779
773
  readonly dark: "rgb(205, 213, 220)";
780
774
  };
781
775
  readonly textSecondaryDefault: {
782
- readonly light: "rgb(205, 213, 220)";
776
+ readonly light: "rgb(61, 80, 102)";
783
777
  readonly dark: "rgb(205, 213, 220)";
784
778
  };
785
779
  readonly iconSecondaryDefault: {
786
- readonly light: "rgb(205, 213, 220)";
780
+ readonly light: "rgb(61, 80, 102)";
787
781
  readonly dark: "rgb(205, 213, 220)";
788
782
  };
789
783
  };
784
+ readonly tags: {
785
+ readonly progress: {
786
+ readonly unstartedPrimaryDefault: {
787
+ readonly light: "rgb(243, 243, 243)";
788
+ readonly dark: "rgb(200, 200, 200)";
789
+ };
790
+ readonly activePrimaryDefault: {
791
+ readonly light: "rgb(250, 230, 188)";
792
+ readonly dark: "rgb(247, 215, 147)";
793
+ };
794
+ readonly reviewPrimaryDefault: {
795
+ readonly light: "rgb(210, 217, 225)";
796
+ readonly dark: "rgb(185, 195, 206)";
797
+ };
798
+ readonly blockedPrimaryDefault: {
799
+ readonly light: "rgb(203, 147, 142)";
800
+ readonly dark: "rgb(192, 126, 120)";
801
+ };
802
+ readonly completePrimaryDefault: {
803
+ readonly light: "rgb(212, 230, 198)";
804
+ readonly dark: "rgb(177, 209, 152)";
805
+ };
806
+ readonly pausedPrimaryDefault: {
807
+ readonly light: "rgb(238, 222, 229)";
808
+ readonly dark: "rgb(204, 155, 175)";
809
+ };
810
+ readonly testPrimaryDefault: {
811
+ readonly light: "rgb(16, 20, 23)";
812
+ readonly dark: "rgb(16, 20, 23)";
813
+ };
814
+ };
815
+ readonly state: {
816
+ readonly unstartedPrimaryDefault: {
817
+ readonly light: "rgb(243, 243, 243)";
818
+ readonly dark: "rgb(200, 200, 200)";
819
+ };
820
+ readonly alphaPrimaryDefault: {
821
+ readonly light: "rgb(238, 222, 229)";
822
+ readonly dark: "rgb(204, 155, 175)";
823
+ };
824
+ readonly finalPrimaryDefault: {
825
+ readonly light: "rgb(212, 230, 198)";
826
+ readonly dark: "rgb(177, 209, 152)";
827
+ };
828
+ readonly releaseCandidatePrimaryDefault: {
829
+ readonly light: "rgb(210, 217, 225)";
830
+ readonly dark: "rgb(185, 195, 206)";
831
+ };
832
+ readonly betaPrimaryDefault: {
833
+ readonly light: "rgb(250, 230, 188)";
834
+ readonly dark: "rgb(247, 215, 147)";
835
+ };
836
+ readonly deprecatedPrimaryDefault: {
837
+ readonly light: "rgb(203, 147, 142)";
838
+ readonly dark: "rgb(192, 126, 120)";
839
+ };
840
+ readonly testPrimaryDefault: {
841
+ readonly light: "rgb(16, 20, 23)";
842
+ readonly dark: "rgb(16, 20, 23)";
843
+ };
844
+ };
845
+ };
790
846
  };
791
847
  };
792
848
  export type ColorSemanticVariables = typeof colorSemanticVariables;