Reach UI is an accessible foundation for React applications and design systems.
The three equally important goals are to be:
- Accessible
- Composable
- Stylable
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 |
// 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}) { |
//////////////////////////////////////////////////////////////////////////////// | |
// 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. |
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])) { |
I hereby claim:
To claim this, I am signing this object: