Changed readme with colors

README.md

@@ -46,28 +46,46 @@ php artisan vendor:publish --provider="Rapidez\CheckoutTheme\ServiceProvider" --
 
 If you've already overwritten these by yourself before you installed this package, you will have to manually overwrite these as the publish command will not overwrite already existing files.
 
-Add these colors to your `tailwind.config.js` and modify them to your liking:
-(Alternatively, you could add these to a separate file and add it as a preset to your tailwind.config.js)
+When you install Rapidez, the colors below are already configured in your `tailwind.config.js`. This ensures that your colors are consistently applied across all elements.
+Alternatively, if you are using the standalone checkout, you can copy these variables and customize them to your liking.
 ```
 colors: {
-    ct: {
-        enhanced: {
-            DEFAULT: '#40C42A',
-        },
-        inactive: {
-            DEFAULT: '#8A8275',
-            100: '#F6F4EE',
-        },
-        disabled: '#EBE8DE',
-        accent: {
-            DEFAULT: '#FEAB05',
-        },
-        primary: {
-            DEFAULT: '#625B50',
-        },
-        border: '#EAE7DC',
-        error: '#DF241D',
+    primary: {
+        DEFAULT: color('--primary', '#2FBC85'),
+        text: color('--primary-text', colors.white),
     },
+
+    secondary: {
+        DEFAULT: color('--secondary', '#202F60'),
+        text: color('--secondary-text', colors.white),
+    },
+
+    conversion: {
+        DEFAULT: color('--conversion', colors.green[500]),
+        text: color('--conversion-text', colors.white),
+    },
+
+    foreground: {
+        emphasis: color('--foreground-emphasis', colors.slate[900]),
+        DEFAULT: color('--foreground', colors.slate[800]),
+        muted: color('--foreground-muted', colors.slate[600]),
+    },
+
+    border: {
+        emphasis: color('--border-emphasis', colors.slate[500]),
+        DEFAULT: color('--border', colors.slate[200]),
+        muted: color('--border-muted', colors.slate[100]),
+    },
+
+    background: {
+        emphasis: color('--background-emphasis', colors.slate[200]),
+        DEFAULT: color('--background', colors.slate[100]),
+        muted: color('--background-muted', colors.slate[50]),
+    },
+
+    overlay: {
+        DEFAULT: color('--overlay', colors.slate[800]),
+    }
 },
 ```