open-index/open-npm huggingface dataset:
npm package: @planningcenter/reach
Description: Reach UI stylesheets with custom property controls
Author: Front End Systems Engineering
Latest version: 1.0.0

# Reach UI

## Menu Button

| name                                           | default                 |
| ---------------------------------------------- | ----------------------- |
| `--reach-menu-list--box-shadow-color`          | `rgba(0, 0, 0, 0.05)`   |
| `--reach-menu-item--border-color`              | `hsla(0, 0%, 0%, 0.25)` |
| `--reach-menu-item--background-color_selected` | `hsl(211, 64%, 45%)`    |
| `--reach-menu-item--color`                     | `#444`                  |
| `--reach-menu-item--color`                     | `#444`                  |
npm package: @planningcenter/react-trianglify
Description: a simple React wrapper for Trianglify
Author: Josh Wilkerson
Latest version: 1.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## React-Trianglify

### Installation
`npm install --save @planningcenter/react-trianglify`

or 

`yarn add @planningcenter/react-trianglify`

### Props
| Prop | Type | Default | Notes |
|:-----|:-----|:--------|:-----|
| width | number | 500 | Specify the width in pixels of the pattern to generate. |
| height | number | 300 | Specify the height in pixels of the pattern to generate.|
| cellSize | number | 50 | Specify the size in pixels of the mesh used to generate triangles. |
| variance | number | 0.75 | Decimal value between 0 and 1. Specify the amount of randomness used when generating triangles. |
| seed | string | null | Seeds the random number generator to create repeatable patterns. |
| xColors | false, string or array of CSS-formatted colors | "random" | Valid string values are 'random', or the name of a [colorbrewer palette](http://bl.ocks.org/mbostock/5577023) (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library. Valid array values should specify the color stops in any CSS format (i.e. ['#000000', '#4CAFE8', '#FFFFFF']).
| yColors | False, string or array of CSS-formatted colors | "match" | When set to 'match' the x-axis color gradient will be used on both axes. Otherwise, accepts the same options as xColors. |
| colorSpace | string | "lab" | Supported values are `rgb`, `hsv`, `hsl`, `hsi`, `lab` and `hcl`. |
| fill | boolean | true | Specifies whether the polygons generated by Trianglify should be filled in. |
| strokeWidth | number | 0 | Specify the width of the strokes used to outline the polygons. | 
| className | string | " " | append classes to SVG wrapper div |

For more detailed information on Trianglify's expected props, [click here](https://github.com/qrohlf/trianglify).


### Example
```
import React from "react";
import Trianglify from "@planningcenter/react-trianglify";

function App() {
  return (
    <Trianglify height={200} width={350} variance={0.5} />
  )
}
```
npm package: @planningcenter/resource-header
Description: Components for summarizing, navigating, and acting on a resource.
Author: Michael Chan
Latest version: 0.0.18
Deprecated: experiment realized in @planningcenter/grids

# `@planningcenter/resource-header`

> TODO: description

## Usage

```
const resourceHeader = require('@planningcenter/resource-header');

// TODO: DEMONSTRATE API
```
npm package: @planningcenter/surface
Description: Visual Hierarchy for Themed, Layer-able UI Surfaces
Author: Michael Chan
Latest version: 0.0.1
Deprecated: 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

```css
.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.

```css
--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)

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

### CSS Only (Rails/Sass)

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

### CSS Only (Rails/Sprockets)

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

### JS + CSS

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