From a7288866a10eca62f78ed73d4b076f1ade08ea20 Mon Sep 17 00:00:00 2001
From: macdonst <simon.macdonald@gmail.com>
Date: Tue, 25 Jun 2024 14:36:48 -0400
Subject: [PATCH] Update cribsheet docs

Signed-off-by: macdonst <simon.macdonald@gmail.com>
---
 app/docs/md/enhance-styles/cribsheet.md | 30 ++++++++++++++++++++++++-
 public/css/docs-highlight.css           | 10 ++++-----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/docs/md/enhance-styles/cribsheet.md b/app/docs/md/enhance-styles/cribsheet.md
index 5baed22a..5af1aa35 100644
--- a/app/docs/md/enhance-styles/cribsheet.md
+++ b/app/docs/md/enhance-styles/cribsheet.md
@@ -2,7 +2,35 @@
 title: Cribsheet
 ---
 
-Every Enhance app ships with a preconfigured, dynamic cribsheet to help you find the right Enhance Styles class for the job.
+Most Enhance apps ship with a preconfigured, dynamic cribsheet to help you find the right Enhance Styles class for the job.
 
 Just start your project (`npm start`) and navigate to `/_styleguide/cribsheet`. Here you'll be able to search through all the utility classes and custom properties available to your app. Any [customizations](/docs/enhance-styles/customization) you make to your styleguide will automatically be reflected in your cribsheet.
 
+If you are [migrating from an Architect project](https://enhance.dev/cookbook/migrate-from-architect) to an Enhance project or you are starting with our [minimal template](https://github.com/enhance-dev/enhance-starter-project-minimal) then you will need to add the cribsheet to your project.
+
+## Install Dependencies
+
+First install the `@enhance/styles-cribsheet` package
+
+```bash
+npm install @enhance/styles-cribsheet
+```
+
+## Update Your `.arc` File
+
+Next update your `.arc` file to load the cribsheet plugin.
+
+<doc-code filename=".arc">
+
+```diff
+@app
+your-app
+
+@plugins
+enhance/arc-plugin-enhance
++ enhance/styles-cribsheet
+```
+
+</doc-code>
+
+Now, when you start your project (npm start) the `/_styleguide/cribsheet` route will be available.
diff --git a/public/css/docs-highlight.css b/public/css/docs-highlight.css
index fc3b1235..d4f16a23 100644
--- a/public/css/docs-highlight.css
+++ b/public/css/docs-highlight.css
@@ -52,8 +52,8 @@
   --hl-namespace: var(--dk-pink);
 
   --hl-highlight-line: #202641;
-  --hl-deletion: #461e1f;
-  --hl-addition: #14301d;
+  --hl-deletion: #ec5f67;
+  --hl-addition: #99c794;
 }
 
 /* Dark Theme: System */
@@ -72,9 +72,9 @@
     --hl-namespace: var(--dk-pink);
 
     --hl-highlight-line: #202641;
-    --hl-deletion: #461e1f;
-    --hl-addition: #14301d;
-  }
+    --hl-deletion: #ec5f67;
+    --hl-addition: #99c794;
+    }
 }
 
 .hljs-subst {