@likec4/core 1.20.3 → 1.21.0

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 {