[Feature] Add Base Components

[Webkinger]

Description

Add the base components to Cryptic.

Custom controls are to be developed for the game, so that the user interface can be adapted to a custom design. Another advantage is the possibility to create different themes and styles later.

For questions about the design please contact Philipp or Nibiru by Cryptic-Discord
For questions about the frontend development please contact @MaxiHuHe04

Additional context

All designs for the base components: In picture format
All base components in one overview: Live view

Icons for sidebar and inputs: Tabler Icons | Tabler icon npm

Typeface

Font 1: Jost
Font 2: Nothing You Could Do
Font size: 20px

General information

Small border radius: 8px (Button, Input etc.)
Big border radius: 16px (Pop-Up, Kacheln etc.)

Colors

Primary (Main Color)

Color	HEX	Description
	#2ECC70	Default
	#1F8C4C	Hover
	#2E473E	Disabled

Success

Color	HEX	Description
	#3ABB18	Default
	#277A10	Hover
	#2F5629	Disabled

Warning

Color	HEX	Description
	#F1C30E	Default
	#B3910B	Hover
	#675926	Disabled

Danger / Error

Color	HEX	Description
	#F00040	Default
	#B0002F	Hover
	#671E35	Disabled

Info

Color	HEX	Description
	#3281F6	Default
	#245EB5	Hover
	#2D456C	Disabled

Background / Font / Other

Color	HEX	Description
	#748781	Checkbox, radio, switch and light font disabled
	#222D2D	Button font dark disabled
	#25252B	Input background disabled
	#2B2B31	Background sidebar submenu
	#2F2F36	Background
	#1A1C23	Font dark
	#1D1D24	Background inputs Popup background dark
	#1E1E24	Background sidebar
	#434349	Font placeholder disabled
	#888888	Placholder Button font disabled
	#BEBEBE	Font grey
	#FFFFFF	Font light Popup background light

Base components

Please check off finished control

• Buttons #279
• Dropdown #280
• Inputs
  • Checkbox, Switch #281
  • Number #282
  • Range #290
  • Search #289
  • Text #288
• Popups #287
• Progressbar #286
• Radio #285
• Sidebar #284
• Tooltip #283
• Alerts #301
• Tab Navigation #302

[MarcelCoding]

For the font you could use this: https://www.npmjs.com/package/@fontsource/jost. With that we don't have to serve the font via Google Fonts or do manually update.

npm

@fontsource/jost

Self-host the Jost font in a neatly bundled NPM package.

[Webkinger]

Tabler icons on npm https://www.npmjs.com/package/angular-tabler-icons

Now Tabler icons for Angular available!!!

[Akida31]

implemented first version of radio button here: Akida31/cryptic-frontend@8078007

[ClientCrash]

As suggested in discord i would split this issue into multiple issues (Buttons, Radiobuttons, ...) and create a milestone to track the progress. Its to big to implement all at once.

[ClientCrash]

Since not all contributers can check the checkboxes, please convert each box to an issue linked to that box. (The little button on the right)

[MarcelCoding]

@ClientCrash should I assign you to one?

[Akida31]

@EggerWebdesign could we move the label for the buttons to the right side of the buttons? Currently if the labels would have different sizes the buttons wouldn’t be aligned nicely

[DevMimas]

Where is the problem to align the font in cents? If the text of the button is always right-aligned, it takes up much more space.

[Webkinger]

I have added the design for the submenu when no computers are available

[Webkinger]

The font size has change to 20px!