Color theme for the Superflows component system
npm install react-sf-themes> This packages contains the global Superflows configuration including the default UI theme.
  
- Introduction
- How It Works
- Theme
- Quickstart
- Customization
- Tests
Use the react-sf-themes package to access the global configuration and the default theme provided by Superflows. If needed you can customize it as you want by changing the default values to suit your UI.
Customization works as follows:
- Access the default configuration and theme values using this package
- Modify them as per your requirement
- Pass the modified object to your Superflows components
This package provides default values for:
- Variants
- Types
- Colors
- Spaces
- Dimensions
- Modes
- InputTypes
- Breakpoints
Superflows provides the following variants:
- Primary
- Secondary
- Danger
- Success
- Warning
- Info
- Light
- Dark
Types are as followed:
- Filled
- Outlined
Following colors are provided:
| Variant | Background Color | Text Color |
|--------------|-------------------|--------------------|
| Primary | #0d6efd | #ffffff |
| Secondary | #6c757d | #ffffff |
| Danger | #dc3545 | #ffffff |
| Success | #198754 | #ffffff |
| Warning | #ffc107 | #000000 |
| Info | #0dcaf0 | #000000 |
| Light | #f8f9fa | #000000 |
| Dark | #212529 | #ffffff |
Spaces are dimensions, which are intended to be used for spacings, paddings, margins, etc.
| Space | Value
|------------|-------------------
| min | 5
| ltl | 10
| mod | 15
| big | 20
| lrg | 25
| xlg | 30
| max | 35
Dimensions are default dimensions for certain Superflows components
| Dimension | Value
|---------------------------|-------------------
| navHeight | 60
| navBannerHeight | 30
| menuWidth | 120
| notificationListWidth | 200
| notificationListMaxWidth | 200
Modes are:
| Mode | Value
|------------|-------------------
| Day | day
| Night | night
Input types are types of input accepted from the users in the input field.
| InputType | Value
|-----------------|-------------------
| Name | name
| Email | email
| Mobile | mobile
| Date | date
| DateOfBirth | dateOfBirth
| Gender | gender
Breakpoints are widths, that are used in responsive design.
| Breakpoint | Value
|-----------------|-------------------
| mobile | 480
| tablet | 768
| laptop | 1024
| desktop | 1200
``bash`
npm install --save react-sf-themes
`tsx
import React from 'react'
import Themes from 'react-sf-themes'
const App = () => {
console.log('Themes', Themes.getTheme());
return
export default App
`
To run tests locally:
`bash``
npm test
PASS src/index.test.tsx
- Themes
- ✓ Render (3ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.tsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.445s
MIT © superflows-dev