tolaria/design/wikilink-underline.pen

{
  "children": [
    {
      "type": "frame",
      "id": "wkUnd1",
      "x": 0,
      "y": 0,
      "name": "Wikilink Underline — Colored (Light)",
      "theme": { "Mode": "Light" },
      "clip": true,
      "width": 600,
      "height": 320,
      "fill": "$--background",
      "layout": "vertical",
      "gap": 8,
      "padding": [24, 32],
      "children": [
        {
          "type": "text",
          "id": "wkUndTitle",
          "content": "Wikilink Underline: Color Follows Type",
          "fontSize": 18,
          "fontWeight": 600,
          "fill": "$--foreground",
          "width": "fill_container"
        },
        {
          "type": "text",
          "id": "wkUndDesc",
          "content": "border-bottom uses currentColor so the underline inherits the type color.",
          "fontSize": 13,
          "fill": "$--muted-foreground",
          "width": "fill_container"
        },
        {
          "type": "frame",
          "id": "wkUndSpacer",
          "width": "fill_container",
          "height": 12
        },
        {
          "type": "frame",
          "id": "wkUndRow1",
          "name": "Row: Project (Red)",
          "width": "fill_container",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "wkLbl1",
              "content": "Project →",
              "fontSize": 14,
              "fill": "$--muted-foreground",
              "width": 100
            },
            {
              "type": "text",
              "id": "wkLink1",
              "content": "[[Laputa App]]",
              "fontSize": 14,
              "fontWeight": 500,
              "fill": "$--accent-red",
              "textDecoration": "underline",
              "textDecorationStyle": "dotted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "wkUndRow2",
          "name": "Row: Person (Yellow)",
          "width": "fill_container",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "wkLbl2",
              "content": "Person →",
              "fontSize": 14,
              "fill": "$--muted-foreground",
              "width": 100
            },
            {
              "type": "text",
              "id": "wkLink2",
              "content": "[[Luca Ferraro]]",
              "fontSize": 14,
              "fontWeight": 500,
              "fill": "$--accent-yellow",
              "textDecoration": "underline",
              "textDecorationStyle": "dotted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "wkUndRow3",
          "name": "Row: Topic (Green)",
          "width": "fill_container",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "wkLbl3",
              "content": "Topic →",
              "fontSize": 14,
              "fill": "$--muted-foreground",
              "width": 100
            },
            {
              "type": "text",
              "id": "wkLink3",
              "content": "[[Knowledge Management]]",
              "fontSize": 14,
              "fontWeight": 500,
              "fill": "$--accent-green",
              "textDecoration": "underline",
              "textDecorationStyle": "dotted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "wkUndRow4",
          "name": "Row: Responsibility (Purple)",
          "width": "fill_container",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "wkLbl4",
              "content": "Responsibility →",
              "fontSize": 14,
              "fill": "$--muted-foreground",
              "width": 100
            },
            {
              "type": "text",
              "id": "wkLink4",
              "content": "[[Backend Development]]",
              "fontSize": 14,
              "fontWeight": 500,
              "fill": "$--accent-purple",
              "textDecoration": "underline",
              "textDecorationStyle": "dotted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "wkUndRow5",
          "name": "Row: Type (Blue, default)",
          "width": "fill_container",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "wkLbl5",
              "content": "Type →",
              "fontSize": 14,
              "fill": "$--muted-foreground",
              "width": 100
            },
            {
              "type": "text",
              "id": "wkLink5",
              "content": "[[Project]]",
              "fontSize": 14,
              "fontWeight": 500,
              "fill": "$--accent-blue",
              "textDecoration": "underline",
              "textDecorationStyle": "dotted"
            }
          ]
        }
      ]
    }
  ],
  "variables": {}
}