roginfarrer

import { globalStyle, GlobalStyleRule } from "@vanilla-extract/css";

interface RecursiveGlobalStyle {
  [k: string]: GlobalStyleRule | RecursiveGlobalStyle;
}

function globalUtil(selector: string, styles: RecursiveGlobalStyle) {
  const write = (
    key: string[],
    value: RecursiveGlobalStyle | GlobalStyleRule

roginfarrer

// Box takes in props that then assigns each responsive prop to the appropriate breakpoint
// Negates needing to update breakpoints based on theme within the styled-component
const Box = styled.div`
  // base styles

  @media screen and (min-width: ${props => props.breakpoints.breakpointOne}) {
    // other styles
  }

  @media screen and (min-width: ${props => props.breakpoints.breakpointTwo}) {

roginfarrer

////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.

roginfarrer

const breakpoints = {
  all: '_',
  bp320: '320px',
  bp480: '480px'
}

export const transformAliasProps = props => {
  let result = {};
  for (let prop in props) {
    if (typeof props[prop] === "object" && !Array.isArray(props[prop])) {

roginfarrer

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

• Accessible
• Composable
• Stylable

roginfarrer

Keybase proof

I hereby claim:

• I am roginfarrer on github.
• I am rogin (https://keybase.io/rogin) on keybase.
• I have a public key ASA0mmmYqPTABcJfn1b8sUGOzyxQLpVgya9rF8VVTcr7vAo

To claim this, I am signing this object: