calcite-design-system
calcite-design-system copied to clipboard
Esri
Enhancement: update component shadows per latest Figma designs
In order to keep 1:1 change between light and dark theme, these changes have been vetted by design group:
- Change border radius to 4px
--calcite-border-radius: 4px - Add
border-3to light theme level 2 components - Add
border-3-darkto dark theme level 2 components - Use
foreground-1-darkon dark theme level 2 components instead of foreground-3
This applies to dropdown, alert, modal, date picker, tooltip, action pad, tip manager, popover, combobox dropdown, color picker (when it's a dropdown)
@julio8a @bstifle isn't this already covered in our refactors based on the Figma designs?
Hmm. Not seeing these shadows in our components on master @caripizza @julio8a
@bstifle do the shadows appear in the Figma designs that we're using for the refactors?
@caripizza yep! i wonder if this is just a shadows utility class we need to fix? other than the shadows, the other design criteria seem to be met in the issue
Re-opened after clarifying the remaining work needed in this issue with Bryan (@bstifle please correct or add anything I missed from our chat).
Based on first glance, it looks like:
-
_popper.scss global styles - currently using
$shadow-2sass var - needs to instead use@apply shadow-2: - Additionally, the
%shadow-varssass placeholder we have here: src/assets/styles/_shadow.scss Don't seem to be used right now. We don't want these as global CSS Vars as far as I know, so let's remove them. As long as we have what we need in TW config underboxShadowobject, we can refer to those moving forward. (But why do we have duplicate 0 and 1 values?)
@julio We should also use this issue to update the shadows content in our readme to make sure it corresponds with (or points to) the content we add in dev docs: https://github.com/ArcGIS/afd-calcite-documentation/issues/57
Can we update the description to a) articulate which components are Level 0, 1, or 2 (I don't know), and b) so we can style their shadows based on their level?
@caripizza this issue is for specific components (listed in the description at the bottom) and wont apply to all components with shadows
Should the updated box-shadows correspond to the output of this calcite-base mixin?
https://github.com/Esri/calcite-base/blob/master/dist/_shadow.scss
(Currently only referenced in calcite-slider.)
This one was moved to the Oct 11 sprint. @macandcheese will need to give this another design review.
The proposed shadows are shown in this codepen.
It appears that the most used shadows are shadow-1 and shadow-2. The other shadows are only used in these cases:
- shadow-1-sm
- Card's active state. Card shouldn't have an active state since it's not clickable.
- shadow-1-lg
- Card's hover state. Card shouldn't have an active state since it's not clickable.
- shadow-2-sm
- Fab's active state
- Modal
- shadow-2-lg
- Fab's hover state
Also, it seems that shadow-0 and shadow-1 in the tailwind confige are the same?
Propose removing the rarely use shadows and updating those components as such:
- Card active and hover states would not exist.
- Fab's states would be handled with color states that match Button
- Modal could use 1.
Agree w @asangma assessment - these could be greatly simplified. Let's also consider other theming options for shadow so even if the "default Calcite" theme doesn't have a shadow in the design, an overriding theme may.
@ashetland @SkyeSeitz proposing we close this one and address in an updated issue if this is still needed, but this seems a bit outdated at this point compared to current Figma.
