Pikas UI

Getting Started

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/styles

yarn add @pikas-ui/styles

pnpm add @pikas-ui/styles

Usage

globalCss

For handling global styles in your application you can use the globalCss function. You must call it in your application.

import { globalCss, createTheme } from '@pikas-ui/styles'

const globalCssCustom = globalCss({
  'html, body, #__next': {
    color: '$black',
    fontFamily: '$roboto',
    minWidth: 300,
    scrollBehavior: 'smooth',
  },
  '*': {
    margin: 0,
    padding: 0,
    boxSizing: 'border-box',
  },
  li: {
    listStyle: 'none',
  },
  a: {
    textDecoration: 'none',
  },

  '::-webkit-scrollbar': {
    width: '$8',
    height: '$8',
    borderRadius: '$lg',
  },
  '::-webkit-scrollbar-track': {
    borderRadius: '$lg',
    backgroundColor: '$gray-fixed',
  },
  '::-webkit-scrollbar-thumb': {
    background: '$gray-fixed-dark',
    borderRadius: '$lg',
  },
})

const myTheme = createTheme({
  colors: {
    primary-darker: '#083358',
    primary-dark: '#0D4C84',
    primary: '#1166B0',
    primary-light: '#88B3D7',
    primary-lighter: '#C3D9EB',
    primary-lightest-2: '#E7F0F7',
    primary-lightest-1: '#F3F4F6',
  },
})

const App: React.FC = () => {
  globalCssCustom()

  return (
    <PikasUIProvider lightTheme={myTheme}>
      <h1>Hello World</h1>
    </PikasUIProvider>
  )
}

Styling

For styling your components you can use the styled function.

import { styled } from '@pikas-ui/styles'

const Button = styled('button', {
  background: '$primary',
  color: 'white',
  border: 'none',
  padding: '0.5rem',
  borderRadius: '$sm',
  fontSize: '$em-small',
  fontWeight: '$bold',
  cursor: 'pointer',
  outline: 'none',
  transition: 'all 0.2s ease-in-out',

  '&:hover': {
    background: '$primary-light',
  },
})

Themes

If you want to create a theme you can use the createTheme function.

import { createTheme } from '@pikas-ui/styles'

const themeDark = createTheme({
  colors: {
    primary-darker: '#083358',
    primary-dark: '#0D4C84',
    primary: '#1166B0',
    primary-light: '#88B3D7',
    primary-lighter: '#C3D9EB',
    primary-lightest-2: '#E7F0F7',
    primary-lightest-1: '#F3F4F6',
  },
})

To use the theme you can use the PikasUIProvider component.

import { PikasUIProvider } from '@pikas-ui/styles'

const App: React.FC = () => {
  return (
    <PikasUIProvider darkTheme={themeDark}>
      <h1>Hello World</h1>
    </PikasUIProvider>
  )
}

Contributing

This documentation can be edited on GitHub here