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