This packages contains the global Superflows configuration including the default UI theme.
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 |
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 |
npm install --save react-sf-themes
import React from 'react'
import Themes from 'react-sf-themes'
const App = () => {
console.log('Themes', Themes.getTheme());
return <div></div>
}
export default App
To run tests locally:
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