evergreen-layers outline

[jeroenransijn]

The evergreen-layers is a package exporting React components and layer/elevation styles.
Not entirely sure about some of the API specifics, but have a pretty good idea.

Usage

import {
  Pane,
  Card,
  ElevationStyles,
  BorderColors,
  LayerAppearances
}  from 'evergreen-layers'

<Card elevation={0} />

Design example

<Pane /> component

Pane will simply implement ui-box with some opinionated properties. It is used pretty much as a div or Box element and acts as a abstraction between Box.

<Pane appearance="dark" elevation={2} />

The styles will be implemented on a LayerAppearances object.

const LayerAppearances = {
   dark: { backgroundColor: colors.neutral['800'] }
   selected: {
       backgroundColor: colors.blue['10A'],
       boxShadow: `inset 0 0 0 1px ${colors.blue['30A']}`,
       borderColor: 'selected'
   }
   // are there some obvious colors I am forgetting?
}

Selected appearance

In some cases you want to make the Card interactive, therefore having a selected appearance is often a nice to have.

One way of dealing with the appearance to avoid elevation conflicts is to have the appearance applied after the elevation box shadow, this would cancel out that box shadow.

<Card /> component

The Card component directly implements the Pane component. The only difference is that it comes with opinionated border radius. Generally engineers and designers like to refer to these things as Cards.

The standard border radius will be 5px. Maybe will make this configurable in the future.

<Card elevation={2} />

Elevation property

The elevation property determines what kind of box shadow will be set.

<Pane elevation={0} />
<Pane elevation={1} />
<Pane elevation={2} />
<Pane elevation={3} />
<Pane elevation={4} />

I don't think there should be a default for the elevation if you don't need a box shadow.

hoverElevation, and activeElevation property

To easily allow for interactive cards, having a hoverElevation and activeElevation is a nice addition. This will have to use the Box css .

Elevation box shadows implementation

The box shadows themselves will be implemented on a ElevationStyles array.
The box shadow is following a technique where you use 2 box shadows, one of which is implemented with a negative spread to avoid blurry sides. Which is sadly not supported by Sketch

The color used right now is for the box shadow acting as a border is colors.neutral['80A']. However this has proved somewhat light in some circumstances. This might be bumped up slightly. Or instead of using a blur we'll use a spread.

import colors from 'evergreen-colors'

const borderShadowColor = colors.neutral['80A']
const blurryShadowColor = colors.neutral['50A']

const ElevationStyles = [
  `0 0 1px ${borderShadowColor}`,
  `0 0 1px ${borderShadowColor}, 0 2px 4px -2px ${blurryShadowColor}`,
  `0 0 1px ${borderShadowColor}, 0 3px 6px -2px ${blurryShadowColor}`,
  `0 0 1px ${borderShadowColor}, 0 8px 10px -4px ${blurryShadowColor}`,
  `0 0 1px ${borderShadowColor}, 0 16px 24px -8px ${blurryShadowColor}`
]

export default ElevationStyles

Border property

In the react-ui-library (Segment's current internal UI library) there is a shorthand for setting borders on any Box, simply by doing something like the following:

<Pane borderBottom borderTop borderLeft borderRight /> 

I actually have really enjoyed using this API in the past, and I don't see a clear alternative for this.

I am thinking this should still use a actual border. I am not sure how this would work when using elevation. Maybe add use a box shadow at that point?

I think the border color should be using a neutral color with a alpha channel.

BorderColors

One border color might not be enough for all use cases. In the past this was somewhat annoying.
Instead I think we can do something like:

const BorderColors = {
   default: '...',
   muted: '...',
   extraMuted: '...'
}

Usage

You will still be able to pass in any color.

<Pane borderBottom>Same as default</Pane>
<Pane borderBottom='default' /> 
<Pane borderRight='muted' /> 
<Pane borderRight='extraMuted' /> 
<Pane borderRight='red' /> 

[nettofarah]

Should specific border properties cancel elevation altogether? or should we issue a warning if they're both used together?

[jeroenransijn]

@nettofarah good question, I was thinking about this too. I thiought there was an exception when you deal with cards and disable border radius on a side, to attach it to something. But seems actually like no real use case for that.

Differently from this I initially had backgroundColor with some variables instead of appearances. I think we should add appearance="neutralTint1" going up to maybe 3-5. This might also set a color border if applicable. Not sure about naming just yet.

Really appreciate you take the time and give some feedback! Let's make this thing awesome 🔥

[jeroenransijn]

First pass implemented by PR #9. Had to fix the css prop in ui-box too.

[jeroenransijn]

This is the first pass I implemented. Note that the text isn't styled, because you should always wrap Text in a Text based component. I want to tackle documentation in a bigger swoop, so trying not to spend too much time on that right now.

[montnyc]

@jeroenransijn is there are Sketch App design file for all the components by any chance?