@paprika/stylers

Description

The stylers package is a companion for the tokens package, they are both implementations of the Starling Design System for use in styling user interfaces. The stylers are more than just simple values however, they are helper functions and bundles of CSS rules.

Installation

yarn add @paprika/stylers

or with npm:

npm install @paprika/stylers

Usage

stylers are intended for use internally and externally.

Internally, when contributors create Paprika components, and externally, when application developers consume Paprika to create user interfaces with the Starling Design System.

Consumers

Typically consumers will be using tokens with Sass. They can be included in any Sass file with:

@import "@paprika/stylers/lib/helpers.scss";

Then you should be able to use Sass functions like font-size() and spacer() as well as mixins like @include truncate-text; and @include focus-ring(true).

Contributors

For scalability, in implementation of the stylers is split into:

• includes.js and formIncludes.js (for bundles of styling rules)
• helpers.js (functions that take an input and generate a value or styling rule/rules).

Links

• Storybook - Includes
• Storybook - Helpers
• Storybook - Sass Mixins
• Storybook - Sass Functions
• Paprika coding conventions wiki
• Github source code
• Github create issue
• ChangeLog