Skip to content

Commit 113bcf5

Browse files
janhasselkodiakhq[bot]
janhassel
and
kodiakhq[bot]
authored
fix: add shadow token, update overlay token (#9812)
* fix: add shadow token, update overlay token * chore: run prettier * fix(tokens): update overlay token in g80 theme Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent c53e708 commit 113bcf5

17 files changed

Lines changed: 41 additions & 8 deletions

File tree

‎packages/components/src/globals/scss/_helper-mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
/// @example @include box-shadow;
5656
/// @group global-helpers
5757
@mixin box-shadow {
58-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
58+
box-shadow: 0 2px 6px $shadow;
5959
}
6060

6161
/// Adds outline styles depending on specific type

‎packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ Array [
318318
"scale",
319319
"selectedLightUI",
320320
"selectedUI",
321+
"shadow",
321322
"size2XLarge",
322323
"sizeLarge",
323324
"sizeMedium",

‎packages/styles/scss/__tests__/theme-test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ Array [
126126
"highlight",
127127
"overlay",
128128
"toggle-off",
129+
"shadow",
129130
"focus",
130131
"focus-inset",
131132
"focus-inverse",

‎packages/styles/scss/utilities/_box-shadow.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8+
@use '../theme';
9+
810
/// Adds box shadow
911
/// @access public
1012
/// @example @include box-shadow;
1113
/// @group utilities
1214
@mixin box-shadow {
13-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
15+
box-shadow: 0 2px 6px theme.$shadow;
1416
}

‎packages/themes/src/g10.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737

3838
// Constants
3939
white,
40+
black,
4041

4142
// Tools
4243
rgba,
@@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04;
182183

183184
export const overlay = overlay01;
184185
export const toggleOff = ui04;
186+
export const shadow = rgba(black, 0.3);
185187

186188
export const buttonPrimary = interactive01;
187189
export const buttonSecondary = interactive02;

‎packages/themes/src/g100.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636

3737
// Constants
3838
white,
39+
black,
3940

4041
// Tools
4142
rgba,
@@ -86,7 +87,7 @@ export const inverseSupport02 = green50;
8687
export const inverseSupport03 = yellow;
8788
export const inverseSupport04 = blue60;
8889

89-
export const overlay01 = rgba(gray100, 0.7);
90+
export const overlay01 = rgba(black, 0.65);
9091

9192
export const danger01 = red60;
9293
export const danger02 = red50;
@@ -181,6 +182,7 @@ export const supportInfoInverse = inverseSupport04;
181182

182183
export const overlay = overlay01;
183184
export const toggleOff = ui04;
185+
export const shadow = rgba(black, 0.8);
184186

185187
export const buttonPrimary = interactive01;
186188
export const buttonSecondary = interactive02;

‎packages/themes/src/g80.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737

3838
// Constants
3939
white,
40+
black,
4041

4142
// Tools
4243
rgba,
@@ -86,8 +87,9 @@ export const supportSuccessInverse = green50;
8687
export const supportWarningInverse = yellow30;
8788
export const supportInfoInverse = blue60;
8889

89-
export const overlay = rgba(gray100, 0.7);
90+
export const overlay = rgba(black, 0.65);
9091
export const toggleOff = gray50;
92+
export const shadow = rgba(black, 0.8);
9193

9294
export const buttonPrimary = blue60;
9395
export const buttonSecondary = gray60;

‎packages/themes/src/g90.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838

3939
// Constants
4040
white,
41+
black,
4142

4243
// Tools
4344
rgba,
@@ -88,7 +89,7 @@ export const inverseSupport02 = green50;
8889
export const inverseSupport03 = yellow;
8990
export const inverseSupport04 = blue60;
9091

91-
export const overlay01 = rgba(gray100, 0.7);
92+
export const overlay01 = rgba(black, 0.65);
9293

9394
export const danger01 = red60;
9495
export const danger02 = red40;
@@ -183,6 +184,7 @@ export const supportInfoInverse = inverseSupport04;
183184

184185
export const overlay = overlay01;
185186
export const toggleOff = ui04;
187+
export const shadow = rgba(black, 0.8);
186188

187189
export const buttonPrimary = interactive01;
188190
export const buttonSecondary = interactive02;

‎packages/themes/src/next/g10.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ export const interactive = blue60;
192192
export const highlight = blue20;
193193
export const overlay = 'rgba(22, 22, 22, 0.5)';
194194
export const toggleOff = gray50;
195+
export const shadow = 'rgba(0, 0, 0, 0.3)';
195196

196197
export {
197198
// Type

‎packages/themes/src/next/g100.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ import {
4141

4242
// Constants
4343
white,
44+
black,
45+
46+
// Tools
47+
rgba,
4448
} from '@carbon/colors';
4549
import { adjustLightness } from '../tools';
4650

@@ -193,8 +197,9 @@ export const skeletonElement = gray80;
193197
// Misc
194198
export const interactive = blue50;
195199
export const highlight = blue20;
196-
export const overlay = 'rgba(22, 22, 22, 0.5)';
200+
export const overlay = rgba(black, 0.65);
197201
export const toggleOff = gray50;
202+
export const shadow = rgba(black, 0.8);
198203

199204
export {
200205
// Type

0 commit comments

Comments
 (0)