@likec4/core 1.20.3 → 1.21.1

package/src/{colors → theme}/index.ts

@@ -7,7 +7,43 @@ export const defaultTheme: LikeC4Theme = {
   elements: ElementColors,
   relationships: RelationshipColors,
   font: 'Arial',
-  shadow: '#0a0a0a'
+  shadow: '#0a0a0a',
+  sizes: {
+    xs: {
+      width: 180,
+      height: 100,
+    },
+    sm: {
+      width: 240,
+      height: 135,
+    },
+    md: {
+      width: 320,
+      height: 180,
+    },
+    lg: {
+      width: 420,
+      height: 234,
+    },
+    xl: {
+      width: 520,
+      height: 290,
+    },
+  },
+  spacing: {
+    xs: 8, // 0.5rem
+    sm: 10, // 0.625rem
+    md: 16, // 1rem
+    lg: 24, // 1.5rem = 16px + 8px
+    xl: 32, // 2rem
+  },
+  textSizes: {
+    xs: 12,
+    sm: 14,
+    md: 19,
+    lg: 24,
+    xl: 32,
+  },
 }
 
 export function computeColorValues(color: HexColorLiteral): ThemeColorValues {
@@ -19,18 +55,18 @@ export function computeColorValues(color: HexColorLiteral): ThemeColorValues {
         fill: colors[6] as HexColorLiteral,
         stroke: colors[7] as HexColorLiteral,
         hiContrast: colors[0] as HexColorLiteral,
-        loContrast: colors[1] as HexColorLiteral
+        loContrast: colors[1] as HexColorLiteral,
       },
       relationships: {
         lineColor: colors[4] as HexColorLiteral,
         labelColor: colors[3] as HexColorLiteral,
-        labelBgColor: colors[9] as HexColorLiteral
-      }
+        labelBgColor: colors[9] as HexColorLiteral,
+      },
     }
   } else {
     return {
       elements: defaultTheme.elements['primary'],
-      relationships: defaultTheme.relationships['primary']
+      relationships: defaultTheme.relationships['primary'],
     }
   }
 }

package/src/{colors → theme}/relationships.ts

@@ -3,52 +3,52 @@ import type { RelationshipThemeColors, RelationshipThemeColorValues } from '../t
 const gray = {
   lineColor: '#6E6E6E',
   labelBgColor: '#18191b',
-  labelColor: '#C6C6C6'
+  labelColor: '#C6C6C6',
 } satisfies RelationshipThemeColorValues
 const slate = {
   lineColor: '#64748b', // 500
   labelBgColor: '#0f172a', // 900
-  labelColor: '#cbd5e1' // 300
+  labelColor: '#cbd5e1', // 300
 } satisfies RelationshipThemeColorValues
 
 const blue = {
   lineColor: '#3b82f6', // 500
   labelBgColor: '#172554', // 950
-  labelColor: '#60a5fa' // 400
+  labelColor: '#60a5fa', // 400
 } satisfies RelationshipThemeColorValues
 
 const sky = {
   lineColor: '#0ea5e9', // 500
   labelBgColor: '#082f49', // 950
-  labelColor: '#38bdf8' // 400
+  labelColor: '#38bdf8', // 400
 } satisfies RelationshipThemeColorValues
 
 export const RelationshipColors = {
   amber: {
     lineColor: '#b45309',
     labelBgColor: '#78350f',
-    labelColor: '#FFE0C2'
+    labelColor: '#FFE0C2',
   },
   blue,
   gray,
   green: {
     lineColor: '#15803d', // 700
     labelBgColor: '#052e16', // 950
-    labelColor: '#22c55e' // 500
+    labelColor: '#22c55e', // 500
   },
   indigo: {
     lineColor: '#6366f1', // 500
     labelBgColor: '#1e1b4b', // 950
-    labelColor: '#818cf8' // 400
+    labelColor: '#818cf8', // 400
   },
   muted: slate,
   primary: blue,
   red: {
     lineColor: '#AC4D39',
     labelBgColor: '#b91c1c',
-    labelColor: '#f5b2a3'
+    labelColor: '#f5b2a3',
   },
   secondary: sky,
   sky,
-  slate
+  slate,
 } satisfies RelationshipThemeColors

package/src/types/element.ts

@@ -1,6 +1,6 @@
 import type { Tagged, TupleToUnion } from 'type-fest'
 import type { IconUrl, NonEmptyArray } from './_common'
-import type { Color, ThemeColor } from './theme'
+import type { Color, ShapeSize, SpacingSize, TextSize, ThemeColor } from './theme'
 
 // Full-qualified-name
 export type Fqn<Id extends string = string> = Tagged<Id, 'Fqn'>
@@ -30,6 +30,9 @@ export const ElementShapes = [
 export type ElementShape = TupleToUnion<typeof ElementShapes>
 export const DefaultThemeColor: ThemeColor = 'primary'
 export const DefaultElementShape: ElementShape = 'rectangle'
+export const DefaultShapeSize: ShapeSize = 'md'
+export const DefaultPaddingSize: SpacingSize = 'md'
+export const DefaultTextSize: TextSize = 'md'
 
 export interface ElementStyle {
   readonly border?: BorderStyle
@@ -44,6 +47,17 @@ export interface ElementStyle {
    * @default false
    */
   readonly multiple?: boolean
+
+  /**
+   * Shape size
+   *
+   * @default 'md'
+   */
+  readonly size?: ShapeSize
+
+  readonly padding?: SpacingSize
+
+  readonly textSize?: TextSize
 }
 
 export type Tag<Tags extends string = string> = Tagged<Tags, 'Tag'>
@@ -91,7 +105,11 @@ export interface ElementKindSpecificationStyle {
   color?: Color
   border?: BorderStyle
   opacity?: number
+  size?: ShapeSize
+  padding?: SpacingSize
+  textSize?: TextSize
 }
+
 export interface ElementKindSpecification {
   readonly technology?: string
   readonly notation?: string

package/src/types/expression.ts

@@ -2,7 +2,7 @@ import type { IconUrl } from './_common'
 import type { BorderStyle, ElementKind, ElementShape, Fqn, Tag } from './element'
 import type { WhereOperator } from './operators'
 import type { RelationshipArrowType, RelationshipLineType } from './relation'
-import type { Color } from './theme'
+import type { Color, ShapeSize } from './theme'
 import type { ViewId } from './view'
 
 interface BaseExpr {
@@ -54,6 +54,9 @@ export interface CustomElementExpr extends Omit<BaseExpr, 'custom'> {
     opacity?: number
     navigateTo?: ViewId
     multiple?: boolean
+    size?: ShapeSize
+    padding?: ShapeSize
+    textSize?: ShapeSize
   }
 }
 

package/src/types/index.ts

@@ -28,6 +28,9 @@ export {
   AsFqn,
   BorderStyles,
   DefaultElementShape,
+  DefaultPaddingSize,
+  DefaultShapeSize,
+  DefaultTextSize,
   DefaultThemeColor,
   ElementKind,
   ElementShapes,
@@ -147,6 +150,9 @@ export type {
   LikeC4Theme,
   RelationshipThemeColors,
   RelationshipThemeColorValues,
+  ShapeSize,
+  SpacingSize,
+  TextSize,
   ThemeColor,
   ThemeColorValues,
 } from './theme'

package/src/types/theme.ts

@@ -11,7 +11,7 @@ const ThemeColors = [
   'primary',
   'red',
   'secondary',
-  'sky'
+  'sky',
 ] as const
 export type ThemeColor = typeof ThemeColors[number]
 
@@ -21,6 +21,15 @@ export type ColorLiteral = HexColorLiteral
 
 export type Color = LiteralUnion<ThemeColor, string>
 
+export type ShapeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+/**
+ * For padding, margin, etc.
+ */
+export type SpacingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
 export function isThemeColor(color: Color): color is ThemeColor {
   return color in ThemeColors
 }
@@ -58,4 +67,16 @@ export interface LikeC4Theme {
   shadow: ColorLiteral
   relationships: RelationshipThemeColors
   elements: ElementThemeColors
+  sizes: {
+    [key in ShapeSize]: {
+      width: number
+      height: number
+    }
+  }
+  spacing: {
+    [key in SpacingSize]: number
+  }
+  textSizes: {
+    [key in TextSize]: number
+  }
 }

package/src/types/view.ts

@@ -14,7 +14,7 @@ import type { ElementExpression, ElementPredicateExpression, Expression } from '
 import type { ExpressionV2, FqnExpr } from './expression-v2'
 import type { GlobalPredicateId, GlobalStyleID } from './global'
 import type { RelationId, RelationshipArrowType, RelationshipKind, RelationshipLineType } from './relation'
-import type { Color, ThemeColorValues } from './theme'
+import type { Color, ShapeSize, SpacingSize, TextSize, ThemeColorValues } from './theme'
 import type { ElementNotation } from './view-notation'
 
 export type ViewId<Id extends string = string> = Tagged<Id, 'ViewID'>
@@ -94,6 +94,10 @@ export interface ViewRuleGroup {
   border?: BorderStyle
   // 0-100
   opacity?: number
+  multiple?: boolean
+  size?: ShapeSize
+  padding?: SpacingSize
+  textSize?: TextSize
 }
 
 export function isViewRuleGroup(rule: ViewRule): rule is ViewRuleGroup {