Skip to content

Commit 36fcaaf

Browse files
janhasselkodiakhq[bot]
janhassel
and
kodiakhq[bot]
authored
feat(notification): support component tokens (#7808)
* feat(notification): use component tokens for inline-notification * feat(notification): use component tokens for toast-notification * chore(storybook): emit notification component tokens Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 7dd6a3f commit 36fcaaf

File tree

5 files changed

+174
-34
lines changed

5 files changed

+174
-34
lines changed

‎packages/components/src/components/notification/_inline-notification.scss‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@
1212
@import '../../globals/scss/vars';
1313
@import '../../globals/scss/helper-mixins';
1414
@import '../../globals/scss/layout';
15+
@import '../../globals/scss/component-tokens';
1516
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
1617
@import '../../globals/scss/css--reset';
1718
@import 'mixins';
19+
@import 'tokens';
1820

1921
/// Inline notification styles
2022
/// @access private
@@ -78,8 +80,7 @@
7880
}
7981

8082
.#{$prefix}--inline-notification--low-contrast {
81-
// Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
82-
color: map-get($carbon--theme--white, 'text-01');
83+
color: $text-01;
8384

8485
&::before {
8586
position: absolute;
@@ -103,7 +104,7 @@
103104
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
104105
@include notification--experimental(
105106
$support-01,
106-
$notification-error-background-color
107+
get-token-value($notification-colors, 'notification-background-error')
107108
);
108109

109110
&::before {
@@ -118,7 +119,7 @@
118119
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
119120
@include notification--experimental(
120121
$support-02,
121-
$notification-success-background-color
122+
get-token-value($notification-colors, 'notification-background-success')
122123
);
123124

124125
&::before {
@@ -135,7 +136,7 @@
135136
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
136137
@include notification--experimental(
137138
$support-04,
138-
$notification-info-background-color
139+
get-token-value($notification-colors, 'notification-background-info')
139140
);
140141

141142
&::before {
@@ -152,7 +153,7 @@
152153
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
153154
@include notification--experimental(
154155
$support-03,
155-
$notification-warning-background-color
156+
get-token-value($notification-colors, 'notification-background-warning')
156157
);
157158

158159
&::before {
@@ -205,13 +206,17 @@
205206
height: rem(32px);
206207
margin-bottom: $carbon--spacing-03;
207208
margin-left: $carbon--spacing-08;
208-
color: $inverse-link;
209209

210210
@include carbon--breakpoint(md) {
211211
margin: $carbon--spacing-03 0;
212212
}
213213
}
214214

215+
.#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
216+
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
217+
color: $inverse-link;
218+
}
219+
215220
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
216221
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
217222
background-color: $inverse-hover-ui;
@@ -221,7 +226,10 @@
221226
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
222227
.#{$prefix}--inline-notification--low-contrast
223228
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
224-
background-color: $carbon--white-0;
229+
background-color: get-token-value(
230+
$notification-colors,
231+
'notification-action-hover'
232+
);
225233
}
226234

227235
.#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
@@ -295,21 +303,7 @@
295303
.#{$prefix}--inline-notification--low-contrast
296304
.#{$prefix}--inline-notification__close-button
297305
.#{$prefix}--inline-notification__close-icon {
298-
fill: map-get($carbon--theme--white, 'text-01');
299-
}
300-
301-
.#{$prefix}--inline-notification--low-contrast
302-
.#{$prefix}--inline-notification__action-button {
303-
color: $interactive-01;
304-
305-
&:active {
306-
color: $interactive-01;
307-
}
308-
309-
&:active,
310-
&:hover {
311-
background-color: $carbon--white-0;
312-
}
306+
fill: $icon-01;
313307
}
314308
}
315309

‎packages/components/src/components/notification/_toast-notification.scss‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111

1212
@import '../../globals/scss/vars';
1313
@import '../../globals/scss/layout';
14+
@import '../../globals/scss/component-tokens';
1415
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
1516
@import '../../globals/scss/helper-mixins';
1617
@import '../../globals/scss/css--reset';
1718
@import 'mixins';
19+
@import 'tokens';
1820

1921
/// Toast notification styles
2022
/// @access private
@@ -71,8 +73,7 @@
7173
}
7274

7375
.#{$prefix}--toast-notification--low-contrast {
74-
// Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
75-
color: map-get($carbon--theme--white, 'text-01');
76+
color: $text-01;
7677
}
7778

7879
.#{$prefix}--toast-notification--error {
@@ -82,7 +83,7 @@
8283
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
8384
@include notification--experimental(
8485
$support-01,
85-
$notification-error-background-color
86+
get-token-value($notification-colors, 'notification-background-error')
8687
);
8788
}
8889

@@ -93,7 +94,7 @@
9394
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
9495
@include notification--experimental(
9596
$support-02,
96-
$notification-success-background-color
97+
get-token-value($notification-colors, 'notification-background-success')
9798
);
9899
}
99100

@@ -106,7 +107,7 @@
106107
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
107108
@include notification--experimental(
108109
$support-04,
109-
$notification-info-background-color
110+
get-token-value($notification-colors, 'notification-background-info')
110111
);
111112
}
112113

@@ -119,7 +120,7 @@
119120
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
120121
@include notification--experimental(
121122
$support-03,
122-
$notification-warning-background-color
123+
get-token-value($notification-colors, 'notification-background-warning')
123124
);
124125
}
125126

@@ -181,7 +182,7 @@
181182
.#{$prefix}--toast-notification--low-contrast
182183
.#{$prefix}--toast-notification__close-button
183184
.#{$prefix}--toast-notification__close-icon {
184-
fill: map-get($carbon--theme--white, 'text-01');
185+
fill: $icon-01;
185186
}
186187

187188
.#{$prefix}--toast-notification__title {
@@ -203,8 +204,7 @@
203204

204205
.#{$prefix}--toast-notification--low-contrast
205206
.#{$prefix}--toast-notification__subtitle {
206-
// Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
207-
color: map-get($carbon--theme--white, 'text-01');
207+
color: $text-01;
208208
}
209209

210210
.#{$prefix}--toast-notification__caption {
@@ -216,8 +216,7 @@
216216

217217
.#{$prefix}--toast-notification--low-contrast
218218
.#{$prefix}--toast-notification__caption {
219-
// Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
220-
color: map-get($carbon--theme--white, 'text-01');
219+
color: $text-01;
221220
}
222221
}
223222

‎packages/components/src/components/notification/_tokens.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
//
2+
// Copyright IBM Corp. 2021
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@import '../../globals/scss/component-tokens';
9+
@import '../../globals/scss/vendor/@carbon/elements/scss/colors/colors';
10+
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
11+
12+
// prettier-ignore
13+
$notification-colors: (
14+
'notification-background-error': (
15+
fallback: $carbon__red-10,
16+
values: (
17+
(
18+
theme: $carbon--theme--white,
19+
value: $carbon__red-10,
20+
),
21+
(
22+
theme: $carbon--theme--g10,
23+
value: $carbon__red-10,
24+
),
25+
(
26+
theme: $carbon--theme--g90,
27+
value: $ui-01,
28+
),
29+
(
30+
theme: $carbon--theme--g100,
31+
value: $ui-01,
32+
),
33+
(
34+
theme: $carbon--theme--v9,
35+
value: $carbon__red-10,
36+
),
37+
),
38+
),
39+
'notification-background-success': (
40+
fallback: $carbon__green-10,
41+
values: (
42+
(
43+
theme: $carbon--theme--white,
44+
value: $carbon__green-10,
45+
),
46+
(
47+
theme: $carbon--theme--g10,
48+
value: $carbon__green-10,
49+
),
50+
(
51+
theme: $carbon--theme--g90,
52+
value: $ui-01,
53+
),
54+
(
55+
theme: $carbon--theme--g100,
56+
value: $ui-01,
57+
),
58+
(
59+
theme: $carbon--theme--v9,
60+
value: $carbon__green-10,
61+
),
62+
),
63+
),
64+
'notification-background-info': (
65+
fallback: $carbon__blue-10,
66+
values: (
67+
(
68+
theme: $carbon--theme--white,
69+
value: $carbon__blue-10,
70+
),
71+
(
72+
theme: $carbon--theme--g10,
73+
value: $carbon__blue-10,
74+
),
75+
(
76+
theme: $carbon--theme--g90,
77+
value: $ui-01,
78+
),
79+
(
80+
theme: $carbon--theme--g100,
81+
value: $ui-01,
82+
),
83+
(
84+
theme: $carbon--theme--v9,
85+
value: $carbon__blue-10,
86+
),
87+
),
88+
),
89+
'notification-background-warning': (
90+
fallback: mix($carbon__yellow-30, $carbon__white-0, 15%),
91+
values: (
92+
(
93+
theme: $carbon--theme--white,
94+
value: mix($carbon__yellow-30, $carbon__white-0, 15%),
95+
),
96+
(
97+
theme: $carbon--theme--g10,
98+
value: mix($carbon__yellow-30, $carbon__white-0, 15%),
99+
),
100+
(
101+
theme: $carbon--theme--g90,
102+
value: $ui-01,
103+
),
104+
(
105+
theme: $carbon--theme--g100,
106+
value: $ui-01,
107+
),
108+
(
109+
theme: $carbon--theme--v9,
110+
value: mix($carbon__yellow-30, $carbon__white-0, 15%),
111+
),
112+
),
113+
),
114+
'notification-action-hover': (
115+
fallback: $carbon__white-0,
116+
values: (
117+
(
118+
theme: $carbon--theme--white,
119+
value: $carbon__white-0,
120+
),
121+
(
122+
theme: $carbon--theme--g10,
123+
value: $carbon__white-0,
124+
),
125+
(
126+
theme: $carbon--theme--g90,
127+
value: $hover-ui,
128+
),
129+
(
130+
theme: $carbon--theme--g100,
131+
value: $hover-ui,
132+
),
133+
(
134+
theme: $carbon--theme--v9,
135+
value: $carbon__white-0,
136+
),
137+
),
138+
),
139+
);

‎packages/components/src/globals/scss/_theme-tokens.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,16 +269,19 @@ $modal-footer-background-color: $ui-03 !default;
269269
/// @type Color
270270
/// @access public
271271
/// @group notification
272+
/// @deprecated
272273
$notification-info-background-color: $ibm-color__blue-10 !default;
273274

274275
/// @type Color
275276
/// @access public
276277
/// @group notification
278+
/// @deprecated
277279
$notification-error-background-color: $ibm-color__red-10 !default;
278280

279281
/// @type Color
280282
/// @access public
281283
/// @group notification
284+
/// @deprecated
282285
$notification-warning-background-color: mix(
283286
$ibm-color__yellow-30,
284287
$ibm-color__white-0,
@@ -288,6 +291,7 @@ $notification-warning-background-color: mix(
288291
/// @type Color
289292
/// @access public
290293
/// @group notification
294+
/// @deprecated
291295
$notification-success-background-color: $ibm-color__green-10 !default;
292296

293297
// Progress Indicator

‎packages/react/.storybook/styles.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,24 +79,28 @@ $prefix: 'bx';
7979
:root {
8080
@include carbon--theme($carbon--theme--white, true) {
8181
@include emit-component-tokens($tag-colors);
82+
@include emit-component-tokens($notification-colors);
8283
}
8384
}
8485

8586
:root[storybook-carbon-theme='g10'] {
8687
@include carbon--theme($carbon--theme--g10, true) {
8788
@include emit-component-tokens($tag-colors);
89+
@include emit-component-tokens($notification-colors);
8890
}
8991
}
9092

9193
:root[storybook-carbon-theme='g90'] {
9294
@include carbon--theme($carbon--theme--g90, true) {
9395
@include emit-component-tokens($tag-colors);
96+
@include emit-component-tokens($notification-colors);
9497
}
9598
}
9699

97100
:root[storybook-carbon-theme='g100'] {
98101
@include carbon--theme($carbon--theme--g100, true) {
99102
@include emit-component-tokens($tag-colors);
103+
@include emit-component-tokens($notification-colors);
100104
}
101105
}
102106
}

0 commit comments

Comments
 (0)