@ilo-org/styles 1.7.2 → 1.7.3

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 (8) hide show
  1. package/css/components/callout.css +1 -1
  2. package/css/global.css.map +1 -1
  3. package/css/index.css +1 -1
  4. package/css/index.css.map +1 -1
  5. package/css/monorepo.css +1 -1
  6. package/css/monorepo.css.map +1 -1
  7. package/package.json +3 -3
  8. package/scss/components/_callout.scss +60 -61
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.7.2",
4
+ "version": "1.7.3",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,9 +38,9 @@
38
38
  "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
39
39
  "license": "Apache-2.0",
40
40
  "dependencies": {
41
- "@ilo-org/themes": "0.9.1",
42
41
  "@ilo-org/fonts": "1.0.0",
43
- "@ilo-org/icons": "2.1.0"
42
+ "@ilo-org/icons": "2.1.0",
43
+ "@ilo-org/themes": "0.9.1"
44
44
  },
45
45
  "devDependencies": {
46
46
  "cssnano": "^7.0.6",
package/scss/components/_callout.scss CHANGED
@@ -8,13 +8,13 @@
8
8
  transition: max-height 225ms ease-out;
9
9
  $callout: &;
10
10
 
11
- &--collapse:not(.ilo--callout--open) {
12
- max-height: 64px;
11
+ &__collapse {
12
+ max-height: px-to-rem(64px);
13
13
  overflow: hidden;
14
14
  }
15
15
 
16
- &--open {
17
- max-height: 300px;
16
+ &__open {
17
+ max-height: px-to-rem(300px);
18
18
  overflow: hidden;
19
19
 
20
20
  #{$callout}--toggle--icon {
@@ -22,7 +22,39 @@
22
22
  }
23
23
  }
24
24
 
25
- &__sidebar {
25
+ &__error {
26
+ background: var(--ilo-color-red-ramp);
27
+
28
+ #{$callout}--sidebar {
29
+ background: var(--ilo-color-red);
30
+ }
31
+ }
32
+
33
+ &__info {
34
+ background: var(--ilo-color-blue-light);
35
+
36
+ #{$callout}--sidebar {
37
+ background: var(--ilo-color-blue);
38
+ }
39
+ }
40
+
41
+ &__success {
42
+ background: var(--ilo-color-green-ramp);
43
+
44
+ #{$callout}--sidebar {
45
+ background: var(--ilo-color-green);
46
+ }
47
+ }
48
+
49
+ &__warning {
50
+ background: var(--ilo-color-yellow-ramp);
51
+
52
+ #{$callout}--sidebar {
53
+ background: var(--ilo-color-yellow);
54
+ }
55
+ }
56
+
57
+ &--sidebar {
26
58
  display: flex;
27
59
  flex-direction: column;
28
60
  align-items: center;
@@ -34,43 +66,40 @@
34
66
  }
35
67
  }
36
68
 
37
- &__content {
69
+ &--content {
70
+ color: var(--ilo-color-gray-charcoal);
38
71
  padding: spacing(6);
39
72
  width: 100%;
40
73
  font-size: px-to-rem(14px);
41
74
  }
42
75
 
43
- &__header {
76
+ &--header {
44
77
  display: flex;
45
78
  justify-content: space-between;
46
79
  padding-block-end: spacing(3);
47
80
  }
48
81
 
49
- &__title {
50
- @include font-styles("nav-bold-b");
51
- font-family: var(--ilo-fonts-display);
82
+ &--title {
83
+ @include typography("highlight-medium");
52
84
  font-weight: 700;
53
85
  }
54
86
 
55
- &__description {
87
+ &--description {
56
88
  font-weight: 400;
57
89
  }
58
90
 
59
91
  &--toggle {
60
- @include font-styles("nav-bold-b");
61
-
92
+ @include typography("highlight-medium-bold");
62
93
  background: none;
63
94
  border: none;
64
95
  color: var(--ilo-color-blue-dark);
65
96
  cursor: pointer;
66
- font-family: var(--ilo-fonts-display);
67
97
  font-weight: 500;
68
98
  padding-inline-end: spacing(8);
69
99
  position: relative;
70
100
 
71
- &__icon {
101
+ &--icon {
72
102
  @include icon("chevron_down", var(--ilo-color-blue-dark));
73
-
74
103
  background-position: right;
75
104
  background-repeat: no-repeat;
76
105
  display: inline-block;
@@ -84,63 +113,33 @@
84
113
  }
85
114
  }
86
115
 
87
- &__footer {
116
+ &--footer {
88
117
  padding-block-start: spacing(5);
89
118
  }
90
119
 
91
- .icon {
120
+ &--icon {
92
121
  background-repeat: no-repeat;
93
122
  background-size: contain;
94
123
  display: block;
95
124
  height: px-to-rem(24px);
96
125
  width: px-to-rem(24px);
97
126
 
98
- &__error {
99
- @include icon("notification_error", var(--ilo-color-white));
100
- }
127
+ &__alert {
128
+ &__error {
129
+ @include icon("notification_error", var(--ilo-color-white));
130
+ }
101
131
 
102
- &__info {
103
- @include icon("notification_info", var(--ilo-color-white));
104
- }
105
-
106
- &__success {
107
- @include icon("notification_success", var(--ilo-color-white));
108
- }
109
-
110
- &__warning {
111
- @include icon("notification_warning", var(--ilo-color-white));
112
- }
113
- }
114
-
115
- &__error {
116
- background: var(--ilo-color-red-ramp);
117
-
118
- #{$callout}__sidebar {
119
- background: var(--ilo-color-red);
120
- }
121
- }
122
-
123
- &__info {
124
- background: var(--ilo-color-blue-ramp);
125
-
126
- #{$callout}__sidebar {
127
- background: var(--ilo-color-blue);
128
- }
129
- }
130
-
131
- &__success {
132
- background: var(--ilo-ramp-green);
132
+ &__info {
133
+ @include icon("notification_info", var(--ilo-color-white));
134
+ }
133
135
 
134
- #{$callout}__sidebar {
135
- background: var(--ilo-color-green);
136
- }
137
- }
136
+ &__success {
137
+ @include icon("notification_success", var(--ilo-color-white));
138
+ }
138
139
 
139
- &__warning {
140
- background: var(--ilo-color-yellow-ramp);
141
-
142
- #{$callout}__sidebar {
143
- background: var(--ilo-color-yellow);
140
+ &__warning {
141
+ @include icon("notification_warning", var(--ilo-color-white));
142
+ }
144
143
  }
145
144
  }
146
145
  }