@kiwibot/foundation v1.0.4

Foundation

Foundation is the library where you will find definitions of colors, spaces, shadows, and animations of Kiwibot to work with your components regardless of whether it's React, Vue, Svelte, etc.

You will find a way to work directly with JS, CSS, SCSS, and even with TailwindCSS.

Installation

NPM:

npm install @kiwibot/foundation

YARN:

yarn add @kiwibot/foundation

JS

Colors

Usage

import { tokens } from '@kiwibot/foundation';

console.log(tokens.color.light.main.value); // #2c7be5

Radius

Usage

import { tokens } from '@kiwibot/foundation';

console.log(tokens.radius.large.value); // 20px

Animations

Usage

import { tokens } from '@kiwibot/foundation';

console.log(tokens.animations.default.value); // all 400ms cubic-bezier(0.420, 0.000, 0.580, 1.000)

Shadows

Usage

import { tokens } from '@kiwibot/foundation';

console.log(tokens.shadows['level-1'].value); // 0px 4px 6px rgba(33, 37, 41, 0.2)

Spacings

Usage

import { tokens } from '@kiwibot/foundation';

console.log(tokens.spacings[16].value); // 16px

CSS & SCSS

To work with CSS or SCSS, you only need to import the files as follows:

JSX / TSX

// SAMPLE: CSS
import '@kiwibot/foundation/lib/tokens/css/colors.css';

// SAMPLE: SCSS
import '@kiwibot/foundation/lib/tokens/scss/colors.scss';

TailwindCSS

To work with TailwindCSS, you only need to add the following require in the tailwind.config.js file:

// tailwind.config.js

module.exports = {
  // ...
  // Add this line
  presets: [require('@kiwibot/foundation/lib/tailwindPreset.config.js')],
  // ...
};