Nostradamus Predicting Maelstroms

    @statflo/textkit-ui-library
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    TextKit by Statflo

    TextKit React UI Library

    Welcome to our UI component library built in React.

    Installation

    yarn add @statflo/textkit-ui-library

    Fonts

    If you want to use our brand fonts simply add the following to the head of your HTML file.

    <link rel="stylesheet" href="https://cdn.statflo.com/brandon/brandon.css" />

    Our BrandonText font comes in three different weights.

    • Regular: (weights 100-400)
    • Medium: (weights 500-600)
    • Bold: (weights 700-900)

    Documentation

    You can import any of our components using the following convention.

    import { Button, Checkbox, ... } from "@statflo/textkit-ui-library";

    For a list of our components and more detailed documentation checkout our Storybook

    Styling with Tailwind CSS

    We are using Tailwind CSS for all of our Styling. We prefix all the classes with tk- to eliminate any potential css collisions with your existing styles.

    If you want to use Tailwind within your project you can install Tailwind using one of thier Framework guides.

    Setup with our colors and prefix

    Here is a sample tailwind.config.js file you can use that will include our prefix and colors.

    const tailwindConfig = require('@statflo/textkit-ui-library/dist/tailwind.config.js')
    
    module.exports = {
      prefix: tailwindConfig.prefix,
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        ".public/**/*.{html,htm}"
      ],
      theme: {
        extend: {
          ...tailwindConfig.theme.extend
        },
      },
      plugins: [],
    }

    Setup with our colors and without our prefix

    Here is a sample tailwind.config.js file you can use that will include our prefix and colors.

    const tailwindConfig = require('@statflo/textkit-ui-library/dist/tailwind.config.js')
    
    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        ".public/**/*.{html,htm}"
      ],
      theme: {
        extend: {
          ...tailwindConfig.theme.extend
        },
      },
      plugins: [],
    }

    Our colors

    Below is a mapping of our current colors and their names

    const defaultTheme = require('tailwindcss/defaultTheme');
    
    module.exports = {
        fontFamily: {
            sans: ['BrandonText', ...defaultTheme.fontFamily.sans],
        },
        fontWeight: {
            thin: 400,
            extralight: 400,
            light: 400,
            normal: 400,
            medium: 500,
            semibold: 500,
            bold: 700,
            extrabold: 700,
            black: 700,
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            white: '#FFFFFF',
            black: '#000000',
            main: {
                default: 'hsl(0, 0%, 17.6%)',
                l1: 'hsl(0, 0%, 32.6%)',
                l2: 'hsl(0, 0%, 47.6%)',
                l3: 'hsl(0, 0%, 62.6%)',
            },
            primary: {
                default: 'hsl(229.3, 63.6%, 56.9%)',
                hover: 'hsl(229.3, 63.6%, 51.9%)',
                active: 'hsl(229.3, 63.6%, 46.9%)',
                unused: 'hsla(229.3, 63.6%, 56.9%, 0.8)',
                disabled: 'hsla(229.3, 63.6%, 56.9%, 0.6)',
            },
            gray: {
                hover: 'hsl(229.3, 63.6%, 96%)',
                active: 'hsl(229.3, 63.6%, 94%)',
                secondary: 'hsl(0, 0%, 93%)',
                spacer: 'hsl(0, 0%, 90%)',
                highlight: 'hsl(0, 0%, 99%)',
                shadow: 'hsla(0, 0%, 12%, 0.15)',
            },
            success: {
                default: '#347F4D',
                l1: '#58D07E',
                l2: '#EDF9F0'
            },
            warning: {
                default: '#B95000',
                l1: '#FF8F39',
                l2: '#FFF4EC'
            },
            error: {
                default: '#C92F24',
                l1: '#F17E7E',
                l2: '#FCEAE8',
            },
            info: {
                default: '#2E5AAC',
                l1: '#8EACFB',
                l2: '#EBF1FF',
                active: '#134CEE',
            },
            brand: {
                navy: '#293C89',
                magenta: '#E1207B',
                teal: '#3FB8C0'
            },
            secondary: {
                stark: '#4B9BFF',
                mormont: '#FFB46E',
                lannister: '#FF5F5F',
                martell: '#50D2A0',
                tyrell: '#FF73C3',
                targaryen: '#9BE169',
                dothraki: '#9258E7',
                kahstark: '#FFD76E',
                tarly: '#5FC8FF',
            }
        }
    };

    Keywords

    none

    Install

    npm i @statflo/textkit-ui-library

    DownloadsWeekly Downloads

    1

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    898 kB

    Total Files

    231

    Last publish

    Collaborators

    • productlabs
    • alexeidarmin
    • dmstatflo
    • statflo-dev
    • statfloian