THEME DATA

BRAND COLORS
#0073d1
primary
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#b3d400
secondary
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
SEMANTIC COLORS
#08c74b
success
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#ffd166
warning
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#ef1347
danger
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#bbc2c7
disabled
M0
M10
M20
M30
M40
M50
M60
M70
M80
M90
base
LAYOUT COLORS
#fefefe
layout
M0
M10
M20
M30
M40
M50
M60
M70
M80
M90
base
TEXT COLORS
#2b2b2b
textOnBackground
M0
M10
M20
M30
M40
M50
M60
M70
M80
M90
base
#fafafa
textOnBackgroundInverse
M0
M10
M20
M30
M40
M50
M60
M70
M80
M90
base
#fafafa
textOnPrimary
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#fafafa
textOnSecondary
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#fafafa
textOnSuccess
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#fafafa
textOnDanger
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
#fafafa
textOnDisabled
M0
M10
M20
M30
M40
M50
M60
M70
M80
M90
base

Atoms

Button

../capitano-components/src/atoms/Button/Button.tsx

Heading

../capitano-components/src/atoms/Heading/Heading.tsx

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Icon

../capitano-components/src/atoms/Icon/Icon.tsx

Icon component for custom Icons provided as svg sprite with an id coloring should be done via currentcolor

As default icon set the material design icons from react-icons are used

ArrowDown
ArrowLeft
ArrowRight
ArrowUp
BellOutline
Bell
Menu
Check
Close
Download
Edit
Folder
Home
Image
Info
InfoOutline
Mail
MailOutline
Lock
LockOpen
LocationMarker
Power
Copy
Phone
Loop
Refresh
Search
Settings
StarHalf
StarOutline
Star
Delete
Upload
Person
PersonOutline
Warning

Input

../capitano-components/src/atoms/Input/Input.tsx

Simple Input

Outlined Input

Label

../capitano-components/src/atoms/Label/Label.tsx

Label for form elements

Spinner

../capitano-components/src/atoms/Spinner/Spinner.tsx

Fallback loader based on cyclone emoji:

🌀

Text

../capitano-components/src/atoms/Text/Text.tsx
normal base Text
normal monospace Text
base text with ellipsis on text overflow

ValidationMessage

../capitano-components/src/atoms/ValidationMessage/ValidationMessage.tsx

Validation Message for forms

your input is valid
your input is invalid

Molecules

FormInput

../capitano-components/src/molecules/FormInput/FormInput.tsx

Simple Input

Outlined Input

Select

../capitano-components/src/molecules/Select/Select.tsx

A Select box with autocomplete on typing

Organisms

Templates

Pages

Logic

Component

../capitano-components/src/logic/Component/Component.tsx

a component with integrated state management

Every app needs a counter!

0