From aeb2ff7b0c8915ad7bdd415a46aa282106a1e9e8 Mon Sep 17 00:00:00 2001
From: Darcy Glennen <darcyglennen@gmail.com>
Date: Sat, 15 Jun 2024 18:49:22 +1000
Subject: [PATCH] docs: update readme to use npm package for simpler setup

---
 README.md | 55 ++++++++++++-------------------------------------------
 1 file changed, 12 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 448cd9c..0a1cd07 100644
--- a/README.md
+++ b/README.md
@@ -12,46 +12,16 @@ https://figma2theme.netlify.app/
 
 ## Usage
 
-### 1. Authenticate via NPM
-
-To ensure you can install private Portable packages, login to our GitHub repo via NPM:
-
-(This only has to be done once per computer, skip this step if you've already done this)
-
-```bash
-npm login --registry=https://npm.pkg.github.com
-```
-
-When prompted for "Username", enter your GitHub username.
-
-When prompted for "Password", enter a "Personal Access Token".
-To generate a token follow these instructions:
-
-- In GitHub visit Settings > Developer settings > Personal access tokens
-- Press "Generate new token"
-- Name the new token "portable_npm_login" or something similar
-- Select the "repo", "write:packages" and "read:packages" permissions
-
-Finally, when prompted for "Email" enter your Portable email address.
-
-### 2. Add `figma2theme` to your project
-
-Create an `.npmrc` file in your project root with the following contents:
-
-```
-@portablestudios:registry=https://npm.pkg.github.com
-```
-
-Install `figma2theme` to your package.json:
+### 1. Add `figma2theme` to your project
 
 ```bash
-yarn add --dev @portablestudios/figma2theme
+yarn add --dev figma2theme
 ```
 
-### 3. Define your variables
+### 2. Set your environment variables
 
-Create a `.figma2themerc` file in your project containing the
-Figma file URL, here's an example using the URL of our Figma template:
+a. Create a `.figma2themerc` file in your project repo and add the URL of your project's UI Kit file.
+Here's an example with the UI Kit template file:
 
 ```json
 {
@@ -59,17 +29,14 @@ Figma file URL, here's an example using the URL of our Figma template:
 }
 ```
 
-Now add your Figma API key to the `.env` file of your project.
-A key can be generated under the 'Personal Access Tokens' section of the Figma settings.
+b. Generate a Figma API key and add it to the `.env` file of your project.
+An API key can be generated under the 'Personal Access Tokens' section of the Figma settings.
 
 ```
 FIGMA_API_KEY=
 ```
 
-Both of these variables can be provided through either the `.figma2themerc` file, the
-environment variables or the CLI arguments. We recommend the above setup for most projects.
-
-### 4. Generate your theme
+### 3. Generate your theme
 
 Run the following command to generate your Chakra UI theme:
 
@@ -79,11 +46,11 @@ yarn figma2theme generate-chakra
 
 By default the generated theme file(s) will be saved to `./theme`.
 
-### 5. Import the theme
+### 4. Import the theme
 
 Update your imports from `import { theme } from '@chakra-ui/react'` to the generated theme location.
 
-### 6. Import the stories (Optional)
+### 5. Import the stories (Optional)
 
 `figma2theme` provides a variety of Storybook stories that allow you to view elements of your
 current Chakra UI theme, including foundational values (e.g. colour palettes, font sizes, etc.)
@@ -96,6 +63,8 @@ the following glob to the `stories` array:
 
 ## Development
 
+Want to work on figma2theme? Here's how to get started.
+
 First set up your environment variables by duplicating the template:
 
 ```bash