From 79e5edd79dec0590afda448a49e3549bc0f82a05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anto=CC=81nio=20Gonc=CC=A7alves?=
 <antonio.goncalves@unparallel.pt>
Date: Mon, 27 May 2024 10:27:40 +0100
Subject: [PATCH] Support theme variables without "$", "$" will be appended
 when generating the css

---
 CHANGELOG.md                     |  1 +
 dev/index.ts                     |  7 +--
 dev/test.css                     | 74 ++++++++++++++++----------------
 dev/test2.css                    | 74 ++++++++++++++++----------------
 src/Bootstrap5Generator/index.ts |  6 ++-
 5 files changed, 82 insertions(+), 80 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba1238b..8d27d53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Support theme variables without "$", "$" will be appended when generating the css
 
 ## [0.6.0] - 2024-05-22
 - Added support to dynamic background
diff --git a/dev/index.ts b/dev/index.ts
index 7ec74bb..76111b3 100644
--- a/dev/index.ts
+++ b/dev/index.ts
@@ -42,17 +42,14 @@ const theme: BootstrapTheme = {
 	variables: {
 
 
-		"$info": "#99b6c3",
+		"info": "#ccffcc",
 		"$badge-pill-border-radius": "20rem",
 		"$border-radius": "1.5rem",
 		"$border-radius-lg": "1.5rem",
 		"$border-radius-sm": "1.5rem",
 		"$toast-border-radius": "2rem"
 	},
-	background: {
-		"type": "single",
-		color: "#c99c28"
-	},
+
 	colors: {
 		primary: "#FFaaCC",
 		secondary: "#ccdbe1",
diff --git a/dev/test.css b/dev/test.css
index 5e806bd..7d1db39 100644
--- a/dev/test.css
+++ b/dev/test.css
@@ -32,7 +32,7 @@
   --bs-primary: #FFaaCC;
   --bs-secondary: #ccdbe1;
   --bs-success: #B6E186;
-  --bs-info: #99b6c3;
+  --bs-info: #ccffcc;
   --bs-warning: #ee8140;
   --bs-danger: #CC3105;
   --bs-light: #f8f9fa;
@@ -41,7 +41,7 @@
   --bs-primary-rgb: 255, 170, 204;
   --bs-secondary-rgb: 204, 219, 225;
   --bs-success-rgb: 182, 225, 134;
-  --bs-info-rgb: 153, 182, 195;
+  --bs-info-rgb: 204, 255, 204;
   --bs-warning-rgb: 238, 129, 64;
   --bs-danger-rgb: 204, 49, 5;
   --bs-light-rgb: 248, 249, 250;
@@ -50,7 +50,7 @@
   --bs-primary-text-emphasis: #664452;
   --bs-secondary-text-emphasis: #52585a;
   --bs-success-text-emphasis: #495a36;
-  --bs-info-text-emphasis: #3d494e;
+  --bs-info-text-emphasis: #526652;
   --bs-warning-text-emphasis: #5f341a;
   --bs-danger-text-emphasis: #521402;
   --bs-light-text-emphasis: #636464;
@@ -59,7 +59,7 @@
   --bs-primary-bg-subtle: #ffeef5;
   --bs-secondary-bg-subtle: #f5f8f9;
   --bs-success-bg-subtle: #f0f9e7;
-  --bs-info-bg-subtle: #ebf0f3;
+  --bs-info-bg-subtle: #f5fff5;
   --bs-warning-bg-subtle: #fce6d9;
   --bs-danger-bg-subtle: #f5d6cd;
   --bs-light-bg-subtle: #fefefe;
@@ -68,7 +68,7 @@
   --bs-primary-border-subtle: #ffddeb;
   --bs-secondary-border-subtle: #ebf1f3;
   --bs-success-border-subtle: #e2f3cf;
-  --bs-info-border-subtle: #d6e2e7;
+  --bs-info-border-subtle: #ebffeb;
   --bs-warning-border-subtle: #f8cdb3;
   --bs-danger-border-subtle: #ebad9b;
   --bs-light-border-subtle: #fcfdfd;
@@ -85,8 +85,8 @@
   --bs-body-line-height: 1.5;
   --bs-body-color: #212529;
   --bs-body-color-rgb: 33, 37, 41;
-  --bs-body-bg: #c99c28;
-  --bs-body-bg-rgb: 201, 156, 40;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
   --bs-emphasis-color: #000;
   --bs-emphasis-color-rgb: 0, 0, 0;
   --bs-secondary-color: rgba(33, 37, 41, 0.75);
@@ -149,7 +149,7 @@
   --bs-primary-text-emphasis: #ffcce0;
   --bs-secondary-text-emphasis: #e0e9ed;
   --bs-success-text-emphasis: #d3edb6;
-  --bs-info-text-emphasis: #c2d3db;
+  --bs-info-text-emphasis: #e0ffe0;
   --bs-warning-text-emphasis: #f5b38c;
   --bs-danger-text-emphasis: #e08369;
   --bs-light-text-emphasis: #f8f9fa;
@@ -157,7 +157,7 @@
   --bs-primary-bg-subtle: #332229;
   --bs-secondary-bg-subtle: #292c2d;
   --bs-success-bg-subtle: #242d1b;
-  --bs-info-bg-subtle: #1f2427;
+  --bs-info-bg-subtle: #293329;
   --bs-warning-bg-subtle: #301a0d;
   --bs-danger-bg-subtle: #290a01;
   --bs-light-bg-subtle: #343a40;
@@ -165,7 +165,7 @@
   --bs-primary-border-subtle: #99667a;
   --bs-secondary-border-subtle: #7a8387;
   --bs-success-border-subtle: #6d8750;
-  --bs-info-border-subtle: #5c6d75;
+  --bs-info-border-subtle: #7a997a;
   --bs-warning-border-subtle: #8f4d26;
   --bs-danger-border-subtle: #7a1d03;
   --bs-light-border-subtle: #495057;
@@ -815,8 +815,8 @@ progress {
   text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-info:hover, .link-info:focus {
-  color: RGBA(173, 197, 207, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(173, 197, 207, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(214, 255, 214, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(214, 255, 214, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-warning {
@@ -2324,13 +2324,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #ebf0f3;
-  --bs-table-border-color: #bcc0c2;
-  --bs-table-striped-bg: #dfe4e7;
+  --bs-table-bg: #f5fff5;
+  --bs-table-border-color: #c4ccc4;
+  --bs-table-striped-bg: #e9f2e9;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d4d8db;
+  --bs-table-active-bg: #dde6dd;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #d9dee1;
+  --bs-table-hover-bg: #e3ece3;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2808,10 +2808,10 @@ textarea.form-control-lg {
   outline: 0;
 }
 .form-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #c99c28, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
 }
 .form-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #c99c28, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
 }
 .form-range::-moz-focus-outer {
   border: 0;
@@ -3368,19 +3368,19 @@ textarea.form-control-lg {
 
 .btn-info {
   --bs-btn-color: #000;
-  --bs-btn-bg: #99b6c3;
-  --bs-btn-border-color: #99b6c3;
+  --bs-btn-bg: #ccffcc;
+  --bs-btn-border-color: #ccffcc;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #a8c1cc;
-  --bs-btn-hover-border-color: #a3bdc9;
-  --bs-btn-focus-shadow-rgb: 130, 155, 166;
+  --bs-btn-hover-bg: #d4ffd4;
+  --bs-btn-hover-border-color: #d1ffd1;
+  --bs-btn-focus-shadow-rgb: 173, 217, 173;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #adc5cf;
-  --bs-btn-active-border-color: #a3bdc9;
+  --bs-btn-active-bg: #d6ffd6;
+  --bs-btn-active-border-color: #d1ffd1;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #99b6c3;
-  --bs-btn-disabled-border-color: #99b6c3;
+  --bs-btn-disabled-bg: #ccffcc;
+  --bs-btn-disabled-border-color: #ccffcc;
 }
 
 .btn-warning {
@@ -3520,19 +3520,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-info {
-  --bs-btn-color: #99b6c3;
-  --bs-btn-border-color: #99b6c3;
+  --bs-btn-color: #ccffcc;
+  --bs-btn-border-color: #ccffcc;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #99b6c3;
-  --bs-btn-hover-border-color: #99b6c3;
-  --bs-btn-focus-shadow-rgb: 153, 182, 195;
+  --bs-btn-hover-bg: #ccffcc;
+  --bs-btn-hover-border-color: #ccffcc;
+  --bs-btn-focus-shadow-rgb: 204, 255, 204;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #99b6c3;
-  --bs-btn-active-border-color: #99b6c3;
+  --bs-btn-active-bg: #ccffcc;
+  --bs-btn-active-border-color: #ccffcc;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #99b6c3;
+  --bs-btn-disabled-color: #ccffcc;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #99b6c3;
+  --bs-btn-disabled-border-color: #ccffcc;
   --bs-gradient: none;
 }
 
diff --git a/dev/test2.css b/dev/test2.css
index 5e806bd..7d1db39 100644
--- a/dev/test2.css
+++ b/dev/test2.css
@@ -32,7 +32,7 @@
   --bs-primary: #FFaaCC;
   --bs-secondary: #ccdbe1;
   --bs-success: #B6E186;
-  --bs-info: #99b6c3;
+  --bs-info: #ccffcc;
   --bs-warning: #ee8140;
   --bs-danger: #CC3105;
   --bs-light: #f8f9fa;
@@ -41,7 +41,7 @@
   --bs-primary-rgb: 255, 170, 204;
   --bs-secondary-rgb: 204, 219, 225;
   --bs-success-rgb: 182, 225, 134;
-  --bs-info-rgb: 153, 182, 195;
+  --bs-info-rgb: 204, 255, 204;
   --bs-warning-rgb: 238, 129, 64;
   --bs-danger-rgb: 204, 49, 5;
   --bs-light-rgb: 248, 249, 250;
@@ -50,7 +50,7 @@
   --bs-primary-text-emphasis: #664452;
   --bs-secondary-text-emphasis: #52585a;
   --bs-success-text-emphasis: #495a36;
-  --bs-info-text-emphasis: #3d494e;
+  --bs-info-text-emphasis: #526652;
   --bs-warning-text-emphasis: #5f341a;
   --bs-danger-text-emphasis: #521402;
   --bs-light-text-emphasis: #636464;
@@ -59,7 +59,7 @@
   --bs-primary-bg-subtle: #ffeef5;
   --bs-secondary-bg-subtle: #f5f8f9;
   --bs-success-bg-subtle: #f0f9e7;
-  --bs-info-bg-subtle: #ebf0f3;
+  --bs-info-bg-subtle: #f5fff5;
   --bs-warning-bg-subtle: #fce6d9;
   --bs-danger-bg-subtle: #f5d6cd;
   --bs-light-bg-subtle: #fefefe;
@@ -68,7 +68,7 @@
   --bs-primary-border-subtle: #ffddeb;
   --bs-secondary-border-subtle: #ebf1f3;
   --bs-success-border-subtle: #e2f3cf;
-  --bs-info-border-subtle: #d6e2e7;
+  --bs-info-border-subtle: #ebffeb;
   --bs-warning-border-subtle: #f8cdb3;
   --bs-danger-border-subtle: #ebad9b;
   --bs-light-border-subtle: #fcfdfd;
@@ -85,8 +85,8 @@
   --bs-body-line-height: 1.5;
   --bs-body-color: #212529;
   --bs-body-color-rgb: 33, 37, 41;
-  --bs-body-bg: #c99c28;
-  --bs-body-bg-rgb: 201, 156, 40;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
   --bs-emphasis-color: #000;
   --bs-emphasis-color-rgb: 0, 0, 0;
   --bs-secondary-color: rgba(33, 37, 41, 0.75);
@@ -149,7 +149,7 @@
   --bs-primary-text-emphasis: #ffcce0;
   --bs-secondary-text-emphasis: #e0e9ed;
   --bs-success-text-emphasis: #d3edb6;
-  --bs-info-text-emphasis: #c2d3db;
+  --bs-info-text-emphasis: #e0ffe0;
   --bs-warning-text-emphasis: #f5b38c;
   --bs-danger-text-emphasis: #e08369;
   --bs-light-text-emphasis: #f8f9fa;
@@ -157,7 +157,7 @@
   --bs-primary-bg-subtle: #332229;
   --bs-secondary-bg-subtle: #292c2d;
   --bs-success-bg-subtle: #242d1b;
-  --bs-info-bg-subtle: #1f2427;
+  --bs-info-bg-subtle: #293329;
   --bs-warning-bg-subtle: #301a0d;
   --bs-danger-bg-subtle: #290a01;
   --bs-light-bg-subtle: #343a40;
@@ -165,7 +165,7 @@
   --bs-primary-border-subtle: #99667a;
   --bs-secondary-border-subtle: #7a8387;
   --bs-success-border-subtle: #6d8750;
-  --bs-info-border-subtle: #5c6d75;
+  --bs-info-border-subtle: #7a997a;
   --bs-warning-border-subtle: #8f4d26;
   --bs-danger-border-subtle: #7a1d03;
   --bs-light-border-subtle: #495057;
@@ -815,8 +815,8 @@ progress {
   text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-info:hover, .link-info:focus {
-  color: RGBA(173, 197, 207, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(173, 197, 207, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(214, 255, 214, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(214, 255, 214, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-warning {
@@ -2324,13 +2324,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #ebf0f3;
-  --bs-table-border-color: #bcc0c2;
-  --bs-table-striped-bg: #dfe4e7;
+  --bs-table-bg: #f5fff5;
+  --bs-table-border-color: #c4ccc4;
+  --bs-table-striped-bg: #e9f2e9;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d4d8db;
+  --bs-table-active-bg: #dde6dd;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #d9dee1;
+  --bs-table-hover-bg: #e3ece3;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2808,10 +2808,10 @@ textarea.form-control-lg {
   outline: 0;
 }
 .form-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #c99c28, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
 }
 .form-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #c99c28, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 170, 204, 0.25);
 }
 .form-range::-moz-focus-outer {
   border: 0;
@@ -3368,19 +3368,19 @@ textarea.form-control-lg {
 
 .btn-info {
   --bs-btn-color: #000;
-  --bs-btn-bg: #99b6c3;
-  --bs-btn-border-color: #99b6c3;
+  --bs-btn-bg: #ccffcc;
+  --bs-btn-border-color: #ccffcc;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #a8c1cc;
-  --bs-btn-hover-border-color: #a3bdc9;
-  --bs-btn-focus-shadow-rgb: 130, 155, 166;
+  --bs-btn-hover-bg: #d4ffd4;
+  --bs-btn-hover-border-color: #d1ffd1;
+  --bs-btn-focus-shadow-rgb: 173, 217, 173;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #adc5cf;
-  --bs-btn-active-border-color: #a3bdc9;
+  --bs-btn-active-bg: #d6ffd6;
+  --bs-btn-active-border-color: #d1ffd1;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #99b6c3;
-  --bs-btn-disabled-border-color: #99b6c3;
+  --bs-btn-disabled-bg: #ccffcc;
+  --bs-btn-disabled-border-color: #ccffcc;
 }
 
 .btn-warning {
@@ -3520,19 +3520,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-info {
-  --bs-btn-color: #99b6c3;
-  --bs-btn-border-color: #99b6c3;
+  --bs-btn-color: #ccffcc;
+  --bs-btn-border-color: #ccffcc;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #99b6c3;
-  --bs-btn-hover-border-color: #99b6c3;
-  --bs-btn-focus-shadow-rgb: 153, 182, 195;
+  --bs-btn-hover-bg: #ccffcc;
+  --bs-btn-hover-border-color: #ccffcc;
+  --bs-btn-focus-shadow-rgb: 204, 255, 204;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #99b6c3;
-  --bs-btn-active-border-color: #99b6c3;
+  --bs-btn-active-bg: #ccffcc;
+  --bs-btn-active-border-color: #ccffcc;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #99b6c3;
+  --bs-btn-disabled-color: #ccffcc;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #99b6c3;
+  --bs-btn-disabled-border-color: #ccffcc;
   --bs-gradient: none;
 }
 
diff --git a/src/Bootstrap5Generator/index.ts b/src/Bootstrap5Generator/index.ts
index 59ce26e..97d04aa 100644
--- a/src/Bootstrap5Generator/index.ts
+++ b/src/Bootstrap5Generator/index.ts
@@ -225,8 +225,12 @@ export default class Bootstrap5Generator {
 			let _variables = variables
 			if (theme.background?.type === "single" && theme.background.color) bodyBG = theme.background.color
 			if (bodyBG) _variables = { ...variables, "$body-bg": bodyBG }
+			function appendKey(key: string): string {
+				if (!key.startsWith("$")) return `$${key}`
+				return key
+			}
 			return Object.keys(_variables).reduce((acc, val) => (
-				`${acc}${val}:${_variables[val]};`
+				`${acc}${appendKey(val)}:${_variables[val]};`
 			), "")
 		}