@devseed-ui/theme-provider/src/story-elevation.js

devseed UI Kit Theme

import React from 'react';
import styled from 'styled-components';

import { themeVal, glsp } from '.';

const Inner = styled.div`
  display: grid;
  grid-gap: 2rem;
`;

const elevations = ['elevationA', 'elevationB', 'elevationC', 'elevationD'];

const ElevationWrapper = styled.div`
  display: grid;
  grid-gap: 1rem;
`;

const ElevationList = styled.div`
  display: flex;
  gap: 1rem;
  flex-flow: wrap;
`;

const Elevation = styled.div`
  height: 4rem;
  width: 8rem;
  padding: ${glsp(0.5)};
  background: #fff;
  box-shadow: ${({ elevation }) => themeVal(`boxShadow.${elevation}`)};
  font-weight: ${themeVal('type.base.bold')};
`;

export const Elevations = () => (
  <Inner>
    <ElevationWrapper>
      <ElevationList>
        {elevations.map((name) => (
          <Elevation key={name} elevation={name}>
            <span>{name}</span>
          </Elevation>
        ))}
      </ElevationList>
    </ElevationWrapper>
  </Inner>
);