BeamMP/Docs
1
0
Fork 0
mirror of https://github.com/BeamMP/Docs.git synced 2026-05-19 16:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add more colors and sort them by rainbow

Browse Source
This commit is contained in:
RainlessSky
2026-05-16 12:54:08 -07:00
parent fdc9c038b9
commit 964589db70
1 changed files with 167 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/en/beamng/css-snippets.md
+167 -77
View File
@@ -10,7 +10,7 @@
## Common variables ## Common variables
=== "BeamNG Orange" === "BeamNG CEF Orange"
```css ```css
var(--bng-orange) /*Common orange*/ var(--bng-orange) /*Common orange*/
@@ -43,8 +43,29 @@
var(--white-3) /*20% opacity*/ var(--white-3) /*20% opacity*/
``` ```
=== "BeamNG UI Color Palette" === "BeamNG Vue UI Color Palette"
All of these support adding `-rgb` to the end of the variable name to convert them to raw red, green, blue values. Use -rgb like so: `rgba(var(--bng-orange-500-rgb), 0.5)` for 50% opacity bng-orange-500.
=== "Add Red"
```css
var(--bng-add-red-50)
var(--bng-add-red-100)
var(--bng-add-red-200)
var(--bng-add-red-300)
var(--bng-add-red-400)
var(--bng-add-red-500)
var(--bng-add-red-550)
var(--bng-add-red-600)
var(--bng-add-red-650)
var(--bng-add-red-700)
var(--bng-add-red-750)
var(--bng-add-red-800)
var(--bng-add-red-850)
var(--bng-add-red-900)
```
=== "Orange" === "Orange"
```css ```css
@@ -52,57 +73,54 @@
var(--bng-orange-100) var(--bng-orange-100)
var(--bng-orange-200) var(--bng-orange-200)
var(--bng-orange-300) var(--bng-orange-300)
var(--bng-orange-b400) var(--bng-orange-400)
var(--bng-orange-500) var(--bng-orange-500)
var(--bng-orange-550)
var(--bng-orange-600) var(--bng-orange-600)
var(--bng-orange-650)
var(--bng-orange-700) var(--bng-orange-700)
var(--bng-orange-750)
var(--bng-orange-800) var(--bng-orange-800)
var(--bng-orange-850)
var(--bng-orange-900) var(--bng-orange-900)
``` ```
=== "Cool Gray" === "Ter Peach"
```css ```css
var(--bng-cool-gray-50) var(--bng-ter-peach-50)
var(--bng-cool-gray-100) var(--bng-ter-peach-100)
var(--bng-cool-gray-200) var(--bng-ter-peach-200)
var(--bng-cool-gray-300) var(--bng-ter-peach-300)
var(--bng-cool-gray-400) var(--bng-ter-peach-400)
var(--bng-cool-gray-500) var(--bng-ter-peach-500)
var(--bng-cool-gray-600) var(--bng-ter-peach-550)
var(--bng-cool-gray-700) var(--bng-ter-peach-600)
var(--bng-cool-gray-800) var(--bng-ter-peach-650)
var(--bng-cool-gray-900) var(--bng-ter-peach-700)
var(--bng-ter-peach-750)
var(--bng-ter-peach-800)
var(--bng-ter-peach-850)
var(--bng-ter-peach-900)
``` ```
=== "Ter Blue" === "Ter Yellow"
```css ```css
var(--bng-ter-blue-50) var(--bng-ter-yellow-50)
var(--bng-ter-blue-100) var(--bng-ter-yellow-100)
var(--bng-ter-blue-200) var(--bng-ter-yellow-200)
var(--bng-ter-blue-300) var(--bng-ter-yellow-300)
var(--bng-ter-blue-400) var(--bng-ter-yellow-400)
var(--bng-ter-blue-500) var(--bng-ter-yellow-500)
var(--bng-ter-blue-600) var(--bng-ter-yellow-550)
var(--bng-ter-blue-700) var(--bng-ter-yellow-600)
var(--bng-ter-blue-800) var(--bng-ter-yellow-650)
var(--bng-ter-blue-900) var(--bng-ter-yellow-700)
``` var(--bng-ter-yellow-750)
var(--bng-ter-yellow-800)
=== "Add Blue" var(--bng-ter-yellow-850)
var(--bng-ter-yellow-900)
```css
var(--bng-add-blue-50)
var(--bng-add-blue-100)
var(--bng-add-blue-200)
var(--bng-add-blue-300)
var(--bng-add-blue-400)
var(--bng-add-blue-500)
var(--bng-add-blue-600)
var(--bng-add-blue-700)
var(--bng-add-blue-800)
var(--bng-add-blue-900)
``` ```
=== "Add Green" === "Add Green"
@@ -120,52 +138,124 @@
var(--bng-add-green-900) var(--bng-add-green-900)
``` ```
=== "Add Yellow" === "Baby Blue"
```css ```css
var(--bng-ter-yellow-50) var(--bng-add-babyblue-50)
var(--bng-ter-yellow-100) var(--bng-add-babyblue-100)
var(--bng-ter-yellow-200) var(--bng-add-babyblue-200)
var(--bng-ter-yellow-300) var(--bng-add-babyblue-300)
var(--bng-ter-yellow-400) var(--bng-add-babyblue-400)
var(--bng-ter-yellow-500) var(--bng-add-babyblue-500)
var(--bng-ter-yellow-600) var(--bng-add-babyblue-550)
var(--bng-ter-yellow-700) var(--bng-add-babyblue-600)
var(--bng-ter-yellow-800) var(--bng-add-babyblue-650)
var(--bng-ter-yellow-900) var(--bng-add-babyblue-700)
var(--bng-add-babyblue-750)
var(--bng-add-babyblue-800)
var(--bng-add-babyblue-850)
var(--bng-add-babyblue-900)
``` ```
=== "Add Peach" === "Add Blue"
```css ```css
var(--bng-add-peach-50) var(--bng-add-blue-50)
var(--bng-add-peach-100) var(--bng-add-blue-100)
var(--bng-add-peach-200) var(--bng-add-blue-200)
var(--bng-add-peach-300) var(--bng-add-blue-300)
var(--bng-add-peach-400) var(--bng-add-blue-400)
var(--bng-add-peach-500) var(--bng-add-blue-500)
var(--bng-add-peach-600) var(--bng-add-blue-600)
var(--bng-add-peach-700) var(--bng-add-blue-700)
var(--bng-add-peach-800) var(--bng-add-blue-800)
var(--bng-add-peach-900) var(--bng-add-blue-900)
```
=== "Add Red"
```css
var(--bng-add-red-50)
var(--bng-add-red-100)
var(--bng-add-red-200)
var(--bng-add-red-300)
var(--bng-add-red-400)
var(--bng-add-red-500)
var(--bng-add-red-600)
var(--bng-add-red-700)
var(--bng-add-red-800)
var(--bng-add-red-900)
``` ```
=== "Indigo Blue"
```css
var(--bng-add-indigoblue-50)
var(--bng-add-indigoblue-100)
var(--bng-add-indigoblue-200)
var(--bng-add-indigoblue-300)
var(--bng-add-indigoblue-400)
var(--bng-add-indigoblue-500)
var(--bng-add-indigoblue-550)
var(--bng-add-indigoblue-600)
var(--bng-add-indigoblue-650)
var(--bng-add-indigoblue-700)
var(--bng-add-indigoblue-750)
var(--bng-add-indigoblue-800)
var(--bng-add-indigoblue-850)
var(--bng-add-indigoblue-900)
```
=== "Add Magenta"
```css
var(--bng-add-magenta-50)
var(--bng-add-magenta-100)
var(--bng-add-magenta-200)
var(--bng-add-magenta-300)
var(--bng-add-magenta-400)
var(--bng-add-magenta-500)
var(--bng-add-magenta-550)
var(--bng-add-magenta-600)
var(--bng-add-magenta-650)
var(--bng-add-magenta-700)
var(--bng-add-magenta-750)
var(--bng-add-magenta-800)
var(--bng-add-magenta-850)
var(--bng-add-magenta-900)
```
=== "Ter Blue Gray"
```css
var(--bng-ter-blue-gray-50)
var(--bng-ter-blue-gray-100)
var(--bng-ter-blue-gray-200)
var(--bng-ter-blue-gray-300)
var(--bng-ter-blue-gray-400)
var(--bng-ter-blue-gray-500)
var(--bng-ter-blue-gray-550)
var(--bng-ter-blue-gray-600)
var(--bng-ter-blue-gray-650)
var(--bng-ter-blue-gray-700)
var(--bng-ter-blue-gray-750)
var(--bng-ter-blue-gray-800)
var(--bng-ter-blue-gray-850)
var(--bng-ter-blue-gray-900)
```
=== "Cool Gray"
```css
var(--bng-cool-gray-50)
var(--bng-cool-gray-100)
var(--bng-cool-gray-200)
var(--bng-cool-gray-300)
var(--bng-cool-gray-400)
var(--bng-cool-gray-500)
var(--bng-cool-gray-550)
var(--bng-cool-gray-600)
var(--bng-cool-gray-650)
var(--bng-cool-gray-700)
var(--bng-cool-gray-750)
var(--bng-cool-gray-800)
var(--bng-cool-gray-850)
var(--bng-cool-gray-900)
```
=== "Other"
```css
var(--bng-off-black) /*Used in Vue for buttons and some headers*/
var(--bng-off-white) /*Used in Vue for interactable elements*/
var(--bng-off-white-brighter) /*Used in Vue for headers*/
```
=== "Extra color presets" === "Extra color presets"
```css ```css