@likec4/config 1.41.0 → 1.42.0

package/schema.json

@@ -30,6 +30,13 @@
         "pattern": "^(?!\\/|[A-Za-z]:[\\\\\\/])(?!.*:\\/\\/).*$"
       }
     },
+    "styles": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/StylesConfiguration"
+        }
+      ]
+    },
     "exclude": {
       "description": "List of file patterns to exclude from the project, default is [\"**/node_modules/**\"]",
       "type": "array",
@@ -40,5 +47,529 @@
   },
   "required": [
     "name"
-  ]
+  ],
+  "definitions": {
+    "StylesConfiguration": {
+      "id": "StylesConfiguration",
+      "description": "Project styles customization",
+      "type": "object",
+      "properties": {
+        "theme": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ThemeCustomization"
+            }
+          ]
+        },
+        "defaults": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/DefaultStyleValues"
+            }
+          ]
+        }
+      }
+    },
+    "ThemeCustomization": {
+      "id": "ThemeCustomization",
+      "description": "Theme customization",
+      "type": "object",
+      "properties": {
+        "colors": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ThemeColors"
+            }
+          ]
+        },
+        "sizes": {
+          "description": "Map of theme sizes.",
+          "type": "object",
+          "properties": {
+            "xs": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "sm": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "md": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "lg": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "xl": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "ThemeColors": {
+      "id": "ThemeColors",
+      "description": "Override of theme colors",
+      "anyOf": [
+        {
+          "type": "object",
+          "propertyNames": {
+            "$ref": "#/definitions/ColorName"
+          },
+          "additionalProperties": {
+            "allOf": [
+              {
+                "$ref": "#/definitions/ThemeColorValues"
+              }
+            ]
+          }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "amber": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "blue": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "gray": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "slate": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "green": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "indigo": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "muted": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "primary": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "red": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "secondary": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "sky": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    "ColorName": {
+      "id": "ColorName",
+      "description": "Color name (Theme color name or custom color name)",
+      "anyOf": [
+        {
+          "$ref": "#/definitions/ThemeColor"
+        },
+        {
+          "type": "string",
+          "minLength": 1
+        }
+      ]
+    },
+    "ThemeColor": {
+      "id": "ThemeColor",
+      "description": "Reserved theme color name",
+      "type": "string",
+      "enum": [
+        "amber",
+        "blue",
+        "gray",
+        "slate",
+        "green",
+        "indigo",
+        "muted",
+        "primary",
+        "red",
+        "secondary",
+        "sky"
+      ]
+    },
+    "ThemeColorValues": {
+      "id": "ThemeColorValues",
+      "description": "Exact value (hex, rgb, rgba, hsl, hsla ...) or break down of specific color values",
+      "anyOf": [
+        {
+          "$ref": "#/definitions/ColorLiteral"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "elements": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/ColorLiteral"
+                },
+                {
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/ElementColorValues"
+                    }
+                  ]
+                }
+              ]
+            },
+            "relationships": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/ColorLiteral"
+                },
+                {
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/RelationshipColorValues"
+                    }
+                  ]
+                }
+              ]
+            }
+          },
+          "required": [
+            "elements",
+            "relationships"
+          ]
+        }
+      ]
+    },
+    "ColorLiteral": {
+      "id": "ColorLiteral",
+      "description": "Color value in any valid CSS format: hex, rgb, rgba, hsl, hsla ...",
+      "type": "string",
+      "minLength": 1
+    },
+    "ElementColorValues": {
+      "id": "ElementColorValues",
+      "description": "Specific element colors",
+      "type": "object",
+      "properties": {
+        "fill": {
+          "description": "Background color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "stroke": {
+          "description": "Stroke color (border, paths above background)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "hiContrast": {
+          "description": "High contrast text color (title)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "loContrast": {
+          "description": "Low contrast text color (description)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        }
+      },
+      "required": [
+        "fill",
+        "stroke",
+        "hiContrast",
+        "loContrast"
+      ]
+    },
+    "RelationshipColorValues": {
+      "id": "RelationshipColorValues",
+      "description": "Specefic relationship colors",
+      "type": "object",
+      "properties": {
+        "line": {
+          "description": "Line color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "label": {
+          "description": "Label text color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "labelBg": {
+          "description": "Label background color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        }
+      },
+      "required": [
+        "line",
+        "label"
+      ]
+    },
+    "Dimensions": {
+      "id": "Dimensions",
+      "description": "Dimensions",
+      "type": "object",
+      "properties": {
+        "width": {
+          "type": "number"
+        },
+        "height": {
+          "type": "number"
+        }
+      },
+      "required": [
+        "width",
+        "height"
+      ]
+    },
+    "DefaultStyleValues": {
+      "id": "DefaultStyleValues",
+      "description": "Override default values for style properties\nThese values will be used if such property is not defined",
+      "type": "object",
+      "properties": {
+        "color": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorName"
+            }
+          ]
+        },
+        "opacity": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/Opacity"
+            }
+          ]
+        },
+        "border": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/BorderStyle"
+            }
+          ]
+        },
+        "size": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ElementSize"
+            }
+          ]
+        },
+        "shape": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ElementShape"
+            }
+          ]
+        },
+        "group": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ColorName"
+                }
+              ]
+            },
+            "opacity": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Opacity"
+                }
+              ]
+            },
+            "border": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/BorderStyle"
+                }
+              ]
+            }
+          }
+        },
+        "relationship": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ColorName"
+                }
+              ]
+            },
+            "line": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/LineType"
+                }
+              ]
+            },
+            "arrow": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ArrowType"
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "Opacity": {
+      "id": "Opacity",
+      "description": "Opacity 0%-100%",
+      "type": "number",
+      "minimum": 0,
+      "maximum": 100
+    },
+    "BorderStyle": {
+      "id": "BorderStyle",
+      "description": "Border style",
+      "type": "string",
+      "enum": [
+        "solid",
+        "dashed",
+        "dotted",
+        "none"
+      ]
+    },
+    "ElementSize": {
+      "id": "ElementSize",
+      "description": "Element size",
+      "type": "string",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ]
+    },
+    "ElementShape": {
+      "id": "ElementShape",
+      "description": "Element shape",
+      "type": "string",
+      "enum": [
+        "rectangle",
+        "person",
+        "browser",
+        "mobile",
+        "cylinder",
+        "storage",
+        "queue"
+      ]
+    },
+    "LineType": {
+      "id": "LineType",
+      "description": "Default line type for relationships",
+      "type": "string",
+      "enum": [
+        "dashed",
+        "solid",
+        "dotted"
+      ]
+    },
+    "ArrowType": {
+      "id": "ArrowType",
+      "description": "Relationship arrow type",
+      "type": "string",
+      "enum": [
+        "none",
+        "normal",
+        "onormal",
+        "dot",
+        "odot",
+        "diamond",
+        "odiamond",
+        "crow",
+        "open",
+        "vee"
+      ]
+    }
+  }
 }

package/src/define-config.ts

@@ -1,4 +1,14 @@
-import { type GeneratorFn, type LikeC4ProjectConfig, GeneratorsSchema, LikeC4ProjectConfigSchema } from './schema'
+import type { LikeC4ProjectStylesConfig, LikeC4ProjectTheme, ThemeColorValues } from '@likec4/core/types'
+import type { GeneratorFn, LikeC4ProjectConfig, LikeC4ProjectConfigInput } from './schema'
+import { GeneratorsSchema, LikeC4ProjectConfigSchema } from './schema'
+import {
+  type LikeC4ConfigThemeInput,
+  type LikeC4StylesConfigInput,
+  type ThemeColorValuesInput,
+  LikeC4Config_Styles_Theme,
+  LikeC4StylesConfigSchema,
+  ThemeColorValuesSchema,
+} from './schema.theme'
 
 /**
  * Defines LikeC4 Project, allows custom generators that can be executed using CLI:
@@ -21,8 +31,8 @@ import { type GeneratorFn, type LikeC4ProjectConfig, GeneratorsSchema, LikeC4Pro
  * })
  * ```
  */
-export function defineConfig<const C extends LikeC4ProjectConfig>(config: C): C {
-  return LikeC4ProjectConfigSchema.parse(config) as unknown as C
+export function defineConfig<C extends LikeC4ProjectConfigInput>(config: C): LikeC4ProjectConfig {
+  return LikeC4ProjectConfigSchema.parse(config) as unknown as LikeC4ProjectConfig
 }
 
 /**
@@ -49,3 +59,73 @@ export function defineConfig<const C extends LikeC4ProjectConfig>(config: C): C
 export function defineGenerators<const G extends Record<string, GeneratorFn>>(generators: G): G {
   return GeneratorsSchema.parse(generators) as unknown as G
 }
+
+/**
+ * Define reusable custom theme color
+ * @example
+ * ```ts
+ * export default defineThemeColor({
+ *   element: {
+ *     fill: 'red'
+ *   }
+ * })
+ * ```
+ */
+export function defineThemeColor<const S extends ThemeColorValuesInput>(colors: S): ThemeColorValues {
+  return ThemeColorValuesSchema.parse(colors)
+}
+
+/**
+ * Define reusable custom theme
+ * @example
+ * ```ts
+ * import { defineThemeColor, defineTheme } from 'likec4/config'
+ *
+ * export default defineTheme({
+ *   colors: {
+ *     primary: '#FF0000',
+ *     // Or use defineThemeColor
+ *     red: defineThemeColor({
+ *       elements: {
+ *         fill: 'red'
+ *       }
+ *     })
+ *   }
+ * })
+ * ```
+ */
+export function defineTheme<const S extends LikeC4ConfigThemeInput>(theme: S): LikeC4ProjectTheme {
+  return LikeC4Config_Styles_Theme.parse(theme)
+}
+
+/**
+ * Define reusable custom style
+ * @example
+ * ```ts
+ * import { defineStyle, defineThemeColor } from 'likec4/config'
+ *
+ * export default defineStyle({
+ *   theme: {
+ *     colors: {
+ *       red: defineThemeColor({
+ *         elements: {
+ *           fill: 'red'
+ *         }
+ *       })
+ *     }
+ *   },
+ *   defaults: {
+ *     color: 'red',
+ *     opacity: 50,
+ *     border: 'solid',
+ *     size: 'sm',
+ *     relationship: {
+ *       color: 'grey',
+ *       line: 'solid',
+ *     }
+ *   }
+ * })
+ */
+export function defineStyle<const S extends LikeC4StylesConfigInput>(styles: S): LikeC4ProjectStylesConfig {
+  return LikeC4StylesConfigSchema.parse(styles)
+}

package/src/index.ts

@@ -3,9 +3,15 @@ export type {
   GeneratorFnContext,
   GeneratorFnParams,
   LikeC4ProjectConfig,
+  LikeC4ProjectConfigInput,
   LikeC4ProjectJsonConfig,
 } from './schema'
 
+export type {
+  LikeC4StylesConfig,
+  LikeC4StylesConfigInput,
+} from './schema.theme'
+
 export { serializableLikeC4ProjectConfig, validateProjectConfig } from './schema'
 
 export {
@@ -18,4 +24,7 @@ export {
 export {
   defineConfig,
   defineGenerators,
+  defineStyle,
+  defineTheme,
+  defineThemeColor,
 } from './define-config'

package/src/node/load-config.ts

@@ -45,13 +45,17 @@ export async function loadConfig(filepath: URI): Promise<LikeC4ProjectConfig> {
             /**
              * Mock implementation, this allows to skip redundant bundling @likec4/config
              */
-            build.onLoad({ filter: /.*/, namespace: 'likec4-config' }, (args) => {
+            build.onLoad({ filter: /.*/, namespace: 'likec4-config' }, (_args) => {
               return {
                 contents: `
-function mockDefineConfig(x) { return x }
+// Mock implementation to allow loading config files without bundling @likec4/config
+function mock(x) { return x }
 export {
-  mockDefineConfig as defineConfig,
-  mockDefineConfig as defineGenerators,
+  mock as defineConfig,
+  mock as defineGenerators,
+  mock as defineStyle,
+  mock as defineTheme,
+  mock as defineThemeColor,
 }`,
                 loader: 'js',
               }

package/src/schema.image-alias.ts

@@ -1,4 +1,4 @@
-import * as z from 'zod4'
+import * as z from 'zod/v4'
 
 // Key must be prefixed with "@" and contain only allowed characters
 const IMAGE_ALIAS_KEY_REGEX = /^@[A-Za-z0-9_-]*$/