Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add shadow token, update overlay token #9812

Merged
merged 4 commits into from
Oct 7, 2021
Merged

fix: add shadow token, update overlay token #9812

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef5ee52
fix: add shadow token, update overlay token
janhassel Oct 6, 2021
953950a
chore: run prettier
janhassel Oct 6, 2021
6b73acc
fix(tokens): update overlay token in g80 theme
janhassel Oct 6, 2021
5895656
Merge branch 'main' into 9802
kodiakhq[bot] Oct 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/globals/scss/_helper-mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
/// @example @include box-shadow;
/// @group global-helpers
@mixin box-shadow {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px $shadow;
}

/// Adds outline styles depending on specific type
Expand Down
1 change: 1 addition & 0 deletions packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,7 @@ Array [
"scale",
"selectedLightUI",
"selectedUI",
"shadow",
"size2XLarge",
"sizeLarge",
"sizeMedium",
Expand Down
1 change: 1 addition & 0 deletions packages/styles/scss/__tests__/theme-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ Array [
"highlight",
"overlay",
"toggle-off",
"shadow",
"focus",
"focus-inset",
"focus-inverse",
Expand Down
4 changes: 3 additions & 1 deletion packages/styles/scss/utilities/_box-shadow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
// LICENSE file in the root directory of this source tree.
//

@use '../theme';

/// Adds box shadow
/// @access public
/// @example @include box-shadow;
/// @group utilities
@mixin box-shadow {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px theme.$shadow;
}
2 changes: 2 additions & 0 deletions packages/themes/src/g10.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {

// Constants
white,
black,

// Tools
rgba,
Expand Down Expand Up @@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04;

export const overlay = overlay01;
export const toggleOff = ui04;
export const shadow = rgba(black, 0.3);

export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
Expand Down
4 changes: 3 additions & 1 deletion packages/themes/src/g100.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {

// Constants
white,
black,

// Tools
rgba,
Expand Down Expand Up @@ -86,7 +87,7 @@ export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;

export const overlay01 = rgba(gray100, 0.7);
export const overlay01 = rgba(black, 0.65);

export const danger01 = red60;
export const danger02 = red50;
Expand Down Expand Up @@ -181,6 +182,7 @@ export const supportInfoInverse = inverseSupport04;

export const overlay = overlay01;
export const toggleOff = ui04;
export const shadow = rgba(black, 0.8);

export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
Expand Down
4 changes: 3 additions & 1 deletion packages/themes/src/g80.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {

// Constants
white,
black,

// Tools
rgba,
Expand Down Expand Up @@ -86,8 +87,9 @@ export const supportSuccessInverse = green50;
export const supportWarningInverse = yellow30;
export const supportInfoInverse = blue60;

export const overlay = rgba(gray100, 0.7);
export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
export const shadow = rgba(black, 0.8);

export const buttonPrimary = blue60;
export const buttonSecondary = gray60;
Expand Down
4 changes: 3 additions & 1 deletion packages/themes/src/g90.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {

// Constants
white,
black,

// Tools
rgba,
Expand Down Expand Up @@ -88,7 +89,7 @@ export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;

export const overlay01 = rgba(gray100, 0.7);
export const overlay01 = rgba(black, 0.65);

export const danger01 = red60;
export const danger02 = red40;
Expand Down Expand Up @@ -183,6 +184,7 @@ export const supportInfoInverse = inverseSupport04;

export const overlay = overlay01;
export const toggleOff = ui04;
export const shadow = rgba(black, 0.8);

export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
Expand Down
1 change: 1 addition & 0 deletions packages/themes/src/next/g10.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ export const interactive = blue60;
export const highlight = blue20;
export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
export const shadow = 'rgba(0, 0, 0, 0.3)';

export {
// Type
Expand Down
7 changes: 6 additions & 1 deletion packages/themes/src/next/g100.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ import {

// Constants
white,
black,

// Tools
rgba,
} from '@carbon/colors';
import { adjustLightness } from '../tools';

Expand Down Expand Up @@ -193,8 +197,9 @@ export const skeletonElement = gray80;
// Misc
export const interactive = blue50;
export const highlight = blue20;
export const overlay = 'rgba(22, 22, 22, 0.5)';
export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
export const shadow = rgba(black, 0.8);

export {
// Type
Expand Down
7 changes: 6 additions & 1 deletion packages/themes/src/next/g90.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ import {

// Constants
white,
black,

// Tools
rgba,
} from '@carbon/colors';
import { adjustLightness } from '../tools';

Expand Down Expand Up @@ -192,8 +196,9 @@ export const skeletonElement = gray70;
// Misc
export const interactive = blue50;
export const highlight = blue70;
export const overlay = 'rgba(22, 22, 22, 0.7)';
export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
export const shadow = rgba(black, 0.8);

export {
// Type
Expand Down
1 change: 1 addition & 0 deletions packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,7 @@ Array [
"highlight",
"overlay",
"toggle-off",
"shadow",
"focus",
"focus-inset",
"focus-inverse",
Expand Down
3 changes: 3 additions & 0 deletions packages/themes/src/next/tokens/v11TokenGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,9 @@ export const group = TokenGroup.create({
{
name: 'toggle-off',
},
{
name: 'shadow',
},

focus,
skeleton,
Expand Down
1 change: 1 addition & 0 deletions packages/themes/src/next/white.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ export const interactive = blue60;
export const highlight = blue20;
export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
export const shadow = 'rgba(0, 0, 0, 0.3)';

// Type
export {
Expand Down
2 changes: 2 additions & 0 deletions packages/themes/src/tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ const colors = [

'overlay',
'toggleOff',
'shadow',

'buttonPrimary',
'buttonSecondary',
Expand Down Expand Up @@ -346,6 +347,7 @@ export const unstable__meta = {

'overlay',
'toggleOff',
'shadow',

'buttonPrimary',
'buttonSecondary',
Expand Down
3 changes: 2 additions & 1 deletion packages/themes/src/v9.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import { adjustLightness } from './tools';
import { white, red60, gray40 } from '@carbon/colors';
import { white, red60, gray40, black, rgba } from '@carbon/colors';

export const interactive01 = '#3d70b2';
export const interactive02 = '#4d5358';
Expand Down Expand Up @@ -147,6 +147,7 @@ export const supportInfoInverse = inverseSupport04;

export const overlay = overlay01;
export const toggleOff = ui04;
export const shadow = rgba(black, 0.3);

export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
Expand Down
2 changes: 2 additions & 0 deletions packages/themes/src/white.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {

// Constants
white,
black,

// Tools
rgba,
Expand Down Expand Up @@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04;

export const overlay = overlay01;
export const toggleOff = ui04;
export const shadow = rgba(black, 0.3);

export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
Expand Down