pbstyles

Figma community | Behance

prosazhin basic styles

Basic styles for quick prototyping. Includes typography, semantic colors, color palette, basic sizes, containers and columns, breakpoints, border sizes, rounding, opacity, and shadows.

For generating styles, design tokens are used based on the Style Dictionary package documentation, but extended with mixins thanks to the Mixin Dictionary package. For generating a Tailwind Theme, the Tailwind Dictionary package is used.

Installation

yarn add pbstyles
# or
npm install pbstyles

Includes

Basic variables

| Category | CSS | LESS | SCSS | Tailwind Theme | | :-------------------- | :-- | :--- | :--- | :------------- | | Typography | + | + | + | + | | Semantic colors | + | + | + | + | | Colors palette | + | + | + | + | | Basic sizes | + | + | + | + | | Containers sizes | + | + | + | + | | Columns | + | + | + | - | | Border sizes | + | + | + | + | | Border rounding sizes | + | + | + | + | | Opacity | + | + | + | + | | Shadows | + | + | + | + |

Mixins

| Mixin | CSS | LESS | SCSS | Tailwind Theme | | :---------- | :-- | :--- | :--- | :------------- | | Animation | - | + | + | - | | Typography | - | + | + | + | | Breakpoints | - | + | + | + |

Usage examples

CSS Variables

Package contains only a basic set of variables. At the moment, CSS does not yet have the ability to use mixins.

@import 'pbstyles/styles/css';

LESS

Package contains basic set of LESS variables and mixins.

@import 'pbstyles/styles/less';

SCSS

Package contains basic set of SCSS variables and mixins.

@import 'pbstyles/styles/scss';

Tailwind Theme

Package contains Tailwind Theme.

const theme = require('pbstyles/styles/tailwind-theme');

module.exports = {
  ...
  theme: {
    ...theme,
    extend: {
      ...theme.extend,
    },
  },
  ...
};