Merge pull request #181 from Q42/feature/color-parser-script

ADD color parser script

Author: Frank1234

README.MD

@@ -142,6 +142,11 @@ Using Bitrise or another CI tool instead? Then you can skip the above and delete
 
 - `./.github/workflows`
 
+### Colors import from Figma
+
+This project contains a script to convert color tokens from Figma to Compose format.
+You can find the script and instructions in the `./scripts/colorparser/README.md` file.
+
 ## Setup decisions
 
 ### Clean architecture

scripts/colorparser/ColorParser.kts

@@ -0,0 +1,118 @@
+#!/usr/bin/env kotlin
+
+import java.io.File
+import java.io.FileWriter
+
+/**
+ * Check README.md for info about this script.
+ *
+ * This script might need a few adjustments per project, based on the figma setup. At
+ * the very least, update the app name below.
+ */
+
+val appName = "template"
+
+val themePackage = "nl.q42.$appName.ui.theme"
+val outputPath = "../../core/ui/src/main/kotlin/nl/q42/$appName/ui/theme"
+val inputFile = File("color_parser_input.kt")
+
+data class ThemeWriter(
+    val classSuffix: String,
+    val inputColorNameSuffix: String,
+    val writer: FileWriter = FileWriter(File("$outputPath/AppColorScheme$classSuffix.kt"))
+)
+
+val themeWriters = listOf(
+    ThemeWriter(
+        classSuffix = "Light",
+        inputColorNameSuffix = "_light",
+    ),
+    ThemeWriter(
+        classSuffix = "Dark",
+        inputColorNameSuffix = "_dark",
+    )
+)
+
+val colorAssignmentPattern = " = Color\\(0x[0-9a-fA-F]{8}\\)".toRegex()
+
+fun FileWriter.appendInterfaceFieldLineIfMatches(inputLine: String, inputColorNameSuffix: String) {
+    if (inputLine.trim().endsWith(inputColorNameSuffix)) {
+        appendLine(
+            "    " + inputLine.replace(inputColorNameSuffix, "")
+                .replace(colorAssignmentPattern, ": Color")
+        )
+    }
+}
+
+fun ThemeWriter.appendLineIfMatches(line: String) {
+    if (line.trim().endsWith(inputColorNameSuffix)) {
+        writer.append("  override ") // Indentation + override keyword
+        writer.appendLine(line.replace(inputColorNameSuffix, ""))
+    }
+}
+
+fun ThemeWriter.writeAppColorsHeader() {
+    writer.appendLine(
+        """
+            package ${themePackage}
+
+            import androidx.compose.ui.graphics.Color
+            import ${themePackage}.AppColorScheme
+
+            /**
+             * GENERATED FILE: Do not edit this file manually.
+             * See [scripts/colorparser/ColorParser.kts] for more information.
+             */
+            object AppColorScheme$classSuffix : AppColorScheme {
+        """.trimIndent()
+    )
+}
+
+fun FileWriter.writeBlockClose() {
+    appendLine("}")
+    appendLine() // Empty last line
+}
+
+fun ThemeWriter.writeAppColorsFooter() {
+    writer.writeBlockClose()
+}
+
+fun FileWriter.writeAppColorsInterface() {
+    appendLine(
+        """
+            package ${themePackage}
+
+            import androidx.compose.ui.graphics.Color
+
+            /**
+             * GENERATED FILE: Do not edit this file manually.
+             * See [scripts/colorparser/ColorParser.kts] for more information.
+             */
+            interface AppColorScheme {
+        """.trimIndent()
+    )
+
+    val inputColorNameSuffix = themeWriters.first().inputColorNameSuffix
+    inputFile.forEachLine { inputLine ->
+        appendInterfaceFieldLineIfMatches(inputLine, inputColorNameSuffix)
+    }
+
+    writeBlockClose()
+}
+
+// Write interface
+FileWriter(File("$outputPath/AppColorScheme.kt")).use {
+    it.writeAppColorsInterface()
+}
+
+// Write themes
+themeWriters.forEach { themeWriter ->
+    with(themeWriter) {
+        writeAppColorsHeader()
+        inputFile.forEachLine { inputLine ->
+            appendLineIfMatches(inputLine)
+        }
+        writeAppColorsFooter()
+        writer.close()
+    }
+}

scripts/colorparser/README.md

@@ -0,0 +1,35 @@
+# Color Parser
+
+This script converts color tokens from Figma to Compose format. It is designed to be used with the
+figma 'Color2Code' plugin, which exports the Color Tokens.
+
+## Requirements
+
+- Android Studio
+- 'Color2Code' plugin for Figma
+- command line kotlin (`brew install kotlin`)
+
+## Usage
+
+1. Open
+   the [Color Tokens page](https://www.figma.com/file/jTFWg6tZjCWwcxqwkKmykZ/app-foundation?type=design&node-id=1259-12&mode=design&t=BcdgPKHmtGLKMZL8-11)
+   in Figma.
+1. Run the [Color2Code](https://www.figma.com/community/plugin/1262830857362718014) plugin in Figma.
+   Note: you need edit rights for this, perhaps you need to do
+   this in collaboration with a designer.
+2. Export the Color Tokens using the plugin. Disable `Remove group names`; enable
+   `Camel case naming` select `Android` and `Semantics`.
+   ![Color 2 Code settings](color_parser_color_2_code.png)
+3. Copy the output of the plugin and paste it into the `color_parser_input.txt` file.
+4. Run the `ColorParser.kts` script by clicking the play button in the file or running
+
+   `./scripts/colorparser/ColorParser.kts`
+
+5. The script will update the `AppColorScheme.kt` file and the corresponding files for both the
+   light and dark themes.
+
+## File Structure
+
+- `color_parser_input.kt`: Paste the output of the 'Color2Code' plugin here.
+- `ColorParser.kts`: Script to parse the color tokens and generate the Compose code.
+  `