From 964589db7085396ae1f1940bd0993344e6eb4fe9 Mon Sep 17 00:00:00 2001 From: RainlessSky <174295816+RainlessSky@users.noreply.github.com> Date: Sat, 16 May 2026 12:54:08 -0700 Subject: [PATCH] Add more colors and sort them by rainbow --- docs/en/beamng/css-snippets.md | 244 ++++++++++++++++++++++----------- 1 file changed, 167 insertions(+), 77 deletions(-) diff --git a/docs/en/beamng/css-snippets.md b/docs/en/beamng/css-snippets.md index 63615490..a941961c 100644 --- a/docs/en/beamng/css-snippets.md +++ b/docs/en/beamng/css-snippets.md @@ -10,7 +10,7 @@ ## Common variables -=== "BeamNG Orange" +=== "BeamNG CEF Orange" ```css var(--bng-orange) /*Common orange*/ @@ -43,8 +43,29 @@ 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" ```css @@ -52,57 +73,54 @@ var(--bng-orange-100) var(--bng-orange-200) var(--bng-orange-300) - var(--bng-orange-b400) + var(--bng-orange-400) var(--bng-orange-500) + var(--bng-orange-550) var(--bng-orange-600) + var(--bng-orange-650) var(--bng-orange-700) + var(--bng-orange-750) var(--bng-orange-800) + var(--bng-orange-850) var(--bng-orange-900) ``` - === "Cool Gray" + === "Ter Peach" ```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-600) - var(--bng-cool-gray-700) - var(--bng-cool-gray-800) - var(--bng-cool-gray-900) + var(--bng-ter-peach-50) + var(--bng-ter-peach-100) + var(--bng-ter-peach-200) + var(--bng-ter-peach-300) + var(--bng-ter-peach-400) + var(--bng-ter-peach-500) + var(--bng-ter-peach-550) + var(--bng-ter-peach-600) + var(--bng-ter-peach-650) + 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 - var(--bng-ter-blue-50) - var(--bng-ter-blue-100) - var(--bng-ter-blue-200) - var(--bng-ter-blue-300) - var(--bng-ter-blue-400) - var(--bng-ter-blue-500) - var(--bng-ter-blue-600) - var(--bng-ter-blue-700) - var(--bng-ter-blue-800) - var(--bng-ter-blue-900) - ``` - - === "Add Blue" - - ```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) + var(--bng-ter-yellow-50) + var(--bng-ter-yellow-100) + var(--bng-ter-yellow-200) + var(--bng-ter-yellow-300) + var(--bng-ter-yellow-400) + var(--bng-ter-yellow-500) + var(--bng-ter-yellow-550) + var(--bng-ter-yellow-600) + var(--bng-ter-yellow-650) + var(--bng-ter-yellow-700) + var(--bng-ter-yellow-750) + var(--bng-ter-yellow-800) + var(--bng-ter-yellow-850) + var(--bng-ter-yellow-900) ``` === "Add Green" @@ -120,52 +138,124 @@ var(--bng-add-green-900) ``` - === "Add Yellow" + === "Baby Blue" ```css - var(--bng-ter-yellow-50) - var(--bng-ter-yellow-100) - var(--bng-ter-yellow-200) - var(--bng-ter-yellow-300) - var(--bng-ter-yellow-400) - var(--bng-ter-yellow-500) - var(--bng-ter-yellow-600) - var(--bng-ter-yellow-700) - var(--bng-ter-yellow-800) - var(--bng-ter-yellow-900) + var(--bng-add-babyblue-50) + var(--bng-add-babyblue-100) + var(--bng-add-babyblue-200) + var(--bng-add-babyblue-300) + var(--bng-add-babyblue-400) + var(--bng-add-babyblue-500) + var(--bng-add-babyblue-550) + var(--bng-add-babyblue-600) + var(--bng-add-babyblue-650) + 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 - var(--bng-add-peach-50) - var(--bng-add-peach-100) - var(--bng-add-peach-200) - var(--bng-add-peach-300) - var(--bng-add-peach-400) - var(--bng-add-peach-500) - var(--bng-add-peach-600) - var(--bng-add-peach-700) - var(--bng-add-peach-800) - var(--bng-add-peach-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) + 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) ``` + === "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" ```css