Update CONTRIBUTING.md

This commit is contained in:
Karmaa
2025-09-13 21:35:49 -05:00
committed by GitHub
parent ab69661751
commit 0f75cd4d16

View File

@@ -1,3 +1,5 @@
# Contributing
## Prerequisites
- [Node.js](https://nodejs.org/en/download/) (built with v24)
@@ -24,7 +26,6 @@ npm run dev
npm run dev:backend
```
a
This will start the backend and the frontend Vite server. You can access Termix by going to `http://localhost:5174/`.
## Contributing
@@ -46,7 +47,7 @@ This will start the backend and the frontend Vite server. You can access Termix
```
6. **Open a pull request**: Go to the original repository and create a PR with a clear description.
## 📝 Guidelines
## Guidelines
- Follow the existing code style. Use Tailwind CSS with shadcn components.
- Use the below color scheme with the respective CSS variable placed in the `className` of a div/component.
@@ -60,7 +61,7 @@ This will start the backend and the frontend Vite server. You can access Termix
### Background Colors
| CSS Variable | Color Value | Usage | Description |
| ----------------------------- | ----------- | --------------------------- | ---------------------------------------- |
|-------------------------------|-------------|-----------------------------|------------------------------------------|
| `--color-dark-bg` | `#18181b` | Main dark background | Primary dark background color |
| `--color-dark-bg-darker` | `#0e0e10` | Darker backgrounds | Darker variant for panels and containers |
| `--color-dark-bg-darkest` | `#09090b` | Darkest backgrounds | Darkest background (terminal) |
@@ -72,7 +73,7 @@ This will start the backend and the frontend Vite server. You can access Termix
### Element-Specific Backgrounds
| CSS Variable | Color Value | Usage | Description |
| ------------------------ | ----------- | ------------------ | --------------------------------------------- |
|--------------------------|-------------|--------------------|-----------------------------------------------|
| `--color-dark-bg-input` | `#222225` | Input fields | Background for input fields and form elements |
| `--color-dark-bg-button` | `#23232a` | Button backgrounds | Background for buttons and clickable elements |
| `--color-dark-bg-active` | `#1d1d1f` | Active states | Background for active/selected elements |
@@ -81,7 +82,7 @@ This will start the backend and the frontend Vite server. You can access Termix
### Border Colors
| CSS Variable | Color Value | Usage | Description |
| ---------------------------- | ----------- | --------------- | ---------------------------------------- |
|------------------------------|-------------|-----------------|------------------------------------------|
| `--color-dark-border` | `#303032` | Default borders | Standard border color |
| `--color-dark-border-active` | `#2d2d30` | Active borders | Border color for active elements |
| `--color-dark-border-hover` | `#434345` | Hover borders | Border color on hover states |
@@ -92,7 +93,7 @@ This will start the backend and the frontend Vite server. You can access Termix
### Interactive States
| CSS Variable | Color Value | Usage | Description |
| ------------------------ | ----------- | ----------------- | --------------------------------------------- |
|--------------------------|-------------|-------------------|-----------------------------------------------|
| `--color-dark-hover` | `#2d2d30` | Hover states | Background color for hover effects |
| `--color-dark-active` | `#2a2a2c` | Active states | Background color for active elements |
| `--color-dark-pressed` | `#1a1a1c` | Pressed states | Background color for pressed/clicked elements |