@ilo-org/styles 1.6.2 → 1.7.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 (14) hide show
  1. package/css/components/linklist.css +1 -1
  2. package/css/components/profile.css +1 -1
  3. package/css/components/tabs.css +1 -1
  4. package/css/global.css +1 -1
  5. package/css/global.css.map +1 -1
  6. package/css/index.css +2 -2
  7. package/css/index.css.map +1 -1
  8. package/css/monorepo.css +2 -2
  9. package/css/monorepo.css.map +1 -1
  10. package/package.json +1 -1
  11. package/scss/components/_linklist.scss +4 -0
  12. package/scss/components/_profile.scss +5 -1
  13. package/scss/components/_tabs.scss +101 -179
  14. package/scss/theme/_foundation.scss +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ilo-org/styles",
3
3
  "description": "Styles for products using ILO's Design System",
4
- "version": "1.6.2",
4
+ "version": "1.7.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
package/scss/components/_linklist.scss CHANGED
@@ -78,6 +78,10 @@
78
78
  height: px-to-rem(24px);
79
79
  }
80
80
 
81
+ .ilo--link-list--label {
82
+ flex-basis: 90%;
83
+ }
84
+
81
85
  &--link {
82
86
  display: flex;
83
87
  justify-content: space-between;
package/scss/components/_profile.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  flex-flow: row nowrap;
82
82
  align-items: center;
83
83
  gap: spacing(2);
84
- @include globaltransition("color");
84
+ @include globaltransition("color background-color");
85
85
 
86
86
  &:hover,
87
87
  &:focus,
@@ -138,6 +138,10 @@
138
138
  a {
139
139
  color: var(--ilo-color-white);
140
140
  }
141
+
142
+ a:hover {
143
+ background-color: var(--ilo-color-blue-lighter);
144
+ }
141
145
  }
142
146
  }
143
147
  }
package/scss/components/_tabs.scss CHANGED
@@ -4,212 +4,134 @@
4
4
  @import "../mixins";
5
5
 
6
6
  .ilo--tabs {
7
- border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
8
- border-left: px-to-rem(3px) solid $color-base-neutrals-lighter;
9
- border-right: px-to-rem(3px) solid $color-base-neutrals-lighter;
10
-
11
- &:not(.tabs--js) {
12
- .ilo--tabs--selection {
13
- margin-bottom: spacing(6);
14
-
15
- &--button {
16
- background: map-get($color, "link", "background", "default");
17
- border-bottom: $widths-border-sm solid
18
- map-get($color, "link", "underline", "default");
19
- color: map-get($color, "link", "text", "default");
20
- font-size: inherit;
21
- font-weight: inherit;
22
- line-height: inherit;
23
- text-decoration: none;
24
- @include globaltransition("color, background-color, border-color");
25
-
26
- &:visited {
27
- background: map-get($color, "link", "background", "visited");
28
- border-bottom: $widths-border-sm solid
29
- map-get($color, "link", "underline", "visited");
30
- color: map-get($color, "link", "text", "visited");
31
- }
32
-
33
- &:hover {
34
- background: map-get($color, "link", "background", "hover");
35
- border-bottom: $widths-border-med solid
36
- map-get($color, "link", "underline", "hover");
37
- color: map-get($color, "link", "text", "hover");
38
- text-decoration: none;
39
- @include globaltransition("color, background-color, border-color");
40
- }
41
-
42
- &:active {
43
- background: map-get($color, "link", "background", "default");
44
- border-bottom: $widths-border-sm solid
45
- map-get($color, "link", "underline", "default");
46
- color: map-get($color, "link", "text", "default");
47
- outline: none;
48
- }
49
-
50
- &:focus {
51
- background: map-get($color, "link", "background", "default");
52
- border-bottom: $widths-border-sm solid
53
- map-get($color, "link", "underline", "default");
54
- color: map-get($color, "link", "text", "default");
55
- outline: none;
56
- }
57
- }
58
- }
7
+ &__theme__light {
8
+ --ilo-tabs-selection-bg-color: var(--ilo-color-white);
9
+ --ilo-tabs-btn-bg-color: var(--ilo-color-gray-light);
10
+ --ilo-tabs-btn-bg-color-hover: var(--ilo-color-blue-lighter);
11
+ --ilo-tabs-btn-bg-color-selected: var(--ilo-color-white);
12
+ --ilo-tabs-btn-border-top-hover: var(--ilo-color-blue);
13
+ --ilo-tabs-btn-border-top-selected: var(--ilo-color-blue-dark);
14
+ --ilo-tabs-btn-color: var(--ilo-color-blue-dark);
15
+ --ilo-tabs-btn-color-hover: var(--ilo-color-blue);
16
+ --ilo-tabs-content-bg-color: var(--ilo-color-white);
59
17
  }
60
18
 
61
- &.tabs--js {
62
- .ilo--tabs--selection {
63
- --tabscount: 1;
64
- display: block;
65
-
66
- &--button {
67
- align-items: center;
68
- background-color: $color-base-neutrals-lighter;
69
- border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;
70
- color: $color-ux-labels-actionable;
71
- font-family: var(--ilo-fonts-display);
72
- font-weight: 600;
73
- display: flex;
74
- gap: spacing(1);
75
- height: px-to-rem(60px);
76
- justify-content: flex-start;
77
- padding-left: spacing(2);
78
- padding-right: spacing(6);
79
- text-decoration: none;
80
- @include font-styles("label-medium");
81
- @include globaltransition("color, background-color, border-color");
82
-
83
- &[aria-selected="true"] {
84
- background-color: $color-base-neutrals-white;
85
- border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
86
- pointer-events: none;
87
- @include globaltransition("color, background-color, border-color");
88
- }
89
-
90
- &[aria-selected="false"]:not(:hover) {
91
- border-top: px-to-rem(3px) solid transparent;
92
- }
19
+ &__theme__dark {
20
+ --ilo-tabs-selection-bg-color: var(--ilo-color-blue-dark);
21
+ --ilo-tabs-btn-bg-color: var(--ilo-color-blue-ramp);
22
+ --ilo-tabs-btn-bg-color-hover: var(--ilo-color-blue-dark);
23
+ --ilo-tabs-btn-bg-color-selected: var(--ilo-color-blue-dark);
24
+ --ilo-tabs-btn-border-top-selected: var(--ilo-color-white);
25
+ --ilo-tabs-btn-color: var(--ilo-color-white);
26
+ --ilo-tabs-btn-color-hover: var(--ilo-color-white);
27
+ --ilo-tabs-content-bg-color: var(--ilo-color-blue-dark);
28
+ }
93
29
 
94
- &.icon {
95
- .ilo--icon {
96
- height: px-to-rem(16px);
97
- order: 1;
98
- width: px-to-rem(16px);
99
- }
100
-
101
- .ilo--tabs--selection--label {
102
- order: 2;
103
- flex: 1 1;
104
- }
105
- }
30
+ * {
31
+ @include globaltransition("color, background-color, border-color");
32
+ }
106
33
 
107
- &:hover,
108
- &[aria-selected="true"]:hover {
109
- background-color: $color-base-blue-light;
110
- color: $color-base-blue-medium;
111
- outline: none;
112
- border-top: px-to-rem(3px) solid $color-base-blue-medium;
113
- @include globaltransition("color, background-color, border-color");
114
- }
34
+ .ilo--tabs--selection {
35
+ --tabscount: 1;
36
+ display: block;
37
+ background-color: var(--ilo-tabs-selection-bg-color);
38
+
39
+ &--button {
40
+ align-items: center;
41
+ background-color: var(--ilo-tabs-btn-bg-color);
42
+ border-top-width: px-to-rem(3px);
43
+ border-top-style: solid;
44
+ border-top-color: transparent;
45
+ color: var(--ilo-tabs-btn-color);
46
+ font-family: var(--ilo-fonts-display);
47
+ font-weight: 600;
48
+ display: flex;
49
+ gap: spacing(1);
50
+ height: px-to-rem(60px);
51
+ justify-content: flex-start;
52
+ padding-left: spacing(2);
53
+ padding-right: spacing(6);
54
+ text-decoration: none;
55
+ @include typography("highlight-large");
56
+
57
+ // Selected
58
+ &[aria-selected="true"] {
59
+ background-color: var(--ilo-tabs-btn-bg-color-selected);
60
+ border-top-color: var(--ilo-tabs-btn-border-top-selected);
115
61
  }
116
62
 
117
- &--label {
118
- overflow: hidden;
119
- padding-top: spacing(1);
120
- white-space: nowrap;
121
- text-overflow: ellipsis;
63
+ &:hover {
64
+ background-color: var(--ilo-tabs-btn-bg-color-hover);
65
+ border-top-color: var(--ilo-tabs-btn-border-top-hover);
66
+ color: var(--ilo-tabs-btn-color-hover);
122
67
  }
123
68
 
124
- &--item {
125
- overflow: hidden;
126
- display: block;
127
- width: 100%;
128
-
129
- &:last-of-type {
130
- .ilo--tabs--selection--button {
131
- border-bottom: none;
132
- border-right: none;
133
- }
134
- }
69
+ &[aria-selected="true"] {
70
+ pointer-events: none;
135
71
  }
136
- }
137
72
 
138
- .ilo--tabs--content {
139
- background-color: $color-base-neutrals-white;
140
- padding: spacing(10) spacing(6) spacing(14) spacing(6);
141
-
142
- [aria-expanded="false"] {
143
- display: none;
144
- }
73
+ &.icon {
74
+ .ilo--icon {
75
+ height: px-to-rem(16px);
76
+ order: 1;
77
+ width: px-to-rem(16px);
78
+ }
145
79
 
146
- [aria-expanded="true"] {
147
- display: block;
80
+ .ilo--tabs--selection--label {
81
+ order: 2;
82
+ flex: 1 1;
83
+ }
148
84
  }
149
85
  }
150
86
 
151
- @include breakpoint("md") {
152
- .ilo--tabs--content {
153
- padding: spacing(10) spacing(16) spacing(16) spacing(16);
154
- }
87
+ &--label {
88
+ overflow: hidden;
89
+ padding-top: spacing(1);
90
+ white-space: nowrap;
91
+ text-overflow: ellipsis;
92
+ }
155
93
 
156
- .ilo--tabs--selection {
157
- display: flex;
158
- max-width: 100%;
159
- overflow-x: hidden;
160
- overflow-y: hidden;
94
+ &--item {
95
+ overflow: hidden;
96
+ display: block;
97
+ width: 100%;
161
98
 
162
- &--button {
99
+ &:last-of-type {
100
+ .ilo--tabs--selection--button {
163
101
  border-bottom: none;
164
- border-right: px-to-rem(5px) solid $color-base-neutrals-white;
165
- }
166
-
167
- &--item {
168
- width: min(calc(var(--tabscount) / 1 * 100%), 100%);
169
- }
170
- }
171
- }
172
-
173
- @include breakpoint("lg") {
174
- .ilo--tabs--selection {
175
- &--item {
176
- width: min(calc(var(--tabscount) / 1 * 100%), 100%);
102
+ border-right: none;
177
103
  }
178
104
  }
179
105
  }
180
106
  }
181
- }
182
107
 
183
- // This was proposed by base theme but isn't implemented in the design system yet
184
- .ilo--tabs--secondary {
185
- display: flex;
186
- flex-wrap: wrap;
187
- margin-block: 2rem;
188
- gap: 10px;
108
+ .ilo--tabs--content {
109
+ background-color: var(--ilo-tabs-content-bg-color);
110
+ padding: spacing(10) spacing(6) spacing(14) spacing(6);
189
111
 
190
- .ilo--tabs--selection--button {
191
- display: block;
192
- padding: 0.2em 1em;
193
- font-size: 16px;
194
- font-weight: 600;
195
- color: #230050;
196
- text-decoration: none;
112
+ [aria-expanded="false"] {
113
+ display: none;
114
+ }
197
115
 
198
- &[aria-selected="false"] {
199
- border-bottom: 2px solid transparent;
200
- background-color: var(--ilo-color-background-highlight);
116
+ [aria-expanded="true"] {
117
+ display: block;
118
+ }
119
+ }
201
120
 
202
- &:hover {
203
- color: var(--ilo-color-blue);
204
- border-bottom-color: var(--ilo-color-blue);
205
- background-color: var(--ilo-color-background-hover);
206
- }
121
+ @include breakpoint("md") {
122
+ .ilo--tabs--content {
123
+ padding: spacing(10) spacing(16) spacing(16) spacing(16);
207
124
  }
208
125
 
209
- &[aria-selected="true"] {
210
- color: var(--ilo-color-blue-dark);
211
- border-bottom: 2px solid var(--ilo-color-blue-dark);
212
- pointer-events: none;
126
+ .ilo--tabs--selection {
127
+ display: flex;
128
+ flex-flow: row nowrap;
129
+ gap: spacing(1);
130
+ max-width: 100%;
131
+
132
+ &--item {
133
+ width: min(calc(var(--tabscount) / 1 * 100%), 100%);
134
+ }
213
135
  }
214
136
  }
215
137
  }
package/scss/theme/_foundation.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  --ilo-color-blue-light: rgba(190, 220, 250, 1);
15
15
  --ilo-color-blue-dark: rgba(35, 0, 80, 1);
16
16
  --ilo-color-blue-medium: rgba(210, 213, 242, 1);
17
- --ilo-color-blue-ramp: rgba(30, 45, 190, 0.4);
17
+ --ilo-color-blue-ramp: rgba(33, 18, 124, 1);
18
18
  --ilo-color-blue-dark-ramp: rgba(35, 0, 80, 0.5);
19
19
  --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
20
20
  --ilo-color-gray-accessible: rgba(109, 109, 109, 1);