docs: add dynamic colors section

Author: stafyniaksacha

layers/documentation/content/documentation/10.setup/3.installation.md

@@ -11,7 +11,7 @@ title: "Option 1: New nuxt project with github layers"
 The **recommended way** to start a new project with Tairo. 
 
 :::doc-message{color="muted-contrast" icon="ph:info"}
-This step requires you to have unlocked your [github access](https://cssninja.io/faq/github-access) and have a [github personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).
+This step requires you to have unlocked your [github access](https://cssninja.io/faq/github-access) and have a [github personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) with the `repo` scope for classic token, or read access to the Tairo repository for fine-grained access token.
 :::
 
 
@@ -61,7 +61,7 @@ This step requires you to have unlocked your [github access](https://cssninja.io
   ::
 
   #description
-  Link your project to the Tairo layers by adding them to the `nuxt.config.ts` file. Note the version number `v1.5.0` which you can change to the latest version.
+  Link your project to the Tairo layers by adding them to the `nuxt.config.ts` file. The version `__TAIRO_LAYERS_VERSION__` is the latest stable version of Tairo, you can also use the `edge` version which contains the current development version (useful for testing new features).
   :::
 
 
@@ -125,6 +125,7 @@ This step requires you to have unlocked your [github access](https://cssninja.io
   ::tairo-toc-anchor
   ---
   label: "Run the development server"
+  id: "run-the-development-server-from-github"
   prefix: " "
   level: 3
   ---
@@ -141,6 +142,7 @@ This step requires you to have unlocked your [github access](https://cssninja.io
   ::tairo-toc-anchor
   ---
   label: "Done!"
+  id: "done-with-github"
   prefix: " "
   level: 3
   ---
@@ -297,6 +299,7 @@ It's also the way to go if you want to **run the demo app**.
   ::tairo-toc-anchor
   ---
   label: "Run the development server"
+  id: "run-the-development-server-from-source"
   prefix: " "
   level: 3
   ---
@@ -314,6 +317,7 @@ It's also the way to go if you want to **run the demo app**.
   ::tairo-toc-anchor
   ---
   label: "Done!"
+  id: "done-with-source"
   prefix: " "
   level: 3
   ---

layers/documentation/content/documentation/30.tailwindcss/4.colors.md

@@ -220,6 +220,139 @@ export default withShurikenUI({
 ::
 
 
+
+::doc-component-demo
+---
+title: Dynamic color with CSS variables
+---
+
+Sometimes you need to use CSS variables to dynamically change a color at runtime. For example, to change the primary color on dark mode, or based on the user's preference (like with the customizer). 
+
+
+
+::code-timeline{.mt-12}
+  :::code-timeline-item{vertical}
+  ::code-group
+  ```ts [<app>/tailwind.config.ts]
+  import { withShurikenUI } from '@shuriken-ui/tailwind'
+
+  export default withShurikenUI({
+    theme: {
+      extend: {
+        primary: {
+          50: 'rgb(var(--color-primary-50) / <alpha-value>)',
+          100: 'rgb(var(--color-primary-100) / <alpha-value>)',
+          200: 'rgb(var(--color-primary-200) / <alpha-value>)',
+          300: 'rgb(var(--color-primary-300) / <alpha-value>)',
+          400: 'rgb(var(--color-primary-400) / <alpha-value>)',
+          500: 'rgb(var(--color-primary-500) / <alpha-value>)',
+          600: 'rgb(var(--color-primary-600) / <alpha-value>)',
+          700: 'rgb(var(--color-primary-700) / <alpha-value>)',
+          800: 'rgb(var(--color-primary-800) / <alpha-value>)',
+          900: 'rgb(var(--color-primary-900) / <alpha-value>)',
+          950: 'rgb(var(--color-primary-950) / <alpha-value>)',
+        },
+      },
+    },
+  })
+  ```
+  ::
+
+  #title
+  ::tairo-toc-anchor
+  ---
+  label: "Update tailwind.config.ts"
+  prefix: " "
+  level: 3
+  ---
+  ::
+
+  #description
+  This maps all the primary color shades to CSS variables. You can use any CSS variable name you want. The `<alpha-value>` is the opacity placeholder that will be replaced by Tailwind CSS at build time.
+  :::
+
+
+  :::code-timeline-item{vertical}
+  ::code-group
+  ```css [<app>/assets/colors.css]
+  :root {
+    --color-primary-50: 245 243 255;   /* #f5f3ff */
+    --color-primary-100: 237 233 254;  /* #ede9fe */
+    --color-primary-200: 221 214 254;  /* #ddd6fe */
+    --color-primary-300: 196 181 253;  /* #c4b5fd */
+    --color-primary-400: 167 139 250;  /* #a78bfa */
+    --color-primary-500: 139 92 246;   /* #a855f7 */
+    --color-primary-600: 124 58 237;   /* #9333ea */
+    --color-primary-700: 109 40 217;   /* #7e22ce */
+    --color-primary-800: 91 33 182;    /* #6b21a8 */
+    --color-primary-900: 76 29 149;    /* #581c87 */
+    --color-primary-950: 46 16 101;    /* #3b0764 */
+  }
+
+  .dark {
+    --color-primary-50: 255 244 212;   /* #FFF4D4 */
+    --color-primary-100: 255 233 172;  /* #FFE9AC */
+    --color-primary-200: 254 222 131;  /* #FEDE83 */
+    --color-primary-300: 254 211 91;   /* #FED35B */
+    --color-primary-400: 254 200 50;   /* #FEC832 */
+    --color-primary-500: 247 182 1;    /* #F7B601 */
+    --color-primary-600: 191 141 1;    /* #BF8D01 */
+    --color-primary-700: 135 99 1;     /* #876301 */
+    --color-primary-800: 79 58 0;      /* #4F3A00 */
+    --color-primary-900: 48 36 0;      /* #302400 */
+    --color-primary-950: 36 27 1;      /* #241b01 */
+  }
+  ```
+  ::
+
+  #title
+  ::tairo-toc-anchor
+  ---
+  label: "Register the CSS variables"
+  prefix: " "
+  level: 3
+  ---
+  ::
+
+  #description
+  Here you need to define the CSS variables that will be used to change the primary color. The values used are the RGB values of the color you want to use. You can also define a different color for dark mode.
+  :::
+
+  :::code-timeline-item{vertical}
+  ::code-group
+  ```ts [<app>/nuxt.config.ts]
+  export default defineNuxtConfig({
+    css: [
+      '~/assets/css/colors.css',
+    ],
+  })
+  ```
+  ::
+
+  #title
+  ::tairo-toc-anchor
+  ---
+  label: "Load the CSS file"
+  prefix: " "
+  level: 3
+  ---
+  ::
+
+  #description
+  Register your CSS file in the `nuxt.config.ts` file to make sure it is loaded in your application to make it work.
+  :::
+::
+
+
+---
+
+Useful resources:
+
+- [Using CSS Variables on tailwindcss.com](https://tailwindcss.com/docs/customizing-colors#using-css-variables)
+
+::
+
+
 ::doc-nav
 ---
 prev: /documentation/tailwindcss/shuriken-ui