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

Jump to bottom

Apply elevation scale in components package #65159

Merged
merged 11 commits into from
Sep 17, 2024
Merged

Apply elevation scale in components package #65159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6c3b9cc
Apply elevation scale to various components
jameskoster Sep 9, 2024
488c9b3
Handles
jameskoster Sep 9, 2024
248f1e6
Update elevation styles
jameskoster Sep 10, 2024
fc8e723
Merge branch 'trunk' into update/apply-elevation
jameskoster Sep 12, 2024
2b1e4d0
Changelog
jameskoster Sep 12, 2024
4843dff
Adjust shadows
jameskoster Sep 13, 2024
a0998a4
Sync
jameskoster Sep 13, 2024
07ac834
Linting
jameskoster Sep 16, 2024
c08f37b
rebase
jameskoster Sep 16, 2024
a9f097c
Use
jameskoster Sep 17, 2024
f39f163
Merge branch 'trunk' into update/apply-elevation
jameskoster Sep 17, 2024
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
8 changes: 4 additions & 4 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,16 @@ $radius-round: 50%; // For circles and ovals.
*/

// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);

// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);

// For components that offer additional actions. Example: Menus, Command Palette
$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);

// For components that confirm decisions or handle necessary interruptions. Example: Modals.
$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);

/**
* Dimensions.
Expand Down
8 changes: 8 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@

- `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
- `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
- `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
- `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)).

### Bug Fixes
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/custom-select-control-v2/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
background-color: ${ COLORS.theme.background };
border-radius: ${ CONFIG.radiusSmall };
border: 1px solid ${ COLORS.theme.foreground };
box-shadow: ${ CONFIG.elevationMedium };

/* z-index(".components-popover") */
z-index: 1000000;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu-v2/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;

const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $transition-duration: 0.2s;
$transition-duration background-color ease-out;
@include reduce-motion("transition");
background-color: $gray-900;
box-shadow: $elevation-x-small;

// Transparent border acts as a fill in Windows High Contrast Mode.
border: math.div($toggle-thumb-size, 2) solid transparent;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;

.components-popover__content {
background: $white;
box-shadow: $shadow-popover-border-default, $elevation-x-small;
box-shadow: $shadow-popover-border-default, $elevation-medium;
border-radius: $radius-medium;
box-sizing: border-box;
width: min-content;
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/styles/range-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ export const Thumb = styled.span< ThumbProps >`
position: absolute;
user-select: none;
width: 100%;
box-shadow: ${ CONFIG.elevationXSmall };

${ thumbColor };
${ thumbFocus };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/resizable-box/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
top: calc(50% - #{ceil($resize-handler-size * 0.5)});
right: calc(50% - #{ceil($resize-handler-size * 0.5)});

box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
// Only visible in Windows High Contrast mode.
outline: 2px solid transparent;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/snackbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
background: rgba($black, 0.85); // Emulates #1e1e1e closely.
backdrop-filter: blur($grid-unit-20) saturate(180%);
border-radius: $radius-medium;
box-shadow: $elevation-x-small;
box-shadow: $elevation-small;
color: $white;
padding: $grid-unit-15 ($grid-unit-05 * 5);
width: 100%;
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/tooltip/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
font-size: 12px;
padding: $grid-unit-05 $grid-unit-10;
z-index: z-index(".components-tooltip");
box-shadow: $elevation-small;
}

.components-tooltip__shortcut {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/utils/config-values.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
cardPaddingSmall: `${ space( 4 ) }`,
cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
surfaceBackgroundColor: COLORS.white,
surfaceBackgroundSubtleColor: '#F3F3F3',
surfaceBackgroundTintColor: '#F5F5F5',
Expand Down
Loading