Implement shadow utility classes based on Pajamas UI layers documentation
The problem
While implementing components in gitlab-ui components, we’ve lacked well-defined shadow patterns that drive the creation of utility-classes. As a result, we have implemented component-specific shadows utilities or mixins:
This practice leads to inconsistent shadows across components and makes the CSS less DRY.
The solution
From gitlab-org/gitlab-services/design.gitlab.com#1200 (closed)
Shadow styles
new
Small shadow -GitLab-ui | GitLab UI kit | Components | CSS |
---|---|---|---|
$gl-shadow-sm | Small $gl-shadow-sm | Card | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
adds
https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/card/card.scss
@include gl-shadow-sm;
new
Medium shadow -GitLab-ui | GitLab UI kit | Components | CSS |
---|---|---|---|
$gl-shadow-md | Medium $gl-shadow-md | Date picker, Dropdown, Menus, Flyout Nav, Card on_drag
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16); |
Replaces:
https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/box-shadow.scss#L152
gl-popover
+ gl-datepicker
@mixin gl-shadow {
box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
}
-
gl-new-dropdown
GlNavItemDropdown
https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/box-shadow.scss#L156
ref in: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/dropdown/dropdown.scss#L10
@mixin gl-shadow-x0-y2-b4-s0 {
box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
}
Large shadow
GitLab-ui | GitLab UI kit | Components | CSS |
---|---|---|---|
$gl-shadow-lg | Large $gl-shadow-lg | Modal, Drawer | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16), 0px 0px 4px rgba(0, 0, 0, 0.16); |
Replaces:
https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/box-shadow.scss#L164
gl-shadow-drawer {
box-shadow: -4px 0 8px $gray-200;
}
https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/modal/modal.scss#L4
$modal-box-shadow: 0 4px 16px $t-gray-a-24;
The product design team is working on documenting different aspects of UI layering such as shadows, scrolling, borders, etc. Let’s implement utility classes based on these documented shadow patterns and replace the component-specific shadows with these utilities.