Color palette

src\styled-components\color-palette\color-palette.tsx
primary.light
primary.main
primary.dark
secondary.light
secondary.main
secondary.dark
error.main
warning.main
info.main
text.primary
text.secondary
text.disabled

Typography

src\styled-components\typography\typography.tsx

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

Icons

src\styled-components\icons\icons.tsx

Surfaces

Paper

src\styled-components\surfaces\paper\paper.tsx

default

square

variant='outlined'

elevation={3}

elevation={10}

Basics

ButtonGroup

src\styled-components\basics\button-group\button-group.tsx

Variants/colors:

Sizes/orientation:

Button

src\styled-components\basics\button\button.tsx

Views:

Sizes:

SearchField

src\styled-components\basics\search-field\search-field.tsx
outlined:

standard:

filled:

Switch

src\styled-components\basics\switch\switch.tsx

Primary and secondary(default) colors:

Label positions:

Sizes:

ToggleButtons

src\styled-components\basics\toggle-button\toggle-button.tsx

Variants/colors:

Loading

Progress

src\styled-components\loading\progress\progress.tsx

Linear:

Circular:

Frontend Style Guide