Skip to content

Commit

Permalink
feat(Tile): update Tile AI styles to phase 2 spec (#15596)
Browse files Browse the repository at this point in the history 
* feat(Tile): update Tile AI styles to phase 2 spec

* chore(Tile): add sasdocs, mark tokens for deprecation

* fix(Tile): update selected state

* chore(Button): remove test story

* fix(Tile): adjust hover gradient
  • Loading branch information
@tw15egan
tw15egan authored Jan 26, 2024
1 parent 7b5be4f commit 8114072
Show file tree
Hide file tree
Showing 13 changed files with 143 additions and 109 deletions.
3 changes: 3 additions & 0 deletions packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
exports[`Public API should only change with a semver change 1`] = `
Array [
"aiAuraEnd",
"aiAuraHoverBackground",
"aiAuraHoverEnd",
"aiAuraHoverStart",
"aiAuraStart",
"aiBorderEnd",
"aiBorderStart",
Expand Down
19 changes: 1 addition & 18 deletions packages/react/src/components/Button/Button.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React from 'react';
import { action } from '@storybook/addon-actions';
import { Add, FitToScreen } from '@carbon/icons-react';
import { Add } from '@carbon/icons-react';
import { default as Button, ButtonSkeleton } from '../Button';
import ButtonSet from '../ButtonSet';
import mdx from './Button.mdx';
Expand Down Expand Up @@ -63,23 +63,6 @@ export const Default = (args) => {
return <Button {...args}>Button</Button>;
};

export const ButtonTest = () => {
const sizes = ['sm', 'md', 'lg', 'xl'];
return (
<div>
{sizes.map((size) => (
<div key={size} className="container">
<Button size={size} renderIcon={FitToScreen}>
<span>label</span>
</Button>
<div className={`ruler top ${size}`} />
<div className={`ruler bottom ${size}`} />
</div>
))}
</div>
);
};

export const Secondary = (args) => {
return (
<Button kind="secondary" {...args}>
Expand Down
3 changes: 3 additions & 0 deletions packages/styles/scss/__tests__/theme-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@ describe('@carbon/styles/scss/theme', () => {
"ai-inner-shadow",
"ai-aura-start",
"ai-aura-end",
"ai-aura-hover-background",
"ai-aura-hover-start",
"ai-aura-hover-end",
"ai-border-strong",
"ai-border-start",
"ai-border-end",
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/modal/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@

// Slug styles
.#{$prefix}--modal--slug .#{$prefix}--modal-container {
@include callout-gradient('default');
@include callout-gradient();

background-color: $layer;
}
Expand Down
24 changes: 17 additions & 7 deletions packages/styles/scss/components/tile/_tile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,13 +387,15 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
}

.#{$prefix}--tile--slug.#{$prefix}--tile {
@include callout-gradient();
@include callout-gradient('default', 0, 'layer');

border: 1px solid $border-tile;
border: 1px solid transparent;
box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
0 4px 10px 2px $ai-drop-shadow;
}

.#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
@include callout-gradient();
@include callout-gradient('default', 0, 'layer');
}

.#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
Expand All @@ -412,7 +414,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);

.#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
.#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
@include callout-gradient('hover');
@include callout-gradient('hover', 0, 'layer');

box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
}

.#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
Expand All @@ -421,7 +425,13 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
}

.#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
@include callout-gradient('selected');
@include callout-gradient('selected', 0, 'layer');

box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
}

.#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {
opacity: 0;
}

.#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
Expand Down Expand Up @@ -467,11 +477,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
.#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
.#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
.#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
border-radius: $spacing-05;
border-radius: $spacing-03;
}

.#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
border-end-end-radius: $spacing-05;
border-end-end-radius: $spacing-03;
}

// Windows HCM fix
Expand Down
67 changes: 40 additions & 27 deletions packages/styles/scss/utilities/_ai-gradient.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,57 +43,70 @@
/// @example @include callout-gradient();
/// @param {String} $type - Type of gradient, either 'default', 'selected' or 'hover'
/// @param {Number} $offset - specify a pixel offset the callout should start from the bottom
/// @param {String} $background - specify if the background should be `layer` or `background`
/// @group utilities
@mixin callout-gradient($type: 'default', $offset: 0) {
@mixin callout-gradient(
$type: 'default',
$offset: 0,
$background: theme.$background
) {
$start: 0%;
@if $offset != 0 {
$start: calc(0% + #{$offset});
}

@if $background == 'layer' {
$background: theme.$layer;
}

@if $type == 'hover' {
background: linear-gradient(
0deg,
theme.$slug-callout-aura-start-hover-01 $start,
theme.$slug-callout-aura-end-hover-01 50%,
transparent 50%
),
to top,
theme.$ai-aura-hover-start $start,
15%,
theme.$ai-aura-hover-end 50%
)
padding-box,
linear-gradient(
0deg,
theme.$slug-callout-aura-start-hover-02 $start,
theme.$slug-callout-aura-end-hover-02 50%,
transparent 50%
),
to top,
theme.$ai-aura-hover-background,
theme.$ai-aura-hover-background
)
padding-box,
linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
border-box,
// Needed to underlay the transparent border
linear-gradient(
180deg,
theme.$slug-callout-gradient-top-hover $start,
theme.$slug-callout-gradient-bottom-hover 100%
to top,
theme.$ai-aura-hover-background,
theme.$ai-aura-hover-background
)
rgba(0, 0, 0, 0.01);
border-box;
} @else if $type == 'selected' {
background: linear-gradient(
0deg,
theme.$slug-callout-aura-start-selected $start,
theme.$slug-callout-aura-end-selected 50%,
transparent 50%
),
linear-gradient(
180deg,
theme.$slug-callout-gradient-top-selected $start,
theme.$slug-callout-gradient-bottom-selected 100%
to top,
theme.$ai-aura-start $start,
theme.$ai-aura-end 50%
)
rgba(0, 0, 0, 0.01);
padding-box,
linear-gradient(to top, theme.$layer, theme.$layer) padding-box,
linear-gradient(to bottom, theme.$border-inverse, theme.$border-inverse)
border-box,
// Needed to underlay the transparent border
linear-gradient(to top, theme.$layer, theme.$layer)
border-box;
} @else {
background: linear-gradient(
to top,
theme.$ai-aura-start $start,
theme.$ai-aura-end 50%
)
padding-box,
linear-gradient(to top, theme.$background, theme.$background) padding-box,
linear-gradient(to top, $background, $background) padding-box,
linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
border-box,
// Needed to underlay the transparent border
linear-gradient(to top, theme.$background, theme.$background)
linear-gradient(to top, $background, $background)
border-box;
}
}
29 changes: 15 additions & 14 deletions packages/themes/src/g10.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,16 +213,6 @@ export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rg
export const slugBackgroundHover = gray60;
export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
export const slugHollowHover = gray80Hover;
export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
export const slugCalloutAuraEndHover01 = rgba(white, 0);
export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
export const slugCalloutAuraEndHover02 = rgba(white, 0);
export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
export const slugCalloutAuraEndSelected = rgba(white, 0);

//// Phase 2 - new \\\\
// Shared
Expand All @@ -233,21 +223,32 @@ export const aiBorderStrong = blue50;
export const aiBorderStart = blue40;
export const aiBorderEnd = blue20;
export const aiDropShadow = rgba(blue60, 0.32);
export const aiAuraHoverBackground = blue10;
export const aiAuraHoverStart = rgba(blue50, 0.4);
export const aiAuraHoverEnd = rgba(white, 0);

// Callout
export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
export const slugCalloutShadowOuter02 = rgba(black, 0.1);

//// Changed
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;

//// Not used in phase 2 / possibly remove?
export const slugCalloutGradientTop = rgba(gray10, 0.85);
export const slugCalloutGradientBottom = rgba(gray20, 0.85);
export const aiGradientStart01 = rgba(coolGray10, 0.5);
export const aiGradientStart02 = rgba(blue10, 0.5);
export const aiGradientEnd = rgba(white, 0);
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;
export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
export const slugCalloutAuraEndHover01 = rgba(white, 0);
export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
export const slugCalloutAuraEndHover02 = rgba(white, 0);
export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
export const slugCalloutAuraEndSelected = rgba(white, 0);

// One off tokens for caret
export const slugCalloutCaretCenter = '#A7C7FF';
Expand Down
29 changes: 15 additions & 14 deletions packages/themes/src/g100.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,16 +218,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
export const slugBackgroundHover = gray20;
export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
export const slugHollowHover = gray30Hover;
export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
export const slugCalloutAuraStartHover02 = 'transparent';
export const slugCalloutAuraEndHover02 = 'transparent';
export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
export const slugCalloutAuraEndSelected = rgba(gray100, 0);

//// Phase 2 - new \\\\
// Shared
Expand All @@ -238,21 +228,32 @@ export const aiBorderStrong = blue40;
export const aiBorderStart = blue50;
export const aiBorderEnd = rgba(blue30, 0.24);
export const aiDropShadow = rgba(blue60, 0.32);
export const aiAuraHoverBackground = layerHover01;
export const aiAuraHoverStart = rgba(blue50, 0.4);
export const aiAuraHoverEnd = rgba(black, 0);

// Callout
export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
export const slugCalloutShadowOuter02 = rgba(black, 0.65);

//// Changed
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;

//// Not used in phase 2 / possibly remove?
export const slugCalloutGradientTop = rgba(gray100, 0.85);
export const slugCalloutGradientBottom = rgba(gray90, 0.85);
export const aiGradientStart01 = rgba(blue20, 0.2);
export const aiGradientStart02 = 'transparent';
export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;
export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
export const slugCalloutAuraStartHover02 = 'transparent';
export const slugCalloutAuraEndHover02 = 'transparent';
export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
export const slugCalloutAuraEndSelected = rgba(gray100, 0);

// One off tokens for caret
export const slugCalloutCaretCenter = '#3F68AF';
Expand Down
29 changes: 15 additions & 14 deletions packages/themes/src/g90.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
export const slugBackgroundHover = gray20;
export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
export const slugHollowHover = gray30Hover;
export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
export const slugCalloutAuraStartHover02 = 'transparent';
export const slugCalloutAuraEndHover02 = 'transparent';
export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
export const slugCalloutAuraEndSelected = rgba(gray100, 0);

//// Phase 2 - new \\\\
// Shared
Expand All @@ -239,21 +229,32 @@ export const aiBorderStrong = blue40;
export const aiBorderStart = blue50;
export const aiBorderEnd = rgba(blue30, 0.24);
export const aiDropShadow = rgba(blue60, 0.32);
export const aiAuraHoverBackground = layerHover01;
export const aiAuraHoverStart = rgba(blue50, 0.4);
export const aiAuraHoverEnd = rgba(black, 0);

// Callout
export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
export const slugCalloutShadowOuter02 = rgba(black, 0.65);

//// Changed
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;

//// Not used in phase 2 / possibly remove?
export const slugCalloutGradientTop = rgba(gray100, 0.85);
export const slugCalloutGradientBottom = rgba(gray90, 0.85);
export const aiGradientStart01 = rgba(blue20, 0.2);
export const aiGradientStart02 = 'transparent';
export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
export const slugCalloutAuraStart = aiAuraStart;
export const slugCalloutAuraEnd = aiAuraEnd;
export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
export const slugCalloutAuraStartHover02 = 'transparent';
export const slugCalloutAuraEndHover02 = 'transparent';
export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
export const slugCalloutAuraEndSelected = rgba(gray100, 0);

// One off tokens for caret
export const slugCalloutCaretCenter = '#456FB5';
Expand Down
3 changes: 3 additions & 0 deletions packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,9 @@ Array [
"ai-inner-shadow",
"ai-aura-start",
"ai-aura-end",
"ai-aura-hover-background",
"ai-aura-hover-start",
"ai-aura-hover-end",
"ai-border-strong",
"ai-border-start",
"ai-border-end",
Expand Down
Loading

0 comments on commit 8114072

Please sign in to comment.