open-index/open-npm huggingface dataset:
npm package: @moki.codes/mokui-animation
Description: animation web ui subsystem
Author: Kirill Morozov
Latest version: 0.3.0

animation
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
animation subsystem block provides child elements with animations.

animation types:

deceleration, standard, acceleration, sharp

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-animation
```

Styles
--------------------------------------------------------------------------------
```
@import  "@moki.codes/mokui-animation/dist/mokui-animation.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
<div class="animation">
        animation variables available to all children
        <div style="
                transition: opacity
                            var(--animation-duration-s)
                            cubic-bezier(
                                var(--animation-fn-sharp-1),
                                var(--animation-fn-sharp-2),
                                var(--animation-fn-sharp-3),
                                var(--animation-fn-sharp-4));
        ">
                animated content
        </div>
</div>
```

Variables
--------------------------------------------------------------------------------
animation block provides following animation variables
for usage inside cubic-bezier:

deceleration:

* --animation-fn-deceleration-1

* --animation-fn-deceleration-2

* --animation-fn-deceleration-3

* --animation-fn-deceleration-4

standard:

* --animation-fn-standard-1

* --animation-fn-standard-2

* --animation-fn-standard-3

* --animation-fn-standard-4

acceleration:

* --animation-fn-acceleration-1

* --animation-fn-acceleration-2

* --animation-fn-acceleration-3

* --animation-fn-acceleration-4

sharp:

* --animation-fn-sharp-1

* --animation-fn-sharp-2

* --animation-fn-sharp-3

* --animation-fn-sharp-4

animation durations:

* --animation-duration-xs,

* --animation-duration-s,

* --animation-duration-m,

* --animation-duration-l,

* --animation-duration-xl,

* --animation-duration-2xl,

* --animation-duration-3xl
npm package: @moki.codes/mokui-elevation
Description: elevation shadow web ui subsystem
Author: Kirill Morozov
Latest version: 0.4.2

elevation
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
elevation subsystem block provides child elements with elevation shadows

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-elevation
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-elevation/dist/mokui-elevation.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
<div class="elevation">
        elevation variables available to all children
        <div class="elevation_depth_8">
                this div has elevation of depth 8
        </div>
</div>
```

Variables
--------------------------------------------------------------------------------
elevation block provides following shadow color umbra/penumbra/ambient variables:

* --elevation-color-umbra

* --elevation-color-penumbra

* --elevation-color-ambient

shadow animation transition duration:

* --elevation-transition-duration

Modificators
--------------------------------------------------------------------------------
| name        | value         | description                                    |
| ----------- | ------------- | ---------------------------------------------- |
| depth       | n where n is  | gives elevation shadow of the specified depth  |
|             | in the range: | value                                          |
|             | [0, 24]       |                                                |
npm package: @moki.codes/mokui-grid
Description: grid web ui component
Author: Kirill Morozov
Latest version: 0.3.2

grid
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
grid default behavior is to define grid with cells according to the screen size.
Take note that screen-* hardcoded in the media queries due to the native css
limitations.

| screen size  | number of columns |
| ------------ | ----------------- |
| < screen-s   | --grid-columns-xs |
| >= screen-s  | --grid-columns-s  |
| >= screen-m  | --grid-columns-m  |
| >= screen-l  | --grid-columns-l  |
| >= screen-xl | --grid-columns-xl |

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-grid
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-grid/dist/mokui-grid.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
<div class="theme theme_grid-columns_default">
        <div class="grid grid_col-gap_none grid_row-gap_none">
                <div class="grid__cell">cell 1</div>
                <div class="grid__cell">cell 2</div>
                <div class="grid__cell">cell 3</div>
                <div class="grid__cell">cell 4</div>
        </div>
</div>
```

Variables
--------------------------------------------------------------------------------
makes usage of the variables defined at the theme level,
override to alter behavior

* --grid-columns-*

* --gap

Modificators
--------------------------------------------------------------------------------
| name        | value         | description                                    |
| ----------- | ------------- | ---------------------------------------------- |
| col-gap     | none, half,   | sets gap between columns to the multiple of    |
|             | default,      | the --gap variable defined at the theme level  |
|             | double        | 0, 1/2, 1, 2 respectively                      |
| row-gap     | none, half,   | sets gap between rows to the multiple of       |
|             | default,      | the --gap variable defined at the theme level  |
|             | double        | 0, 1/2, 1, 2 respectively                      |
npm package: @moki.codes/mokui-link
Description: link web ui component
Author: Kirill Morozov
Latest version: 1.0.0

link
--------------------------------------------------------------------------------
basic link styling block component

Description
--------------------------------------------------------------------------------
a link styling

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-link
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-theme/dist/mokui-theme.css"
@import "@moki.codes/mokui-link/dist/mokui-link.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
<a href="https://google.com" class="link">
        google
</a>
```

Modificators
--------------------------------------------------------------------------------
| name              | value             | description                          |
| ----------------- | ----------------- | ------------------------------------ |
| inline            |                   | inline link styles, without padding  |
npm package: @moki.codes/mokui-text
Description: text web ui component
Author: Kirill Morozov
Latest version: 1.0.0

text
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
text block provides typography subsystem, includes: line length, alignment,
sizing, weight and style.
indents consecutive paragraphs with complimentary modular scale base.
default .text line-height set to --msp-1 to establish vertical rythm.

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-text
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-text/dist/mokui-text.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
...
<p class="text text_length_m text_size_m text_weight_regular">
        paragraph text goes here.
</p>
...
```

Modificators
--------------------------------------------------------------------------------
| name        | value         | description                                    |
| ----------- | ------------- | ---------------------------------------------- |
| length      |               | makes line take                                |
|             | s             | 30 characters                                  |
|             | m             | 60 characters                                  |
| align       | left, center, | horizontal text alignment                      |
|             | right         |                                                |
| size        | 2xs, xs, s, m | sets font-size from complimentary modular      |
|             | l, xl, 2xl,   | scale with appropriate line-height from        |
|             | 3xl, 4xl      | primary modular scale and adjustred letter     |
|             |               | spacing for large text                         |
| weight      | light,        | sets text weight to 300                        |
|             | regular,      | 400                                            |
|             | medium        | 500                                            |
| style       | small-caps    | sets text to small-caps style if font is       |
|             |               | open type.                                     |