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

| Color | Type | Value | | ------- | ------------------ | --------- | | light | main | #2c7be5 | | light | text | #12263f | | light | button-text | #FFFFFF | | light | body | #F8FBFD | | light | border | #edf2f9 | | light | card | #FFFFFF | | light | subtitle | #95AAC9 | | light | pseudo-subtitle | #95AAC9 | | light | divider | #E3EBF6 | | neutral | green | #9ACD32 | | neutral | transparent-green | #9acd3220 | | neutral | red | #FF6347 | | neutral | transparent-red | #FF63471a | | neutral | orange | #FFC105 | | neutral | transparent-orange | #FFC10520 | | dark | main | #4070DE | | dark | text | #FFFFFF | | dark | button-text | #FFFFFF | | dark | body | #202327 | | dark | border | #2D323A | | dark | card | #26292E | | dark | subtitle | #616C7B | | dark | pseudo-subtitle | #909EAF | | dark | divider | #373D46 |

Usage

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

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

Radius

| Type | Value | | ----- | ----- | | small | 8px | | large | 20px |

Usage

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

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

Animations

| Type | Value | | ------- | -------------------------------------------------- | | default | all 400ms cubic-bezier(0.420, 0.000, 0.580, 1.000) |

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

| Type | Value | | ------- | ----------------------------------- | | level-1 | 0px 4px 6px rgba(33, 37, 41, 0.2) | | level-2 | 0px 2px 10px rgba(33, 37, 41, 0.15) |

Usage

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

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

Spacings

| Type | Value | | ---- | ----- | | 4 | 4px | | 8 | 8px | | 16 | 16px | | 32 | 32px | | 40 | 40px | | 48 | 48px | | 56 | 56px | | 64 | 64px | | 80 | 80px | | 100 | 100px |

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')],
  // ...
};