[Feature] Add Base Components
Webkinger opened this issue · 10 comments
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
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
Self-host the Jost font in a neatly bundled NPM package.
Tabler icons on npm https://www.npmjs.com/package/angular-tabler-icons
Now Tabler icons for Angular available!!!
implemented first version of radio button here: Akida31/cryptic-frontend@8078007
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.
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)
@ClientCrash should I assign you to one?
@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
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.
I have added the design for the submenu when no computers are available
The font size has change to 20px!