@ilo-org/styles 1.15.1 → 1.16.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 (133) hide show
  1. package/css/components/accordion.css +1 -1
  2. package/css/components/audioplayer.css +1 -1
  3. package/css/components/blockquote.css +1 -1
  4. package/css/components/breadcrumb.css +5 -1
  5. package/css/components/button.css +1 -1
  6. package/css/components/callout.css +1 -1
  7. package/css/components/card.css +3 -1
  8. package/css/components/checkbox.css +1 -1
  9. package/css/components/contextmenu.css +1 -1
  10. package/css/components/datacard.css +3 -1
  11. package/css/components/detailcard.css +1 -1
  12. package/css/components/dropdown.css +7 -1
  13. package/css/components/factlistcard.css +1 -1
  14. package/css/components/featurecard.css +1 -1
  15. package/css/components/fieldset.css +1 -1
  16. package/css/components/file-upload.css +1 -1
  17. package/css/components/footer.css +1 -1
  18. package/css/components/form.css +1 -1
  19. package/css/components/formcontrol.css +5 -1
  20. package/css/components/hero.css +9 -1
  21. package/css/components/herocard.css +1 -1
  22. package/css/components/image.css +7 -1
  23. package/css/components/input.css +1 -1
  24. package/css/components/languagetoggle.css +3 -1
  25. package/css/components/linklist.css +1 -1
  26. package/css/components/list.css +1 -1
  27. package/css/components/loading.css +1 -1
  28. package/css/components/logo.css +1 -1
  29. package/css/components/logogrid.css +1 -1
  30. package/css/components/modal.css +1 -1
  31. package/css/components/multilinkcard.css +1 -1
  32. package/css/components/navigation.css +1 -1
  33. package/css/components/notification.css +1 -1
  34. package/css/components/pagination.css +1 -1
  35. package/css/components/profile.css +1 -1
  36. package/css/components/promocard.css +1 -1
  37. package/css/components/radio.css +1 -1
  38. package/css/components/readmore.css +1 -1
  39. package/css/components/richtext.css +7 -1
  40. package/css/components/scorecard.css +1 -1
  41. package/css/components/searchfield.css +1 -1
  42. package/css/components/socialmedia.css +1 -1
  43. package/css/components/statcard.css +1 -1
  44. package/css/components/status.css +1 -1
  45. package/css/components/table.css +1 -1
  46. package/css/components/tableofcontents.css +1 -1
  47. package/css/components/tabs.css +3 -1
  48. package/css/components/tag.css +1 -1
  49. package/css/components/textarea.css +1 -1
  50. package/css/components/textcard.css +1 -1
  51. package/css/components/toggle.css +1 -1
  52. package/css/components/tooltip.css +1 -1
  53. package/css/components/video.css +7 -1
  54. package/css/global.css +1 -1
  55. package/css/global.css.map +1 -1
  56. package/css/index.css +69 -3
  57. package/css/index.css.map +1 -1
  58. package/css/monorepo.css +69 -3
  59. package/css/monorepo.css.map +1 -1
  60. package/package.json +3 -3
  61. package/scss/_mixins.scss +4 -2
  62. package/scss/_typography.scss +1 -1
  63. package/scss/_typographymonorepo.scss +1 -1
  64. package/scss/components/_accordion.scss +10 -10
  65. package/scss/components/_audioplayer.scss +23 -23
  66. package/scss/components/_blockquote.scss +6 -6
  67. package/scss/components/_breadcrumb.scss +10 -6
  68. package/scss/components/_button.scss +32 -30
  69. package/scss/components/_callout.scss +24 -15
  70. package/scss/components/_card.scss +25 -21
  71. package/scss/components/_checkbox.scss +11 -11
  72. package/scss/components/_contextmenu.scss +9 -8
  73. package/scss/components/_datacard.scss +8 -6
  74. package/scss/components/_detailcard.scss +2 -2
  75. package/scss/components/_dropdown.scss +16 -10
  76. package/scss/components/_factlistcard.scss +6 -5
  77. package/scss/components/_featurecard.scss +2 -2
  78. package/scss/components/_fieldset.scss +9 -9
  79. package/scss/components/_file-upload.scss +20 -19
  80. package/scss/components/_footer.scss +21 -20
  81. package/scss/components/_form.scss +4 -4
  82. package/scss/components/_formcontrol.scss +14 -10
  83. package/scss/components/_hero.scss +8 -8
  84. package/scss/components/_herocard.scss +14 -14
  85. package/scss/components/_image.scss +9 -7
  86. package/scss/components/_input.scss +14 -12
  87. package/scss/components/_languagetoggle.scss +10 -8
  88. package/scss/components/_linklist.scss +13 -12
  89. package/scss/components/_list.scss +3 -3
  90. package/scss/components/_loading.scss +12 -12
  91. package/scss/components/_logo.scss +2 -2
  92. package/scss/components/_logogrid.scss +3 -3
  93. package/scss/components/_modal.scss +1 -1
  94. package/scss/components/_multilinkcard.scss +8 -8
  95. package/scss/components/_navigation.scss +71 -71
  96. package/scss/components/_notification.scss +12 -9
  97. package/scss/components/_pagination.scss +39 -24
  98. package/scss/components/_profile.scss +8 -8
  99. package/scss/components/_promocard.scss +1 -1
  100. package/scss/components/_radio.scss +8 -8
  101. package/scss/components/_readmore.scss +7 -7
  102. package/scss/components/_richtext.scss +12 -12
  103. package/scss/components/_scorecard.scss +2 -2
  104. package/scss/components/_searchfield.scss +11 -9
  105. package/scss/components/_socialmedia.scss +7 -7
  106. package/scss/components/_statcard.scss +8 -8
  107. package/scss/components/_status.scss +7 -7
  108. package/scss/components/_table.scss +30 -30
  109. package/scss/components/_tableofcontents.scss +13 -13
  110. package/scss/components/_tabs.scss +19 -17
  111. package/scss/components/_tag.scss +15 -15
  112. package/scss/components/_textarea.scss +15 -12
  113. package/scss/components/_textcard.scss +2 -2
  114. package/scss/components/_toggle.scss +6 -6
  115. package/scss/components/_tooltip.scss +13 -10
  116. package/scss/components/_video.scss +28 -29
  117. package/scss/components/navigation/_nav-compact.scss +17 -13
  118. package/scss/components/navigation/_nav-complex.scss +20 -12
  119. package/scss/components/navigation/_nav-main.scss +20 -14
  120. package/scss/components/navigation/internal/_nav-dropdown.scss +2 -2
  121. package/scss/components/navigation/internal/_nav-grid.scss +3 -3
  122. package/scss/components/navigation/internal/_nav-menu.scss +13 -13
  123. package/scss/components/navigation/internal/_nav-shared.scss +1 -1
  124. package/scss/components/navigation/internal/mobile/_nav-mobile-drawer.scss +5 -5
  125. package/scss/components/navigation/internal/mobile/_nav-mobile-menu.scss +5 -5
  126. package/scss/components/navigation/internal/mobile/_nav-mobile.scss +17 -17
  127. package/scss/components/photogallery/_expandable-caption.scss +4 -4
  128. package/scss/components/photogallery/_lightbox.scss +7 -7
  129. package/scss/components/photogallery/_lightboxgallery.scss +8 -8
  130. package/scss/components/photogallery/_photogallery-controls.scss +25 -13
  131. package/scss/components/photogallery/_photogallery-thumbnails.scss +8 -8
  132. package/scss/components/photogallery/_photogallery.scss +9 -9
  133. package/scss/theme/_foundation.scss +20 -1
package/scss/components/_pagination.scss CHANGED
@@ -2,15 +2,15 @@
2
2
  @import "../mixins";
3
3
 
4
4
  .ilo--pagination {
5
- --ilo-pagination-page-color: var(--ilo-color-blue-dark);
5
+ --ilo-pagination-page-color: var(--ilo-color-light-text-brand);
6
6
 
7
7
  &__theme {
8
8
  &__dark {
9
- --ilo-pagination-page-color: var(--ilo-color-white);
9
+ --ilo-pagination-page-color: var(--ilo-color-light-text-inverse);
10
10
  }
11
11
 
12
12
  &__light {
13
- --ilo-pagination-page-color: var(--ilo-color-blue-dark);
13
+ --ilo-pagination-page-color: var(--ilo-color-light-text-brand);
14
14
  }
15
15
  }
16
16
 
@@ -21,10 +21,10 @@
21
21
  $self: &;
22
22
 
23
23
  &--link {
24
- background: var(--ilo-color-gray-light);
24
+ background: var(--ilo-color-light-container-bg-disabled);
25
25
  border: none;
26
26
  border-radius: 2px;
27
- color: var(--ilo-color-blue-dark);
27
+ color: var(--ilo-color-light-text-brand);
28
28
  display: inline-block;
29
29
  font-family: var(--ilo-fonts-display);
30
30
  height: px-to-rem(40px);
@@ -48,8 +48,8 @@
48
48
  }
49
49
 
50
50
  &:hover {
51
- background: var(--ilo-color-blue-lighter);
52
- color: var(--ilo-color-blue);
51
+ background: var(--ilo-color-light-container-bg-subtle);
52
+ color: var(--ilo-color-light-action-hover);
53
53
  }
54
54
 
55
55
  &.ilo--pagination--disable {
@@ -58,7 +58,7 @@
58
58
  pointer-events: none;
59
59
 
60
60
  &:hover {
61
- background: var(--ilo-color-gray-light);
61
+ background: var(--ilo-color-light-container-bg-disabled);
62
62
  }
63
63
  }
64
64
  }
@@ -68,12 +68,18 @@
68
68
  &::before {
69
69
  transform: translate(-50%, -50%) rotate(180deg);
70
70
 
71
- @include icon("double_chevron_right", var(--ilo-color-blue-dark));
71
+ @include icon(
72
+ "double_chevron_right",
73
+ var(--ilo-color-light-action-default)
74
+ );
72
75
  }
73
76
 
74
77
  &:hover {
75
78
  &::before {
76
- @include icon("double_chevron_right", var(--ilo-color-blue));
79
+ @include icon(
80
+ "double_chevron_right",
81
+ var(--ilo-color-light-action-hover)
82
+ );
77
83
  }
78
84
  }
79
85
 
@@ -81,10 +87,13 @@
81
87
  opacity: 0.45;
82
88
 
83
89
  &:hover {
84
- background: var(--ilo-color-gray-light);
90
+ background: var(--ilo-color-light-container-bg-disabled);
85
91
 
86
92
  &::before {
87
- @include icon("double_chevron_right", var(--ilo-color-blue-dark));
93
+ @include icon(
94
+ "double_chevron_right",
95
+ var(--ilo-color-light-action-default)
96
+ );
88
97
  }
89
98
  }
90
99
  }
@@ -95,12 +104,12 @@
95
104
  transform: translate(-50%, -50%) rotate(180deg);
96
105
  width: px-to-rem(20px);
97
106
 
98
- @include icon("chevron_right", var(--ilo-color-blue-dark));
107
+ @include icon("chevron_right", var(--ilo-color-light-action-default));
99
108
  }
100
109
 
101
110
  &:hover {
102
111
  &::before {
103
- @include icon("chevron_right", var(--ilo-color-blue));
112
+ @include icon("chevron_right", var(--ilo-color-light-action-hover));
104
113
  }
105
114
  }
106
115
 
@@ -108,10 +117,10 @@
108
117
  opacity: 0.45;
109
118
 
110
119
  &:hover {
111
- background: var(--ilo-color-gray-light);
120
+ background: var(--ilo-color-light-container-bg-disabled);
112
121
 
113
122
  &::before {
114
- @include icon("chevron_right", var(--ilo-color-blue-dark));
123
+ @include icon("chevron_right", var(--ilo-color-light-action-default));
115
124
  }
116
125
  }
117
126
  }
@@ -122,12 +131,12 @@
122
131
  transform: translate(-50%, -50%) rotate(0);
123
132
  width: px-to-rem(20px);
124
133
 
125
- @include icon("chevron_right", var(--ilo-color-blue-dark));
134
+ @include icon("chevron_right", var(--ilo-color-light-action-default));
126
135
  }
127
136
 
128
137
  &:hover {
129
138
  &::before {
130
- @include icon("chevron_right", var(--ilo-color-blue));
139
+ @include icon("chevron_right", var(--ilo-color-light-action-hover));
131
140
  }
132
141
  }
133
142
 
@@ -135,10 +144,10 @@
135
144
  opacity: 0.45;
136
145
 
137
146
  &:hover {
138
- background: var(--ilo-color-gray-light);
147
+ background: var(--ilo-color-light-container-bg-disabled);
139
148
 
140
149
  &::before {
141
- @include icon("chevron_right", var(--ilo-color-blue-dark));
150
+ @include icon("chevron_right", var(--ilo-color-light-action-default));
142
151
  }
143
152
  }
144
153
  }
@@ -146,12 +155,18 @@
146
155
 
147
156
  &--last-page {
148
157
  &::before {
149
- @include icon("double_chevron_right", var(--ilo-color-blue-dark));
158
+ @include icon(
159
+ "double_chevron_right",
160
+ var(--ilo-color-light-action-default)
161
+ );
150
162
  }
151
163
 
152
164
  &:hover {
153
165
  &::before {
154
- @include icon("double_chevron_right", var(--ilo-color-blue));
166
+ @include icon(
167
+ "double_chevron_right",
168
+ var(--ilo-color-light-action-hover)
169
+ );
155
170
  }
156
171
  }
157
172
 
@@ -159,10 +174,10 @@
159
174
  opacity: 0.45;
160
175
 
161
176
  &:hover {
162
- background: var(--ilo-color-gray-light);
177
+ background: var(--ilo-color-light-container-bg-disabled);
163
178
 
164
179
  &::before {
165
- @include icon("chevron_right", var(--ilo-color-blue-dark));
180
+ @include icon("chevron_right", var(--ilo-color-light-action-default));
166
181
  }
167
182
  }
168
183
  }
package/scss/components/_profile.scss CHANGED
@@ -41,7 +41,7 @@
41
41
  position: absolute;
42
42
  bottom: -12px;
43
43
  width: 100%;
44
- border-bottom: 2px solid var(--ilo-color-gray-light);
44
+ border-bottom: 2px solid var(--ilo-color-light-border-subtle);
45
45
  }
46
46
 
47
47
  #{$c}__size__small &::after {
@@ -56,7 +56,7 @@
56
56
  &--role,
57
57
  &--description {
58
58
  @include typography("body-small");
59
- color: var(--ilo-color-gray-accessible);
59
+ color: var(--ilo-color-light-text-subtle);
60
60
  }
61
61
 
62
62
  &--description {
@@ -70,7 +70,7 @@
70
70
  $icon: "[class*='icon']";
71
71
 
72
72
  @include typography("highlight-medium");
73
- color: var(--ilo-color-blue-dark);
73
+ color: var(--ilo-color-light-text-brand);
74
74
  grid-column: 1 / -1;
75
75
 
76
76
  a {
@@ -84,7 +84,7 @@
84
84
  &:hover,
85
85
  &:focus,
86
86
  &:focus-within {
87
- color: var(--ilo-color-blue);
87
+ color: var(--ilo-color-light-action-hover);
88
88
  }
89
89
  }
90
90
 
@@ -121,11 +121,11 @@
121
121
 
122
122
  &__theme {
123
123
  &__dark {
124
- color: var(--ilo-color-white);
124
+ color: var(--ilo-color-light-text-inverse);
125
125
 
126
126
  #{$c}--figcaption--content {
127
127
  &:after {
128
- border-color: var(--ilo-color-white);
128
+ border-color: var(--ilo-color-light-border-inverse);
129
129
  }
130
130
  }
131
131
 
@@ -134,11 +134,11 @@
134
134
  #{$c}--description,
135
135
  #{$c}--link,
136
136
  a {
137
- color: var(--ilo-color-white);
137
+ color: var(--ilo-color-light-text-inverse);
138
138
  }
139
139
 
140
140
  a:hover {
141
- background-color: var(--ilo-color-blue-lighter);
141
+ background-color: var(--ilo-color-light-container-bg-subtle);
142
142
  }
143
143
  }
144
144
  }
package/scss/components/_promocard.scss CHANGED
@@ -122,7 +122,7 @@
122
122
  }
123
123
 
124
124
  &#{$self}__theme__light:not(:hover) #{$self}--title {
125
- color: var(--ilo-color-gray-charcoal);
125
+ color: var(--ilo-color-light-text-default);
126
126
  @include globaltransition("color");
127
127
  }
128
128
  }
package/scss/components/_radio.scss CHANGED
@@ -21,8 +21,8 @@
21
21
 
22
22
  &--control:before {
23
23
  content: "";
24
- background-color: var(--ilo-color-gray-base);
25
- border: px-to-rem(4px) solid var(--ilo-color-gray-base);
24
+ background-color: var(--ilo-color-light-container-bg-inactive);
25
+ border: px-to-rem(4px) solid var(--ilo-color-light-border-default);
26
26
  border-radius: 50%;
27
27
  height: px-to-rem(18px);
28
28
  left: px-to-rem(3px);
@@ -35,7 +35,7 @@
35
35
 
36
36
  &--control:after {
37
37
  content: "";
38
- background-color: var(--ilo-color-gray-base);
38
+ background-color: var(--ilo-color-light-container-bg-inactive);
39
39
  border-radius: 50%;
40
40
  height: px-to-rem(24px);
41
41
  left: 0;
@@ -47,16 +47,16 @@
47
47
  }
48
48
 
49
49
  input:checked + &--control:before {
50
- background-color: var(--ilo-color-blue-lighter);
51
- border-color: var(--ilo-color-blue-dark);
50
+ background-color: var(--ilo-color-light-container-bg-subtle);
51
+ border-color: var(--ilo-color-light-border-brand-3);
52
52
  }
53
53
 
54
54
  input:checked + &--control:after {
55
- background-color: var(--ilo-color-blue-dark);
55
+ background-color: var(--ilo-color-light-container-bg-brand);
56
56
  }
57
57
 
58
58
  input:focus + &--control:after {
59
- background-color: var(--ilo-color-yellow);
59
+ background-color: var(--ilo-color-light-feedback-warning-default);
60
60
  }
61
61
 
62
62
  input:disabled + &--control:after,
@@ -66,6 +66,6 @@
66
66
 
67
67
  input:invalid + &--control:after,
68
68
  &__error &--control:after {
69
- background-color: var(--ilo-color-red);
69
+ background-color: var(--ilo-color-light-feedback-error-default);
70
70
  }
71
71
  }
package/scss/components/_readmore.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  &--button {
7
7
  background: transparent;
8
8
  border: none;
9
- border-top: var(--ilo-border-md) solid var(--ilo-color-blue-lighter);
10
- color: var(--ilo-color-blue-dark);
9
+ border-top: var(--ilo-border-md) solid var(--ilo-color-dark-border-brand-3);
10
+ color: var(--ilo-color-light-text-brand);
11
11
  font-family: var(--ilo-fonts-display);
12
12
  height: px-to-rem(56px);
13
13
  margin-top: spacing(8);
@@ -28,18 +28,18 @@
28
28
  transform: translateY(-50%);
29
29
  transform-origin: center center;
30
30
  width: px-to-rem(24px);
31
- @include icon("chevron_down", var(--ilo-color-blue-dark));
31
+ @include icon("chevron_down", var(--ilo-color-light-action-default));
32
32
  }
33
33
 
34
34
  &:hover {
35
- background: var(--ilo-color-blue-lighter);
36
- border-top: var(--ilo-border-md) solid var(--ilo-color-blue);
37
- color: var(--ilo-color-blue);
35
+ background: var(--ilo-color-light-container-bg-subtle);
36
+ border-top: var(--ilo-border-md) solid var(--ilo-color-light-border-brand);
37
+ color: var(--ilo-color-light-action-hover);
38
38
  cursor: pointer;
39
39
  @include globaltransition("color, background-color, border-color");
40
40
 
41
41
  &:after {
42
- @include icon("chevron_down", var(--ilo-color-blue));
42
+ @include icon("chevron_down", var(--ilo-color-light-action-hover));
43
43
  }
44
44
  }
45
45
 
package/scss/components/_richtext.scss CHANGED
@@ -4,16 +4,16 @@
4
4
  @import "../mixins";
5
5
 
6
6
  .ilo--richtext {
7
- --ilo-richtext-color: var(--ilo-color-blue-dark);
8
- --ilo-richtext-hr-color: var(--ilo-color-gray-light);
9
- --ilo-richtext-link-color: var(--ilo-color-purple);
10
- --ilo-richtext-link-visited-color: var(--ilo-color-purple);
7
+ --ilo-richtext-color: var(--ilo-color-light-text-brand);
8
+ --ilo-richtext-hr-color: var(--ilo-color-dark-text-subtle);
9
+ --ilo-richtext-link-color: var(--ilo-color-light-text-accent);
10
+ --ilo-richtext-link-visited-color: var(--ilo-color-light-text-accent);
11
11
 
12
12
  &__theme__light {
13
- --ilo-richtext-color: var(--ilo-color-blue-dark);
14
- --ilo-richtext-hr-color: var(--ilo-color-gray-light);
15
- --ilo-richtext-link-color: var(--ilo-color-purple);
16
- --ilo-richtext-link-visited-color: var(--ilo-color-purple);
13
+ --ilo-richtext-color: var(--ilo-color-light-text-brand);
14
+ --ilo-richtext-hr-color: var(--ilo-color-dark-text-subtle);
15
+ --ilo-richtext-link-color: var(--ilo-color-light-text-accent);
16
+ --ilo-richtext-link-visited-color: var(--ilo-color-light-text-accent);
17
17
 
18
18
  a {
19
19
  @include linkstyles("light");
@@ -21,10 +21,10 @@
21
21
  }
22
22
 
23
23
  &__theme__dark {
24
- --ilo-richtext-color: var(--ilo-color-white);
25
- --ilo-richtext-hr-color: var(--ilo-color-gray-light);
26
- --ilo-richtext-link-color: var(--ilo-color-blue-medium);
27
- --ilo-richtext-link-visited-color: var(--ilo-color-blue-medium);
24
+ --ilo-richtext-color: var(--ilo-color-light-text-inverse);
25
+ --ilo-richtext-hr-color: var(--ilo-color-dark-text-subtle);
26
+ --ilo-richtext-link-color: var(--ilo-color-dark-text-brand);
27
+ --ilo-richtext-link-visited-color: var(--ilo-color-dark-text-brand);
28
28
 
29
29
  a {
30
30
  @include linkstyles("dark");
package/scss/components/_scorecard.scss CHANGED
@@ -77,11 +77,11 @@
77
77
  margin-bottom: spacing(6);
78
78
 
79
79
  #{$self}__theme__dark & {
80
- color: var(--ilo-color-blue-dark);
80
+ color: var(--ilo-color-light-text-brand);
81
81
  }
82
82
 
83
83
  #{$self}__theme__light & {
84
- color: var(--ilo-color-white);
84
+ color: var(--ilo-color-light-text-inverse);
85
85
  }
86
86
  }
87
87
 
package/scss/components/_searchfield.scss CHANGED
@@ -14,10 +14,12 @@
14
14
  }
15
15
 
16
16
  &--button {
17
- border-right: var(--ilo-border-md) solid var(--ilo-color-gray-base);
18
- border-top: var(--ilo-border-md) solid var(--ilo-color-gray-base);
19
- border-bottom: var(--ilo-border-md) solid var(--ilo-color-gray-base);
20
- background-color: var(--ilo-color-gray-light);
17
+ border-right: var(--ilo-border-md) solid
18
+ var(--ilo-color-light-border-default);
19
+ border-top: var(--ilo-border-md) solid var(--ilo-color-light-border-default);
20
+ border-bottom: var(--ilo-border-md) solid
21
+ var(--ilo-color-light-border-default);
22
+ background-color: var(--ilo-color-light-container-bg-disabled);
21
23
  border-left: 0;
22
24
  height: 100%;
23
25
  width: px-to-rem(48px);
@@ -32,18 +34,18 @@
32
34
  display: inline-block;
33
35
  height: px-to-rem(24px);
34
36
  width: px-to-rem(24px);
35
- @include icon("search", var(--ilo-color-blue-dark));
37
+ @include icon("search", var(--ilo-color-light-action-default));
36
38
  }
37
39
 
38
40
  &:hover,
39
41
  &:focus {
40
- background-color: var(--ilo-color-blue-lighter);
42
+ background-color: var(--ilo-color-light-container-bg-subtle);
41
43
  }
42
44
 
43
45
  &:active {
44
- background-color: var(--ilo-color-blue);
46
+ background-color: var(--ilo-color-light-action-selected);
45
47
  &:after {
46
- @include icon("search", var(--ilo-color-white));
48
+ @include icon("search", var(--ilo-color-light-icon-inverse));
47
49
  }
48
50
  }
49
51
 
@@ -108,7 +110,7 @@
108
110
  [dir="rtl"] & {
109
111
  .ilo--searchfield {
110
112
  &--button {
111
- border-left: px-to-rem(2px) solid var(--ilo-color-gray-base);
113
+ border-left: px-to-rem(2px) solid var(--ilo-color-light-border-default);
112
114
  border-right: 0;
113
115
  }
114
116
  &--clear-button {
package/scss/components/_socialmedia.scss CHANGED
@@ -8,15 +8,15 @@
8
8
 
9
9
  @mixin get-icon($icon, $theme: $default-theme) {
10
10
  @if $theme == "dark" {
11
- @include icon($icon, var(--ilo-color-white));
11
+ @include icon($icon, var(--ilo-color-light-icon-inverse));
12
12
  }
13
13
 
14
14
  @if $theme == "light" {
15
- @include icon($icon, var(--ilo-color-gray-accessible));
15
+ @include icon($icon, var(--ilo-color-dark-icon-subtle));
16
16
  }
17
17
 
18
18
  &:hover {
19
- @include icon($icon, var(--ilo-color-blue));
19
+ @include icon($icon, var(--ilo-color-light-action-hover));
20
20
  }
21
21
  }
22
22
 
@@ -33,12 +33,12 @@
33
33
  }
34
34
 
35
35
  &--headline {
36
- color: var(--ilo-color-blue-dark);
36
+ color: var(--ilo-color-light-text-brand);
37
37
  @include typography("highlight-medium-bold");
38
38
  margin-bottom: spacing(7);
39
39
 
40
40
  #{$c}__theme__dark & {
41
- color: var(--ilo-color-white);
41
+ color: var(--ilo-color-light-text-inverse);
42
42
  }
43
43
  }
44
44
 
@@ -65,11 +65,11 @@
65
65
  position: relative;
66
66
 
67
67
  &:hover {
68
- background-color: var(--ilo-color-blue-lighter);
68
+ background-color: var(--ilo-color-light-container-bg-subtle);
69
69
  }
70
70
 
71
71
  #{$c}__theme__dark &:hover {
72
- background-color: var(--ilo-color-white);
72
+ background-color: var(--ilo-color-light-container-bg-default);
73
73
  }
74
74
 
75
75
  &--icon {
package/scss/components/_statcard.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  --max-width: 100%;
14
14
  }
15
15
 
16
- border-bottom: px-to-rem(3px) solid var(--ilo-color-purple);
16
+ border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-brand-4);
17
17
  padding: spacing(10) spacing(6) spacing(8);
18
18
  position: relative;
19
19
  width: 100%;
@@ -26,24 +26,24 @@
26
26
 
27
27
  &#{$self}__color {
28
28
  &__blue {
29
- background: var(--ilo-color-blue-lighter);
29
+ background: var(--ilo-color-light-container-bg-subtle);
30
30
  }
31
31
 
32
32
  &__yellow {
33
- background: var(--ilo-color-yellow);
33
+ background: var(--ilo-color-light-feedback-warning-default);
34
34
  }
35
35
 
36
36
  &__green {
37
- background: var(--ilo-color-green);
37
+ background: var(--ilo-color-light-feedback-success-default);
38
38
  }
39
39
 
40
40
  &__turquoise {
41
- background: var(--ilo-color-turquoise);
41
+ background: var(--ilo-color-light-generic-turquoise);
42
42
  }
43
43
  }
44
44
 
45
45
  &#{$self}__loading {
46
- background-color: var(--ilo-color-gray-base);
46
+ background-color: var(--ilo-color-light-container-bg-inactive);
47
47
  border-bottom-color: var(--ilo-skeleton-element-background-color);
48
48
  }
49
49
 
@@ -75,14 +75,14 @@
75
75
  }
76
76
 
77
77
  #{$self}--title {
78
- color: var(--ilo-color-blue-dark);
78
+ color: var(--ilo-color-light-text-brand);
79
79
  @include typography("heading-2");
80
80
  width: 100%;
81
81
  margin-bottom: spacing(3);
82
82
  }
83
83
 
84
84
  #{$self}--intro {
85
- color: var(--ilo-color-blue-dark);
85
+ color: var(--ilo-color-light-text-brand);
86
86
  font-family: var(--ilo-fonts-display);
87
87
  @include typography("highlight-medium");
88
88
  margin-bottom: spacing(8);
package/scss/components/_status.scss CHANGED
@@ -21,30 +21,30 @@
21
21
  letter-spacing: var(--ilo-letter-spacing-sm);
22
22
 
23
23
  // Colors and border
24
- color: var(--ilo-color-blue-dark);
25
- background-color: var(--ilo-color-green-light);
24
+ color: var(--ilo-color-light-text-brand);
25
+ background-color: var(--ilo-color-light-feedback-success-light);
26
26
  border-radius: px-to-rem(2px);
27
27
  @include globaltransition("color background-color border-color fill");
28
28
 
29
29
  &__type {
30
30
  &__active {
31
- background-color: var(--ilo-color-green-light);
31
+ background-color: var(--ilo-color-light-feedback-success-light);
32
32
  }
33
33
 
34
34
  &__info {
35
- background-color: var(--ilo-color-blue-lighter);
35
+ background-color: var(--ilo-color-light-container-bg-subtle);
36
36
  }
37
37
 
38
38
  &__alert {
39
- background-color: var(--ilo-color-red);
39
+ background-color: var(--ilo-color-light-feedback-error-default);
40
40
  }
41
41
 
42
42
  &__subtle {
43
- background-color: var(--ilo-color-red-light);
43
+ background-color: var(--ilo-color-light-feedback-error-light);
44
44
  }
45
45
 
46
46
  &__inactive {
47
- background-color: var(--ilo-color-gray-light);
47
+ background-color: var(--ilo-color-light-container-bg-disabled);
48
48
  }
49
49
  }
50
50
  }