@argent/x-ui

This package provides a theme and components for use with Chakra UI

Usage

Set up the global theme

import { Button, H1, theme } from "@argent/x-ui"
import { ChakraProvider } from "@chakra-ui/react"
import { FC } from "react"

export const App: FC = () => {
  return (
    <ChakraProvider theme={theme}>
      <H1>Hello world</H1>
      <Button>Click me</Button>
    </ChakraProvider>
  )
}

Theme and utilities

The theme contains standard set of attributes which are accessed using a name or key as decribed by chakra-ui. This allows the system to change the underlying values and units without changing the component markup.

See chakra style props for examples

Components

You can use primitives and components from chakra - see chakra components for examples

Custom components and examples unique to this package are in Storybook

pnpm storybook

Design System tokens

The tokens in /src/theme/colors.generated.ts and /src/theme/semanticTokens.generated.ts are generated from master artwork in Supernova. To regenerate these (requires an access key - see .env):

You can get that access token from: https://cloud.supernova.io/user-profile/authentication

pnpm gen:tokens

Icons

The icons in /src/components/icons are generated from master artwork in Figma. To regenerate these (requires an access key - see .env):

You can get that access token from: https://www.figma.com/developers/api#access-tokens

pnpm gen:icons

Dependencies

To update all @argent-x/* dependencies to latest

pnpm update:argent