This package has been deprecated

Author message:

Package is no longer supported. Use @planningcenter/components

@planningcenter/surface

Visual Hierarchy for Themed, Layer-able UI Surfaces

Usage

Demo

While documentation is being fleshed out, check out these living examples.

https://codesandbox.io/embed/theme-draft-6-surface-pmycp

Exposed Class Selectors

.Surface

.Surface--depth_2
.Surface--depth_2 .Surface

.Surface--depth_3
.Surface--depth_3 .Surface
.Surface--depth_3 .Surface .Surface

Exposed CSS Custom Properties

These must be defined defined product-side.

--surface-1of1_background-color

--surface-2of2_background-color
--surface-1of2_background-color

--surface-3of3_background-color
--surface-2of3_background-color
--surface-1of3_background-color

Exposed React Component and props

<Surface />
<Surface depth={2}/>
<Surface depth={3}/>

Installation

CSS Only (Webpack)

import "@planningcenter/surface/css/surface.css";

CSS Only (Rails/Sass)

@import "@planningcenter/surface/css/surface.css"

CSS Only (Rails/Sprockets)

/*= require "@planningcenter/surface/css/surface.css" */

JS + CSS

import "@planningcenter/surface/css/surface.css";
import { Surface } from "@planningcenter/surface";