UI kit > Define & validate shadow style specs
Problem
The current layer shadow style/specs in the UI kit (modal example ) don't align with what's in Pajamas . This issue is to determine the correct specs and where updates are needed.
View branch in Figma →
UI kit (Note that both are combined into one shadow)
Pajamas
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16), 0px 4px 12px rgba(0, 0, 0, 0.16);
Solution
Consolidated list of styles based on components in production and in the UI kit
Shadow styles
Small shadow - new
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);
Medium shadow - new
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);
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);
Changes for this issue
UI Kit
Pajamas
GitLab UI
Document new shadow styles and audit existing styles
Add new shadow styles as utility classes
Update instances to use the new GitLab UI utility classes
Out of scope but worth mentioning;
* gl-shadow-focus: focus states
This will remain unchanged in Gitlab-UI
Edited
Mar 04, 2022 by
Andy Volpe