Used for text. Contains one element <Text>

Peer dependencies evokit. More about install

npm install evokit-text --save

More about usage

import React from 'react';
import { Text } from 'evokit-text';
import 'evokit-text/style.css';

const App = () => (
    <Text text-align='center'>
        ...
    </Text>
);

Also supports other valid props of the React Element. More about use props

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

@custom-media --ek-text-media-small only screen and (min-width: 480px);
@custom-media --ek-text-media-medium only screen and (min-width: 768px);
@custom-media --ek-text-media-large only screen and (min-width: 960px);
@custom-media --ek-text-media-wide only screen and (min-width: 1200px);
@custom-media --ek-text-media-huge only screen and (min-width: 1400px);

:root {
    /* base */
    --ek-text-line-height: 1em;
    /* prop 'text-size' */
    --ek-text-size-small: 11px;
    --ek-text-size-default: 13px;
    --ek-text-size-big: 15px;
    --ek-text-size-h1: 24px;
    --ek-text-size-h2: 22px;
    --ek-text-size-h3: 20px;
    --ek-text-size-h4: 18px;
    --ek-text-size-h5: 16px;
    --ek-text-size-h6: 14px;
    /* prop 'text-lheight' */
    --ek-text-line-height-default: var(--ek-text-line-height);
    --ek-text-line-height-medium: 1.25em;
    --ek-text-line-height-large: 1.5em;
}

• block - shown as blocky
• inline-block - block element that is wrapped around by other elements
• inline - displayed as inline
• none - remove from a document

<Text text-display='none'>
    ...
</Text>

• none - value: 0px
• inherit - inherits the meaning of the parent
• small - css variable --ek-text-size-small, default value: 11px
• default - css variable --ek-text-size-default, default value: 13px
• big - css variable --ek-text-size-big, default value: 15px
• h1 - css variable --ek-text-size-h1, default value: 24px
• h2 - css variable --ek-text-size-h2, default value: 22px
• h3 - css variable --ek-text-size-h3, default value: 20px
• h4 - css variable --ek-text-size-h4, default value: 18px
• h5 - css variable --ek-text-size-h5, default value: 16px
• h6 - css variable --ek-text-size-h6, default value: 14px

<Text text-size='big'>
    ...
</Text>

• default - value: 400
• thin - value: 100
• light - value: 300
• medium - value: 500
• bold - value: 700
• black - value: 900

or

• 100 200 300 400 500 600 700 800 900

<Text text-weight='bold'>
    ...
</Text>

• left - Align text to the left
• center - Center alignment of text
• right - Align text to the right
• justify - Distributes all text evenly across width

<Text text-align='...'></Text>

• top - Align the top edge of the element to the top of the tallest line item.
• bottom - Aligns the base of the current element at the bottom of the element of the line below it all
• middle - The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element
• baseline - Aligns the baseline of the current element to the parent's baseline
• sub - The element is depicted as subscript, in the form of a subscript
• super - The element is depicted as superscript, in the form of a superscript
• text-top - The top border of the element is aligned to the highest text element of the current line
• text-bottom - The bottom border of the element is aligned at the very bottom edge of the current line

<Text text-valign='baseline'>
    ...
</Text>

• normal - The text is displayed as usual
• nowrap - All text is displayed in one line
• pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
• pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
• pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
• break - Line wrapping is added automatically
• ellipsis - The text is cut and an ellipsis is added to the end of the line
• two-line - Text is cut in two lines
• three-line - Text is cut in three lines

<Text text-wrap='ellipsis'>
    ...
</Text>

• italic - Cursive text
• strike - Creates strikethrough text
• underline - Sets underlined text
• overline - The line runs over the text

<Text text-style='strike'>
    ...
</Text>

• none - Does not change the case of characters
• capitalize - The first character of each word in the sentence will be capitalized
• lowercase - All text characters are lowercase (lower case)
• uppercase - All text characters become uppercase (upper case)

<Text text-transform='uppercase'>
    ...
</Text>

• default - css variable --ek-text-line-height-default, default value: 1em
• medium - css variable --ek-text-line-height-medium, default value: 1.25em
• large - css variable --ek-text-line-height-large, default value: 1.5em

<Text text-lheight='large'>
    ...
</Text>

Set the THEME_NAME depending on the theming

<Text text-color={THEME_NAME}>
    ...
</Text>