Pikas UI

Pikas UI

@pikas-ui/styles

This package contains a styles parameters.

The library is based on Stitches.

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

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

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',
  },
})

Theme Variables

Border Styles

Properties for border-style.

export const pikasBorderStyles = {
  solid: 'solid',
  dashed: 'dashed',
  dotted: 'dotted',
  double: 'double',
  hidden: 'hidden',
  none: 'none',
};

Example

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

const Div = styled('div', {
  borderStyle: '$solid',
})

Border Widths

Properties for border-width.

export const pikasBorderWidths = {
  0: '0px',
  1: '1px',
  2: '2px',
  4: '4px',
  8: '8px',
};

Example

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

const Div = styled('div', {
  borderWidth: '$4',
})

Color

Properties for color.

Primary

'primary-darker'
'primary-dark'
'primary'
'primary-light'
'primary-lighter'
'primary-lightest-2'
'primary-lightest-1'

'primary-fixed-darker'
'primary-fixed-dark'
'primary-fixed'
'primary-fixed-light'
'primary-fixed-lighter'
'primary-fixed-lightest-2'
'primary-fixed-lightest-1'

Secondary

'secondary-darker'
'secondary-dark'
'secondary'
'secondary-light'
'secondary-lighter'
'secondary-lightest-2'
'secondary-lightest-1'

'secondary-fixed-darker'
'secondary-fixed-dark'
'secondary-fixed'
'secondary-fixed-light'
'secondary-fixed-lighter'
'secondary-fixed-lightest-2'
'secondary-fixed-lightest-1'

Tertiary

'tertiary-darker'
'tertiary-dark'
'tertiary'
'tertiary-light'
'tertiary-lighter'
'tertiary-lightest-2'
'tertiary-lightest-1'

'tertiary-fixed-darker'
'tertiary-fixed-dark'
'tertiary-fixed'
'tertiary-fixed-light'
'tertiary-fixed-lighter'
'tertiary-fixed-lightest-2'
'tertiary-fixed-lightest-1'

Black

'black'
'black-2'
'black-light'
'black-lighter'
'black-lightest-2'
'black-lightest-1'

'black-fixed'
'black-fixed-light'
'black-fixed-lighter'
'black-fixed-lightest-2'
'black-fixed-lightest-1'

White

'white'
'white-2'
'white-light'
'white-lighter'
'white-lightest-2'
'white-lightest-1'

'white-fixed'
'white-fixed-light'
'white-fixed-lighter'
'white-fixed-lightest-2'
'white-fixed-lightest-1'

Gray

'gray-darker'
'gray-dark'
'gray'
'gray-light'
'gray-lighter'
'gray-lightest-2'
'gray-lightest-1'

'gray-fixed-darker'
'gray-fixed-dark'
'gray-fixed'
'gray-fixed-light'
'gray-fixed-lighter'
'gray-fixed-lightest-2'
'gray-fixed-lightest-1'

Success

'success-darker'
'success-dark'
'success'
'success-light'
'success-lighter'
'success-lightest-2'
'success-lightest-1'

'success-fixed-darker'
'success-fixed-dark'
'success-fixed'
'success-fixed-light'
'success-fixed-lighter'
'success-fixed-lightest-2'
'success-fixed-lightest-1'

Warning

'warning-darker'
'warning-dark'
'warning'
'warning-light'
'warning-lighter'
'warning-lightest-2'
'warning-lightest-1'

'warning-fixed-darker'
'warning-fixed-dark'
'warning-fixed'
'warning-fixed-light'
'warning-fixed-lighter'
'warning-fixed-lightest-2'
'warning-fixed-lightest-1'

Danger

'danger-darker'
'danger-dark'
'danger'
'danger-light'
'danger-lighter'
'danger-lightest-2'
'danger-lightest-1'

'danger-fixed-darker'
'danger-fixed-dark'
'danger-fixed'
'danger-fixed-light'
'danger-fixed-lighter'
'danger-fixed-lightest-2'
'danger-fixed-lightest-1'

Background

'background-darker'
'background-dark'
'background'
'background-light'
'background-lighter'
'background-lightest-2'
'background-lightest-1'

'background-fixed-darker'
'background-fixed-dark'
'background-fixed'
'background-fixed-light'
'background-fixed-lighter'
'background-fixed-lightest-2'
'background-fixed-lightest-1'

Other

'transparent'

Example

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

const Div = styled('div', {
  color: '$primary',
  backgroundColor: '$background',
  borderColor: '$primary',
  borderWidth: 1,
  borderStyle: 'solid',
})

Fonts

Properties for fonts.

export const pikasFonts = {
  roboto: 'Roboto',
};

Example

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

const Div = styled('div', {
  fontFamily: '$roboto',
})

Font Sizes

Properties for font size.

export const pikasFontSizes = {
  'em-3x-small': '0.5em',
  'em-2x-small': '0.625em',
  'em-x-small': '0.75em',
  'em-small': '0.875em',
  'em-base': '1em',
  'em-large': '1.125em',
  'em-x-large': '1.25em',
  'em-2x-large': '1.5em',
  'em-3x-large': '1.875em',
  'em-4x-large': '2.25em',
  'em-5x-large': '3em',
  'em-6x-large': '3.75em',
  'em-7x-large': '4.5em',
  'em-8x-large': '6em',
  'em-9x-large': '8em',

  'rem-3x-small': '0.5rem', // 8px
  'rem-2x-small': '0.625rem', // 10px
  'rem-x-small': '0.75rem', // 12px
  'rem-small': '0.875rem', // 14px
  'rem-base': '1rem', // 16px
  'rem-large': '1.125rem', // 18px
  'rem-x-large': '1.25rem', // 20px
  'rem-2x-large': '1.5rem', // 24px
  'rem-3x-large': '1.875rem', // 30px
  'rem-4x-large': '2.25rem', // 36px
  'rem-5x-large': '3rem', // 48px
  'rem-6x-large': '3.75rem', // 60px
  'rem-7x-large': '4.5rem', // 72px
  'rem-8x-large': '6rem', // 96px
  'rem-9x-large': '8rem', // 120px
};

Example

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

const Div = styled('div', {
  fontSize: '$em-small',
})

Font Weights

Properties for font weight.

export const pikasFontWeights = {
  'thin': 100,
  'extra-thin': 200,
  'light': 300,
  'normal': 400,
  'medium': 500,
  'semi-bold': 600,
  'bold': 700,
  'extra-bold': 800,
  'black': 900,
};

Example

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

const Div = styled('div', {
  fontWeight: '$bold',
})

Letter Spacing

Properties for letter spacing.

export const pikasLetterSpacings = {
  tightest: '-0.1em',
  tighter: '-0.05em',
  tight: '-0.025em',
  normal: '0em',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em',
};

Example

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

const Div = styled('div', {
  letterSpacing: '$XX-SMALL',
})

Line Height

Properties for line height.

export const pikasLineHeights = {
  'EM-3x-small': '0.5em',
  'EM-2x-small': '0.625em',
  'EM-x-small': '0.75em',
  'EM-small': '0.875em',
  'EM-base': '1em',
  'EM-large': '1.125em',
  'EM-x-large': '1.25em',
  'EM-2x-large': '1.5em',
  'EM-3x-large': '1.875em',
  'EM-4x-large': '2.25em',
  'EM-5x-large': '3em',
  'EM-6x-large': '3.75em',
  'EM-7x-large': '4.5em',
  'EM-8x-large': '6em',
  'EM-9x-large': '8em',

  'rem-3x-small': '0.5rem', // 8px
  'rem-2x-small': '0.625rem', // 10px
  'rem-x-small': '0.75rem', // 12px
  'rem-small': '0.875rem', // 14px
  'rem-base': '1rem', // 16px
  'rem-large': '1.125rem', // 18px
  'rem-x-large': '1.25rem', // 20px
  'rem-2x-large': '1.5rem', // 24px
  'rem-3x-large': '1.875rem', // 30px
  'rem-4x-large': '2.25rem', // 36px
  'rem-5x-large': '3rem', // 48px
  'rem-6x-large': '3.75rem', // 60px
  'rem-7x-large': '4.5rem', // 72px
  'rem-8x-large': '6rem', // 96px
  'rem-9x-large': '8rem', // 120px
};

Example

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

const Div = styled('div', {
  lineHeight: '$em-small',
})

Radii

Properties for border radius.

export const pikasRadii = {
  'none': '0px',
  'xs': '0.125rem', // 2px
  'sm': '0.25rem', // 4px
  'md': '0.375rem', // 6px
  'lg': '0.5rem', // 8px
  'xl': '0.75rem', // 12px
  '2xl': '1rem', // 16px
  '3xl': '1.5rem', // 24px
  'full': '9999px',
};

Example

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

const Div = styled('div', {
  borderRadius: '$sm',
})

Shadows

Properties for box shadow.

export const pikasShadows = {
  'none': 'none',

  'xs': '0 0 2px 0 rgb(0, 0, 0, 0.05)',
  'sm': '0 0 3px 0 rgb(0, 0, 0, 0.1), 0 0 2px -1px rgb(0, 0, 0, 0.1)',
  'md': '0 0 6px -1px rgb(0, 0, 0, 0.1), 0 0 4px -2px rgb(0, 0, 0, 0.1)',
  'lg': '0 0 15px -3px rgb(0, 0, 0, 0.1), 0 0 6px -4px rgb(0, 0, 0, 0.1)',
  'xl': '0 0 25px -5px rgb(0, 0, 0, 0.1), 0 0 10px -6px rgb(0, 0, 0, 0.1)',
  '2xl': '0 0 50px -12px rgb(0, 0, 0, 0.25)',

  'top-xs': '0 -1px 2px 0 rgb(0, 0, 0, 0.05)',
  'top-sm': '0 -1px 3px 0 rgb(0, 0, 0, 0.1), 0 -1px 2px -1px rgb(0, 0, 0, 0.1)',
  'top-md': '0 -4px 6px -1px rgb(0, 0, 0, 0.1), 0 -2px 4px -2px rgb(0, 0, 0, 0.1)',
  'top-lg': '0 -10px 15px -3px rgb(0, 0, 0, 0.1), 0 -4px 6px -4px rgb(0, 0, 0, 0.1)',
  'top-xl': '0 -20px 25px -5px rgb(0, 0, 0, 0.1), 0 -8px 10px -6px rgb(0, 0, 0, 0.1)',
  'top-2xl': '0 -25px 50px -12px rgb(0, 0, 0, 0.25)',

  'bottom-xs': '0 1px 2px 0 rgb(0, 0, 0, 0.05)',
  'bottom-sm': '0 1px 3px 0 rgb(0, 0, 0, 0.1), 0 1px 2px -1px rgb(0, 0, 0, 0.1)',
  'bottom-md': '0 4px 6px -1px rgb(0, 0, 0, 0.1), 0 2px 4px -2px rgb(0, 0, 0, 0.1)',
  'bottom-lg': '0 10px 15px -3px rgb(0, 0, 0, 0.1), 0 4px 6px -4px rgb(0, 0, 0, 0.1)',
  'bottom-xl': '0 20px 25px -5px rgb(0, 0, 0, 0.1), 0 8px 10px -6px rgb(0, 0, 0, 0.1)',
  'bottom-2xl': '0 25px 50px -12px rgb(0, 0, 0, 0.25)',

  'inner-xs': 'inset 0 0 2px 0 rgb(0, 0, 0, 0.05)',
  'inner-sm': 'inset 0 0 3px 0 rgb(0, 0, 0, 0.1), inset 0 0 2px -1px rgb(0, 0, 0, 0.1)',
  'inner-md': 'inset 0 0 6px -1px rgb(0, 0, 0, 0.1), inset 0 0 4px -2px rgb(0, 0, 0, 0.1)',
  'inner-lg': 'inset 0 0 15px -3px rgb(0, 0, 0, 0.1), inset 0 0 6px -4px rgb(0, 0, 0, 0.1)',
  'inner-xl': 'inset 0 0 25px -5px rgb(0, 0, 0, 0.1), inset 0 0 10px -6px rgb(0, 0, 0, 0.1)',
  'inner-2xl': 'inset 0 0 50px -12px rgb(0, 0, 0, 0.25)',

  'inner-top-xs': 'inset 0 -1px 2px 0 rgb(0, 0, 0, 0.05)',
  'inner-top-sm': 'inset 0 -1px 3px 0 rgb(0, 0, 0, 0.1), inset 0 -1px 2px -1px rgb(0, 0, 0, 0.1)',
  'inner-top-md': 'inset 0 -4px 6px -1px rgb(0, 0, 0, 0.1), inset 0 -2px 4px -2px rgb(0, 0, 0, 0.1)',
  'inner-top-lg': 'inset 0 -10px 15px -3px rgb(0, 0, 0, 0.1), inset 0 -4px 6px -4px rgb(0, 0, 0, 0.1)',
  'inner-top-xl': 'inset 0 -20px 25px -5px rgb(0, 0, 0, 0.1), inset 0 -8px 10px -6px rgb(0, 0, 0, 0.1)',
  'inner-top-2xl': 'inset 0 -25px 50px -12px rgb(0, 0, 0, 0.25)',

  'inner-bottom-xs': 'inset 0 1px 2px 0 rgb(0, 0, 0, 0.05)',
  'inner-bottom-sm': 'inset 0 1px 3px 0 rgb(0, 0, 0, 0.1), inset 0 1px 2px -1px rgb(0, 0, 0, 0.1)',
  'inner-bottom-md': 'inset 0 4px 6px -1px rgb(0, 0, 0, 0.1), inset 0 2px 4px -2px rgb(0, 0, 0, 0.1)',
  'inner-bottom-lg': 'inset 0 10px 15px -3px rgb(0, 0, 0, 0.1), inset 0 4px 6px -4px rgb(0, 0, 0, 0.1)',
  'inner-bottom-xl': 'inset 0 20px 25px -5px rgb(0, 0, 0, 0.1), inset 0 8px 10px -6px rgb(0, 0, 0, 0.1)',
  'inner-bottom-2xl': 'inset 0 25px 50px -12px rgb(0, 0, 0, 0.25)',
};

Example

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

const Div = styled('div', {
  boxShadow: '$xs',
})

Sizes

Properties for size.

export const pikasSizes = {
  0: '0px',
  1: '1px',
  2: '0.125rem', // 2px
  4: '0.25rem', // 4px
  6: '0.375rem', // 6px
  8: '0.5rem', // 8px
  10: '0.625rem', // 10px
  12: '0.75rem', // 12px
  14: '0.875rem', // 14px
  16: '1rem', // 16px
  20: '1.25rem', // 20px
  24: '1.5rem', // 24px
  28: '1.75rem', // 28px
  32: '2rem', // 32px
  36: '2.25rem', // 36px
  40: '2.5rem', // 40px
  44: '2.75rem', // 44px
  48: '3rem', // 48px
  56: '3.5rem', // 56px
  64: '4rem', // 64px
  80: '5rem', // 80px
  96: '6rem', // 96px
  112: '7rem', // 112px
  128: '8rem', // 128px
  144: '9rem', // 144px
  160: '10rem', // 160px
  176: '11rem', // 176px
  192: '12rem', // 192px
  208: '13rem', // 208px
  224: '14rem', // 224px
  240: '15rem', // 240px
  256: '16rem', // 256px
  288: '18rem', // 288px
  320: '20rem', // 320px
  384: '24rem', // 384px
};

Example

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

const Div = styled('div', {
  size: '$XXX-SMALL',
})

space

Properties for space.

export const pikasSpaces = {
  0: '0px',
  1: '1px',
  2: '0.125rem', // 2px
  4: '0.25rem', // 4px
  6: '0.375rem', // 6px
  8: '0.5rem', // 8px
  10: '0.625rem', // 10px
  12: '0.75rem', // 12px
  14: '0.875rem', // 14px
  16: '1rem', // 16px
  20: '1.25rem', // 20px
  24: '1.5rem', // 24px
  28: '1.75rem', // 28px
  32: '2rem', // 32px
  36: '2.25rem', // 36px
  40: '2.5rem', // 40px
  44: '2.75rem', // 44px
  48: '3rem', // 48px
  56: '3.5rem', // 56px
  64: '4rem', // 64px
  80: '5rem', // 80px
  96: '6rem', // 96px
  112: '7rem', // 112px
  128: '8rem', // 128px
  144: '9rem', // 144px
  160: '10rem', // 160px
  176: '11rem', // 176px
  192: '12rem', // 192px
  208: '13rem', // 208px
  224: '14rem', // 224px
  240: '15rem', // 240px
  256: '16rem', // 256px
  288: '18rem', // 288px
  320: '20rem', // 320px
  384: '24rem', // 384px
};

Example

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

const Div = styled('div', {
  margin: '$XXX-SMALL',
})

Z-Indices

Properties for z-index.

export const pikasZIndices = {
  'min': -2147483647,
  '3x-low': -1000,
  '2x-low': -100,
  'x-low': -10,
  'low': -1,
  'base': 0,
  'high': 1,
  'x-high': 10,
  '2x-high': 100,
  '3x-high': 1000,
  'max': 2147483647,
};

Example

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

const Div = styled('div', {
  zIndex: '$3x-low',
})

Change Log

You can find the change log here.

Contributing

This documentation can be edited on GitHub here