docs: UnoDspImportColors mention

docs: UnoDspImportColors mention chore: use ColorPaletteOverride.json instead chore: comments Co-Authored-By: Xiaotian Gu <[email protected]> Co-Authored-By: Steve Bilogan <[email protected]> Co-Authored-By: Agnès ZITTE <[email protected]> docs: UnoDspImportColors mention doc linter docs: UnoDspImportColor mention
unoplatform · May 9, 2024 · 2fe2200 · 2fe2200
1 parent 535b19e
commit 2fe2200
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/doc/assets/material-theme-builder-export2.png b/doc/assets/material-theme-builder-export2.png
diff --git a/doc/material-dsp.md b/doc/material-dsp.md
@@ -32,18 +32,42 @@ This package will be automatically present in the project after [creating a new
 * The package is already present when you select _Material_ theme during project creation:
    ![Selection of Material theme when creating a project using the Uno Template Wizard](assets/material-theme-selection-wizard.png)
 
-## Generating a custom color palette and export as DSP file
+It is possible to configure the import process. The _UnoDspImportColors_ item found in the _csproj_ file has a number of attributes we can set:
+
+| Attribute      | Description                     | Default Value           |
+|----------------|---------------------------------|-------------------------|
+| `Include`      | Style files to input            |                         |
+| `Generator`*   | Type of generator to use        | `xaml`                  |
+| `OutputPath`   | Path to use for the output      | Input file directory    |
+
+\* The possible values for Generator are `xaml` and `csharp`.
+
+```xml
+<ItemGroup>
+   <UnoDspImportColors Include="Styles\*.json" Generator="csharp" OutputPath="json_file.g.cs"  />
+</ItemGroup>
+```
+
+> [!NOTE]
+> The Uno.Sdk will automatically include this configuration for you. Creating a new project with the _CSharpMarkup_ feature will automatically set the generator attribute to _csharp_. It will set the generator to _xaml_ by default.
+
+## Generating a custom color palette and exporting it as a JSON file
 
 1. Navigate to the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) and select the colors you want to use for your application.
-2. Locate the _Export_ button and pick the _material Tokens (DSP)_ format.
+2. Locate the _Export_ button and pick the _Material Theme (JSON)_ format.
 
    ![Export Button](assets/material-theme-builder-export1.png) ![DSP Selection](assets/material-theme-builder-export2.png)
-3. Save the zip file to your computer.
-4. Replace the file `ColorPaletteOverride.zip` in the `Styles` folder of your application project with the one you just downloaded.
-5. Build your application. The `ColorPaletteOverride.xaml` file will be automatically updated with the colors present in the DSP zip file.
+3. Save the file to your computer.
+4. Replace the `ColorPaletteOverride.json` file in the `Styles` folder of your application project with the one you just downloaded.
+5. Build your application. The `ColorPaletteOverride.xaml` file will be automatically updated with the colors present in the JSON file.
 
 ## More flexibility
 
-This will generate the file at each build, potentially overriding any changes you made to the file. If you want to keep it that way, you can simply remove the `ColorPaletteOverride.zip` file from the `Styles` folder, the file won't get overwritten anymore.
+This will generate the file at each build, potentially overriding any changes you made to the file. If you want to keep it that way, you can simply remove the `ColorPaletteOverride.json` file from the `Styles` folder, the file won't get overwritten anymore.
 
 Alternatively, you can also use the [Uno.Dsp.Cli](https://nuget.org/packages/Uno.Dsp.Cli) package to generate the file from the command line. This will allow you to generate the file only when you want to, and not at each build.
+
+> [!NOTE]
+> Although the **Material Theme Builder Tool** doesn't export **Material Tokens (DSP)** packages anymore, the Uno Figma Plugin still supports this file format.
+> To be able to import DSP packages just follow the same steps described previously and save the downloaded DSP zip file as `ColorPaletteOverride.zip` in the `Styles` folder of your application project.
+> In that case, make sure to delete the `material-theme.json` file from `Styles` folder before building your application, to avoid conflicts.