variables added

icons8 · Nov 5, 2024 · 049a4b8 · 049a4b8
1 parent af19441
commit 049a4b8
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 28 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -24,6 +24,8 @@ doks:
       url: '/text'
     - title: 'Styling'
       url: '/styling'
+    - title: 'Color variables'
+      url: '/variables'  
     - title: 'Layer and text styles'
       url: '/layerstyles/'
     - title: 'Components'

diff --git a/docs/index.md b/docs/index.md
@@ -57,6 +57,10 @@ grid_navigation:
       excerpt: Learn about tools that will help you create your unique style
       url: '/styling'
       icon: 'design'
+    - title: 'Color variables'
+      excerpt: How to create and manage color variables
+      url: '/variables'
+      icon: 'paint-palette'
     - title: 'Layer and text styles'
       excerpt: Learn how to speed up your work with layer and text styles
       url: '/layerstyles/'

diff --git a/docs/layerstyles.md b/docs/layerstyles.md
@@ -18,8 +18,8 @@ page_nav:
         content: Components
         url: '/components'
     prev:
-        content: Layers
-        url: '/layers'
+        content: Color variables
+        url: '/variables'
 ---
 
 Layer and text styles are predefined sets of layer and text properties that you can reuse in your designs. With the help of styles you can dramatically save your time and make your designs look more professional and consistent.  When you modify a style, Lunacy immediately applies them to all the layers using this style.

diff --git a/docs/public/colorvariables.mp4 b/docs/public/colorvariables.mp4
diff --git a/docs/public/colorvariables_ph.png b/docs/public/colorvariables_ph.png
diff --git a/docs/public/colovariables_rn.mp4 b/docs/public/colovariables_rn.mp4
diff --git a/docs/release-notes/index.md b/docs/release-notes/index.md
@@ -29,44 +29,30 @@ page_nav:
 
 # Version 10
 
-<!--
+## 10.6 Beta
 
-## 10.6
+To install the Beta version:
 
-*Release date: November XX, 2024*
-
-<a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?ocid=badge" target="_blank">Microsoft Store</a> \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.5.exe) \| <a href="https://apps.apple.com/app/id1582493835" target="_blank">App Store</a> \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.5.dmg) \| <a href="https://snapcraft.io/lunacy" target="_blank">Snapcraft</a> \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.5.deb)
+1. In Lunacy, go to **Help** > **About**.
+2. In the displayed window, select the **Check for Beta Udates** checkbox.
+3. Click **Download**, then click **Install**.
 
 
 ### Color variables
-We've introduced a **Variables** tab in the left panel, where you can now manage color variables. Soon, we’ll be adding other variable types too.
-
-**Creating a color variable**
-
-1. Select a layer and open the **Color Picker**.
-2. Choose your desired color, then click **Create Color Variable**.
-3. Enter a name for the variable, or keep the auto-assigned one (you can rename it anytime).
 
-**Organizing color variables**
+We've introduced the **Variables** tab in the left panel, where you can now manage **color variables**. Soon, we’ll be adding other variable types too.
 
-You can organize color variables just like components and styles. To create groups, simply use slashes in the variable names.
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/colorvariables_ph.png" height="auto"><source src="/public/colorvariables.mp4" type="video/mp4"></video>
 
-**Applying a Color Variable to a Layer**
+For details about color variables, click <a href="https://lunacy.docs.icons8.com/variables/" target="_blank">here</a>.
 
-1. Select the layer you want to style.
-2. Choose the color variable from the color dropdown in the right panel.
-
-**Editing and managing variables**
-
-- To edit a variable, click ![settings icon](/public/settingsicon.png) next to it in the left panel.
-- To delete or rename a variable or group, right-click the variable in the left panel and choose the desired option from the context menu.
 
 ### Improvements and fixes
 
-- Some improvements to the AI Rename feature.
+- Some improvements to the *AI Name Layer* feature.
 - Reworked the code behind the input fields for better user experience.
 
--->
+
 
 ## 10.5
 

diff --git a/docs/styling.md b/docs/styling.md
@@ -15,8 +15,8 @@ micro_nav: false
 # Page navigation
 page_nav:
     next:
-        content: Components
-        url: '/components'
+        content: Color variables
+        url: '/variables'
     prev:
         content: Text
         url: '/text'

diff --git a/docs/variables.md b/docs/variables.md
@@ -0,0 +1,70 @@
+---
+# Page settings
+layout: default
+keywords:
+comments: false
+
+# Hero section
+title: Color variables
+description: How to create and manage color variables
+icon: 'paint-palette'
+
+# Micro navigation
+micro_nav: false
+
+# Page navigation
+page_nav:
+    next:
+        content: Layer and text styles
+        url: '/layerstyles'
+    prev:
+        content: Styling
+        url: '/styling'
+---
+
+
+Color variables are reusable **solid** color presets that help you maintain color consistency across your designs. Once you create a color variable, you can apply it to multiple layers. If you update the variable, all layers using that color will update automatically, making it easier to manage themes and ensure uniformity.
+
+Color variables can also be organized into groups, similar to <a href="https://lunacy.docs.icons8.com/components/" target="_blank">components</a> and <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">styles</a>, making it simple to switch or edit colors across your design project.
+
+By default, the **Variables** tab is populated with the variables from the document <a href="https://lunacy.docs.icons8.com/layerstyles/#color-palettes-and-auto-shape-colors" target="_blank">palette</a>. However, you're free to delete them, and create your own color variables.
+
+
+## Creating a color variable
+
+1. Select a layer and open the **Color Picker**.
+2. Choose your desired color, then click **Create Color Variable**.
+3. Enter a name for the variable, or keep the auto-assigned one (you can rename it anytime).
+
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/colorvariables_ph.png" height="auto"><source src="/public/colorvariables.mp4" type="video/mp4"></video>
+
+## Applying a color variable to a Layer
+
+1. Select the layer you want to style.
+2. Choose the color variable from the color dropdown in the right panel (see the polygon in the video above).
+
+
+## Organizing color variables
+
+For convenience, you can organize color variables into groups.
+
+To create groups:
+
+* Use slashes in the variable names. For example, `Group name / Variable name` or `Group name / Subgroup name / Variable name`, etc.
+
+  OR
+
+* Holding down `Shift`, select the variables in the left panel, then open the context menu and click **Group**.
+
+
+## Editing and managing variables
+
+- To edit a variable, click ![settings icon](/public/settingsicon.png) next to it in the left panel.
+- To delete or rename a variable or group, right-click the variable in the left panel and choose the desired option from the context menu.
+
+<embed type="image/svg+xml" alt="managing_color variables" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/t1HQ0MFTT0GYedRnK3ODZw.svg" /> 
+
+
+<div class="callout callout--info">
+    <p><strong>Note:</strong> If a color variable has an auto-assigned name, it will update automatically when you edit the color. If you’ve set a custom name, the name will stay the same. </p>
+</div>