From 2b962bd7bf11b81fc1d2df67a438614584251e64 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 26 Oct 2024 18:11:30 +0700
Subject: [PATCH] lfg

---
 .../docs/getting-started/installation.mdx     | 140 +++++++++---------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/resources/content/docs/getting-started/installation.mdx b/resources/content/docs/getting-started/installation.mdx
index 8fddbe568..fc3f31b05 100644
--- a/resources/content/docs/getting-started/installation.mdx
+++ b/resources/content/docs/getting-started/installation.mdx
@@ -193,77 +193,77 @@ You can customize your colors using these variables. By default, Justd utilizes
 to switch to RGB, HSL, or HSB.
 
 <PlainCode code={`@layer base {
-   :root {
-    --light: 223.81 0% 98%;
-    --dark: 239.95 9% 6%;
-    --bg: 0 0% 100%;
-    --fg: 14.05% 0.004 285.82;
-    --overlay: 0 0% 100%;
-    --overlay-fg: 14.05% 0.004 285.82;
-    --primary: 216.77 100% 50%;
-    --primary-fg: 0 0% 100%;
-    --secondary: 240 4% 96%;
-    --secondary-fg: 240.01 6% 10%;
-    --tertiary: 0 0% 100%;
-    --tertiary-fg: 240 4% 16%;
-    --accent: 216.77 100% 50%;
-    --accent-fg: 0 0% 100%;
-    --accent-subtle: 216.92 99% 97%;
-    --accent-subtle-fg: 216.74 100% 40%;
-    --success: 161.17 91% 31%;
-    --success-fg: 151.77 82% 96%;
-    --info: 205.77 100% 50%;
-    --info-fg: 0 0% 100%;
-    --muted: 240 4% 96%;
-    --muted-fg: 240 3.83% 46.08%;
-    --danger: 0.01 72% 51%;
-    --danger-fg: 360 86% 97%;
-    --warning: 43.2 96% 56.99999999999999%;
-    --warning-fg: 20.91 91% 14.1%;
-    --border: 240 6% 90%;
-    --input: 240 6% 90%;
-    --ring: var(--primary);
-    --toggle: 240.01 5% 84%;
-    --radius: 0.5rem;
-    --primary-chart: 216.74 100% 45%;
-    --secondary-chart: 219.83 100% 77%;
-    --tertiary-chart: 216.01 92% 60%;
-    --highlight-chart: 210 98% 78%;
-    --accent-chart: 210 98% 78%;
-  }
+    :root {
+      --light: 223.81 0% 98%;
+      --dark: 239.95 9% 6%;
+      --bg: 0 0% 100%;
+      --fg: 14.05% 0.004 285.82;
+      --overlay: 0 0% 100%;
+      --overlay-fg: 14.05% 0.004 285.82;
+      --primary: 216.77 100% 50%;
+      --primary-fg: 0 0% 100%;
+      --secondary: 240 4% 96%;
+      --secondary-fg: 240.01 6% 10%;
+      --tertiary: 0 0% 100%;
+      --tertiary-fg: 240 4% 16%;
+      --accent: 216.77 100% 50%;
+      --accent-fg: 0 0% 100%;
+      --accent-subtle: 216.92 99% 97%;
+      --accent-subtle-fg: 216.74 100% 40%;
+      --success: 161.17 91% 31%;
+      --success-fg: 151.77 82% 96%;
+      --info: 205.77 100% 50%;
+      --info-fg: 0 0% 100%;
+      --muted: 240 5.88% 90%;
+      --muted-fg: 240 3.83% 46.08%;
+      --danger: 0.01 72% 51%;
+      --danger-fg: 360 86% 97%;
+      --warning: 43.2 96% 56.99999999999999%;
+      --warning-fg: 20.91 91% 14.1%;
+      --border: 240 6% 90%;
+      --input: 240 6% 90%;
+      --ring: var(--primary);
+      --toggle: 240.01 5% 84%;
+      --radius: 0.5rem;
+      --primary-chart: 216.74 100% 45%;
+      --secondary-chart: 219.83 100% 77%;
+      --tertiary-chart: 216.01 92% 60%;
+      --highlight-chart: 210 98% 78%;
+      --accent-chart: 210 98% 78%;
+    }
 
-  .dark {
-    --bg: 0 0% 1%;
-    --fg: 223.81 0% 98%;
-    --overlay: 240.03 6% 6%;
-    --overlay-fg: 223.81 0% 98%;
-    --primary: 216.04 98% 52%;
-    --primary-fg: 0 0% 100%;
-    --secondary: 240.06 5% 11%;
-    --secondary-fg: 223.81 0% 98%;
-    --info: 205.77 100% 50%;
-    --info-fg: 0 0% 100%;
-    --success: 161.17 91% 31%;
-    --success-fg: 151.77 82% 96%;
-    --accent: 216.04 98% 52%;
-    --accent-fg: 0 0% 100%;
-    --accent-subtle: 215.99 94% 6%;
-    --accent-subtle-fg: 204.92 100% 77%;
-    --tertiary: 240.02 10% 6%;
-    --tertiary-fg: 239.99 4% 96%;
-    --muted: 239.95 3% 16%;
-    --muted-fg: 240 5.03% 64.9%;
-    --ring: var(--primary);
-    --toggle: 239.99 5% 26%;
-    --border: 240.01 7.000000000000001% 15%;
-    --input: 239.95 3% 16%;
-    --primary-chart: 221.19 83% 53%;
-    --secondary-chart: 211.99 95% 68%;
-    --tertiary-chart: 216.01 92% 60%;
-    --highlight-chart: 210 98% 78%;
-    --accent-chart: 212 96% 87%;
-  }
-}`} />
+    .dark {
+      --bg: 0 0% 1%;
+      --fg: 223.81 0% 98%;
+      --overlay: 240.03 6% 6%;
+      --overlay-fg: 223.81 0% 98%;
+      --primary: 216.04 98% 52%;
+      --primary-fg: 0 0% 100%;
+      --secondary: 240.06 5% 11%;
+      --secondary-fg: 223.81 0% 98%;
+      --info: 205.77 100% 50%;
+      --info-fg: 0 0% 100%;
+      --success: 161.17 91% 31%;
+      --success-fg: 151.77 82% 96%;
+      --accent: 216.04 98% 52%;
+      --accent-fg: 0 0% 100%;
+      --accent-subtle: 215.99 94% 6%;
+      --accent-subtle-fg: 204.92 100% 77%;
+      --tertiary: 240.02 10% 6%;
+      --tertiary-fg: 239.99 4% 96%;
+      --muted: 239.95 3% 16%;
+      --muted-fg: 240 5.03% 64.9%;
+      --ring: var(--primary);
+      --toggle: 239.99 5% 26%;
+      --border: 240.01 7.000000000000001% 15%;
+      --input: 239.95 3% 16%;
+      --primary-chart: 221.19 83% 53%;
+      --secondary-chart: 211.99 95% 68%;
+      --tertiary-chart: 216.01 92% 60%;
+      --highlight-chart: 210 98% 78%;
+      --accent-chart: 212 96% 87%;
+    }
+  }`} />
 
 ### Default Utilities
 Include this for the default set of utilities: