@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/server.js

@@ -1,16 +0,0 @@
-import React from 'react'
-
-import ThemeProvider from './ThemeProvider'
-
-export const styleElement = (
-  <style
-    id="tapestry-react-style"
-    dangerouslySetInnerHTML={{ __html: ThemeProvider.styleReset }}
-  />
-)
-
-export const themeInitializerElement = (
-  <script
-    dangerouslySetInnerHTML={{ __html: ThemeProvider.themeInitializerScript }}
-  />
-)

package/src/system/README.md

@@ -1,120 +0,0 @@
-# System
-
-The underlying architecture of Tapestry-React that powers the CSS in JS styling.
-
-![System Graph](../../../../images/system-graph.png)
-
-- [Style Props](#style-props)
-- [CSS Prop](#css-prop)
-- [Split Styles](#split-styles)
-- [CXS](#cxs)
-- [Related Libraries](#related-libraries)
-
-## Style Props
-
-Styles in Tapestry-React are predominantly driven by style props. In a simple example, we map props to styles that can interact with a defined theme:
-
-```jsx
-<Box color="pink">Hello Box</Box>
-```
-
-This has the benefit of colocating styles making it easier to add, change, or remove as needed.
-
-## CSS Prop
-
-While style props takes care of most use cases, we can also define Sass-like styles through the `css` prop:
-
-```jsx
-<Box css={{ ':hover': { color: 'pink' } }}>Hello Box</Box>
-```
-
-## Split Styles
-
-We achieve this CSS-in-JS solution through a helper [splitStyles](split-styles.js) function that will split out style props and the `css` prop from other props and generate a `className` while passing all other props through:
-
-```jsx
-function Box(props) {
-  const splitProps = splitStyles(props)
-  return <div {...splitProps} />
-}
-```
-
-<small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
-
-The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://planningcenter.github.io/tapestry-react/responsive) and [Variants](https://planningcenter.github.io/tapestry-react/variants) for more information and examples.
-
-### Plugins
-
-There are two types of plugins `Global` and `Local`. Plugins allow intercepting props designated for styles and mapping them to CSS. The architecture specifically comes from Glamor's [plugin system](https://github.com/threepointone/glamor/blob/master/docs/plugins.md) and has since been modified to be more agnostic and work with `Emotion`.
-
-#### Global
-
-Global plugins are defined in the [plugins](plugins) directory and currently do not support user-defined plugins, only what is available and exported from [plugins/index](plugins/index.js).
-
-```js
-function colorPlugin({ backgroundColor, ...styles }, theme) {
-  if (backgroundColor) {
-    styles.backgroundColor = theme.colors[backgroundColor]
-  }
-  return styles
-}
-```
-
-#### Local
-
-Local plugins are defined in the `splitStyles` function and allow for mapping specific component props to CSS:
-
-```jsx
-const plugin = {
-  // determines what props splitStyles should intercept as styles
-  styleProps: ['axis', 'alignment'],
-  // remove style props here to map properly and return all styles
-  getStyles({ alignment, axis, ...styles }) {
-    return {
-      flexDirection: axis === 'horizontal' ? 'row' : 'column',
-      alignItems: alignment,
-      ...styles,
-    }
-  },
-}
-function StackView(props) {
-  const splitProps = splitStyles({ ...props, plugin })
-  return <div {...splitProps} />
-}
-```
-
-<small>See the [StackView](../StackView/StackView.tsx) component for an actual implementation.</small>
-
-## CXS
-
-A fork of the [CXS](https://github.com/cxs-css/cxs) library is available as an escape hatch if Emotion is performing poorly. This is specifically used to combat performance issues in intensive components like `DataTable`. This is done through a `useCss` hook exported from system:
-
-```jsx
-import { designSystem } from '@planningcenter/tapestry-react'
-function Box({ color, ...props }) {
-  const css = designSystem.useCss()
-  return <div className={css({ color })} {...props} />
-}
-```
-
-## Related Libraries
-
-Tapestry-React is built on the shoulders of giants. These libraries were and continue to be influential to the success of Tapestry-React.
-
-### Initial architecture inspired by:
-
-[Glamor](https://github.com/threepointone/glamor) (forked [split styles](https://github.com/threepointone/glamor/blob/master/src/jsxstyle.js))
-
-[JSX Style](https://github.com/jsxstyle/jsxstyle/) (style props)
-
-[Rebass](https://rebassjs.org/) (primitive Box component)
-
-### Similar solutions in the wild:
-
-[Styled System](https://styled-system.com/)
-
-[Theme UI](https://theme-ui.com/)
-
-[Chakra UI](https://chakra-ui.com/)
-
-[Material UI](https://material-ui.com/)

package/src/system/box-sizes.js

@@ -1,54 +0,0 @@
-export const boxSizes = {
-  xs: {
-    boxSize: 2.5,
-    fontSize: 5,
-    lineHeight: 2.5,
-    paddingHorizontalDense: 0.5,
-    paddingHorizontal: 0.75,
-    paddingVertical: 0,
-    radius: 2.5,
-  },
-  sm: {
-    boxSize: 3,
-    fontSize: 5,
-    lineHeight: 2.5,
-    paddingHorizontalDense: 0.5,
-    paddingHorizontal: 1,
-    paddingVertical: 0.25,
-    radius: 3,
-  },
-  md: {
-    boxSize: 4,
-    fontSize: 4,
-    lineHeight: 3,
-    paddingHorizontalDense: 1,
-    paddingHorizontal: 1.375,
-    paddingVertical: 0.5,
-    radius: 4,
-  },
-  lg: {
-    boxSize: 5,
-    fontSize: 3,
-    lineHeight: 4,
-    paddingHorizontalDense: 1,
-    paddingHorizontal: 1.75,
-    paddingVertical: 0.5,
-    radius: 5,
-  },
-  xl: {
-    boxSize: 8,
-    fontSize: 1,
-    lineHeight: 5,
-    paddingHorizontalDense: 2,
-    paddingHorizontal: 2.25,
-    paddingVertical: 1.5,
-    radius: 6,
-  },
-  xxl: {
-    boxSize: 14,
-  },
-}
-
-export function getBoxSize(size = 'md') {
-  return boxSizes[size] || {}
-}

package/src/system/button-themes.js

@@ -1,173 +0,0 @@
-export const buttonThemes = {
-  default: {
-    fill: {
-      color: 'foreground',
-      backgroundColor: 'grey-3',
-      hover: { backgroundColor: 'grey-4' },
-      active: { backgroundColor: 'grey-5' },
-    },
-    outline: {
-      stroke: 'separatorSecondary',
-      color: 'foreground',
-      hover: { backgroundColor: 'highlight' },
-      active: { backgroundColor: 'highlightSecondary' },
-    },
-    naked: {
-      color: 'foreground',
-      hover: { backgroundColor: 'highlight' },
-      active: { backgroundColor: 'highlightSecondary' },
-    },
-  },
-  white: {
-    fill: {
-      color: 'primary',
-      backgroundColor: 'white',
-      hover: { backgroundColor: 'grey-0' },
-      active: { backgroundColor: 'grey-1' },
-    },
-    outline: {
-      stroke: 'white',
-      color: 'white',
-      hover: { backgroundColor: 'light-0' },
-      active: { backgroundColor: 'light-1' },
-    },
-    naked: {
-      color: 'white',
-      hover: { backgroundColor: 'light-0' },
-      active: { backgroundColor: 'light-1' },
-    },
-  },
-  light: {
-    fill: {
-      color: 'white',
-      backgroundColor: 'light-1',
-      hover: { backgroundColor: 'light-2' },
-      active: { backgroundColor: 'light-3' },
-    },
-    outline: {
-      stroke: 'light-3',
-      color: 'white',
-      hover: { backgroundColor: 'light-0' },
-      active: { backgroundColor: 'light-1' },
-    },
-    naked: {
-      color: 'light-9',
-      hover: { backgroundColor: 'light-0' },
-      active: { backgroundColor: 'light-1' },
-    },
-  },
-  dark: {
-    fill: {
-      color: 'dark-9',
-      backgroundColor: 'dark-0',
-      hover: { backgroundColor: 'dark-1' },
-      active: { backgroundColor: 'dark-2' },
-    },
-    outline: {
-      stroke: 'dark-3',
-      color: 'dark-9',
-      hover: { backgroundColor: 'dark-0' },
-      active: { backgroundColor: 'dark-1' },
-    },
-    naked: {
-      color: 'dark-9',
-      hover: { backgroundColor: 'dark-0' },
-      active: { backgroundColor: 'dark-1' },
-    },
-  },
-  primary: {
-    fill: {
-      color: 'light-9',
-      backgroundColor: 'primary',
-      hover: { backgroundColor: 'primary-dark' },
-      active: { backgroundColor: 'primary-darker' },
-    },
-    outline: {
-      stroke: 'primary',
-      color: 'primary',
-      hover: { backgroundColor: 'primary-lightest' },
-      active: { backgroundColor: 'primary-lighter' },
-    },
-    naked: {
-      color: 'primary',
-      hover: { backgroundColor: 'primary-lightest' },
-      active: { backgroundColor: 'primary-lighter' },
-    },
-  },
-  warning: {
-    fill: {
-      color: 'dark-9',
-      backgroundColor: 'yellow-5',
-      hover: { backgroundColor: 'yellow-4' },
-      active: { backgroundColor: 'yellow-3' },
-    },
-    outline: {
-      stroke: 'yellow-5',
-      color: 'yellow-9',
-      hover: { backgroundColor: 'yellow-0' },
-      active: { backgroundColor: 'yellow-1' },
-    },
-    naked: {
-      color: 'yellow-9',
-      hover: { backgroundColor: 'yellow-0' },
-      active: { backgroundColor: 'yellow-1' },
-    },
-  },
-  error: {
-    fill: {
-      color: 'white',
-      backgroundColor: 'error',
-      hover: { backgroundColor: 'error-dark' },
-      active: { backgroundColor: 'error-darker' },
-    },
-    outline: {
-      stroke: 'error',
-      color: 'error',
-      hover: { backgroundColor: 'error-lightest' },
-      active: { backgroundColor: 'error-lighter' },
-    },
-    naked: {
-      color: 'error',
-      hover: { backgroundColor: 'error-lightest' },
-      active: { backgroundColor: 'error-lighter' },
-    },
-  },
-  success: {
-    fill: {
-      color: 'white',
-      backgroundColor: 'success',
-      hover: { backgroundColor: 'success-dark' },
-      active: { backgroundColor: 'success-darker' },
-    },
-    outline: {
-      stroke: 'success',
-      color: 'success',
-      hover: { backgroundColor: 'success-lightest' },
-      active: { backgroundColor: 'success-lighter' },
-    },
-    naked: {
-      color: 'success',
-      hover: { backgroundColor: 'success-lightest' },
-      active: { backgroundColor: 'success-lighter' },
-    },
-  },
-  info: {
-    fill: {
-      color: 'light-9',
-      backgroundColor: 'blue-5',
-      hover: { backgroundColor: 'blue-4' },
-      active: { backgroundColor: 'blue-3' },
-    },
-    outline: {
-      stroke: 'blue-5',
-      color: 'blue-5',
-      hover: { backgroundColor: 'blue-0' },
-      active: { backgroundColor: 'blue-1' },
-    },
-    naked: {
-      color: 'blue-5',
-      hover: { backgroundColor: 'blue-0' },
-      active: { backgroundColor: 'blue-1' },
-    },
-  },
-}

package/src/system/colors/colors.js

@@ -1,217 +0,0 @@
-import { flattenPalette } from './utils'
-
-// NOTE: this is a solution for using the UX palette in Tapestry-React
-// that will likely be replaced with a tokenized palette in the future
-const tapestry = {
-  create: {
-    create35: 'hsl(86deg 91% 35% / 100%)',
-  },
-  grays: {
-    light: {
-      neutral62: 'hsl(0deg 0% 62% / 100%)',
-      neutral81: 'hsl(0deg 0% 81% / 100%)',
-    },
-  },
-  interaction: {
-    interaction66: 'hsl(221deg 91% 66% / 100%)',
-  },
-}
-
-export const palette = {
-  tapestry,
-
-  primary: {
-    lightest: 'hsl(88, 24%, 92%)',
-    lighter: 'hsl(88, 32%, 86%)',
-    light: 'hsl(88, 40%, 54%)',
-    base: 'hsl(88, 44%, 40%)',
-    dark: 'hsl(88, 46%, 36%)',
-    darker: 'hsl(88, 52%, 32%)',
-    darkest: 'hsl(88, 72%, 20%)',
-  },
-
-  warning: {
-    lightest: 'hsl(42, 87%, 97%)',
-    lighter: 'hsl(42, 87%, 94%)',
-    light: 'hsl(42, 87%, 90%)',
-    base: 'hsl(42, 84%, 63%)',
-    dark: 'hsl(42, 84%, 55%)',
-    darker: 'hsl(42, 84%, 49%)',
-  },
-
-  error: {
-    lightest: 'hsl(7, 60%, 97%)',
-    lighter: 'hsl(9, 59%, 93%)',
-    light: 'hsl(8, 60%, 85%)',
-    base: 'hsl(8, 60%, 47%)',
-    dark: 'hsl(8, 60%, 45%)',
-    darker: 'hsl(9, 61%, 43%)',
-  },
-
-  success: {
-    lightest: 'hsl(93, 53%, 97%)',
-    lighter: 'hsl(95, 50%, 91%)',
-    light: 'hsl(86, 91%, 35%)',
-    base: 'hsl(86, 91%, 27%)',
-    dark: 'hsl(86, 91%, 25%)',
-    darker: 'hsl(86, 91%, 23%)',
-  },
-
-  red: [
-    'hsl(8, 73%, 96%)',
-    'hsl(8, 74%, 92%)',
-    'hsl(8, 75%, 88%)',
-    'hsl(8, 76%, 68%)',
-    'hsl(8, 77%, 60%)',
-    'hsl(8, 78%, 56%)',
-    'hsl(8, 79%, 52%)',
-    'hsl(8, 80%, 48%)',
-    'hsl(8, 81%, 40%)',
-    'hsl(8, 82%, 30%)',
-  ],
-
-  blue: [
-    'hsl(197, 56%, 92%)',
-    'hsl(197, 56%, 88%)',
-    'hsl(197, 56%, 72%)',
-    'hsl(197, 56%, 64%)',
-    'hsl(197, 56%, 52%)',
-    'hsl(197, 56%, 44%)',
-    'hsl(197, 56%, 40%)',
-    'hsl(197, 56%, 32%)',
-    'hsl(197, 56%, 24%)',
-    'hsl(197, 56%, 20%)',
-  ],
-
-  green: [
-    'hsl(96, 24%, 92%)',
-    'hsl(96, 30%, 84%)',
-    'hsl(96, 32%, 76%)',
-    'hsl(96, 34%, 72%)',
-    'hsl(96, 36%, 64%)',
-    'hsl(96, 40%, 58%)',
-    'hsl(96, 44%, 50%)',
-    'hsl(96, 48%, 40%)',
-    'hsl(96, 52%, 30%)',
-    'hsl(96, 60%, 20%)',
-  ],
-
-  yellow: [
-    'hsl(50, 89%, 90%)',
-    'hsl(50, 90%, 86%)',
-    'hsl(50, 91%, 74%)',
-    'hsl(50, 92%, 68%)',
-    'hsl(50, 93%, 62%)',
-    'hsl(50, 94%, 56%)',
-    'hsl(50, 95%, 48%)',
-    'hsl(50, 96%, 40%)',
-    'hsl(50, 97%, 32%)',
-    'hsl(50, 98%, 26%)',
-  ],
-
-  light: [
-    'hsla(0,0%,100%,0.16)',
-    'hsla(0,0%,100%,0.24)',
-    'hsla(0,0%,100%,0.32)',
-    'hsla(0,0%,100%,0.44)',
-    'hsla(0,0%,100%,0.50)',
-    'hsla(0,0%,100%,0.60)',
-    'hsla(0,0%,100%,0.68)',
-    'hsla(0,0%,100%,0.76)',
-    'hsla(0,0%,100%,0.88)',
-    'hsla(0,0%,100%,0.96)',
-  ],
-
-  dark: [
-    'hsla(0,0%,0%,0.04)',
-    'hsla(0,0%,0%,0.08)',
-    'hsla(0,0%,0%,0.12)',
-    'hsla(0,0%,0%,0.16)',
-    'hsla(0,0%,0%,0.24)',
-    'hsla(0,0%,0%,0.32)',
-    'hsla(0,0%,0%,0.40)',
-    'hsla(0,0%,0%,0.46)',
-    'hsla(0,0%,0%,0.54)',
-    'hsla(0,0%,0%,0.68)',
-  ],
-
-  grey: [
-    'hsl(200,1%,98%)',
-    'hsl(200,1%,96%)',
-    'hsl(200,1%,94%)',
-    'hsl(200,1%,92%)',
-    'hsl(200,1%,90%)',
-    'hsl(200,1%,86%)',
-    'hsl(200,1%,74%)',
-    'hsl(200,1%,58%)',
-    'hsl(200,1%,46%)',
-    'hsl(200,1%,28%)',
-  ],
-
-  foreground: {
-    foreground: 'grey-9',
-    foregroundSecondary: 'grey-8',
-    foregroundTertiary: 'grey-7',
-  },
-
-  background: {
-    background: 'hsl(30, 9%, 99%)',
-    backgroundSecondary: 'hsl(30, 9%, 97%)',
-    backgroundTertiary: 'hsl(30, 9%, 95%)',
-  },
-
-  surface: {
-    surface: 'white',
-    surfaceSecondary: 'grey-0',
-    surfaceTertiary: 'grey-1',
-  },
-
-  separator: {
-    separator: 'grey-6',
-    separatorSecondary: 'grey-5',
-    separatorTertiary: 'grey-4',
-    separatorHover: 'separator',
-    separatorFocus: 'primary',
-    separatorFocusSecondary: 'primary-lighter',
-  },
-
-  highlight: {
-    highlight: 'grey-2',
-    highlightSecondary: 'grey-3',
-  },
-
-  link: {
-    linkForeground: 'primary',
-    linkBackground: 'hsl(200,100%,98%)',
-  },
-
-  days: {
-    sunday: '#7DC156',
-    monday: '#789FF8',
-    tuesday: '#A193FD',
-    wednesday: '#D18CF6',
-    thursday: '#FA7EA4',
-    friday: '#F69688',
-    saturday: '#66BEEB',
-  },
-
-  apps: {
-    'check-ins': '#8c6999',
-    giving: '#f4c551',
-    groups: '#f58a4f',
-    'music-stand': '#4984c4',
-    pco: '#3565cf',
-    people: '#5781cf',
-    'planning-center': '#2266f7',
-    projector: '#f19900',
-    registrations: '#569690',
-    calendar: '#cc4832',
-    services: '#6a9639',
-  },
-}
-
-export const colors = flattenPalette(palette)
-
-export function getColor(key: string): string {
-  return key ? colors[key] : colors
-}

package/src/system/colors/index.js

@@ -1,8 +0,0 @@
-export { colors, palette, getColor } from './colors'
-export {
-  createTones,
-  eachPalette,
-  flattenPalette,
-  generateColorScale,
-  setAlphaChannel,
-} from './utils'