docs/figma-tokens-diagram.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1001px" height="929px" viewBox="-0.5 -0.5 1001 929" content="&lt;mxfile&gt;&lt;diagram id=&quot;YndA5a6WynzzgKQvoGUn&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
  <style type="text/css">
    @media (prefers-color-scheme: dark)
    {
        :root {--light-color: #c9d1d9; --dark-color: #0d1117; }
        svg[style^="background-color:"] { background-color: var(--dark-color) !important; }
        g[filter="url(#dropShadow)"] { filter: none !important; }
        [stroke="rgb(0, 0, 0)"] { stroke: var(--light-color); }
        [stroke="rgb(255, 255, 255)"] { stroke: var(--dark-color); }
        [fill="rgb(0, 0, 0)"] { fill: var(--light-color); }
        [fill="rgb(255, 255, 255)"] { fill: var(--dark-color); }
        g[fill="rgb(0, 0, 0)"] text { fill: var(--light-color); }
        div[data-drawio-colors*="color: rgb(0, 0, 0)"]
            div { color: var(--light-color) !important; }
        div[data-drawio-colors*="border-color: rgb(0, 0, 0)"]
            { border-color: var(--light-color) !important; }
        div[data-drawio-colors*="border-color: rgb(0, 0, 0)"]
            div { border-color: var(--light-color) !important; }
        div[data-drawio-colors*="background-color: rgb(255, 255, 255)"]
            { background-color: var(--dark-color) !important; }
        div[data-drawio-colors*="background-color: rgb(255, 255, 255)"]
            div { background-color: var(--dark-color) !important; }
    }
</style>
  <g>
    <path d="M 240 80 L 273.63 80" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke" />
    <path d="M 278.88 80 L 271.88 83.5 L 273.63 80 L 271.88 76.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all" />
    <path d="M 280 35 C 280 26.72 297.91 20 320 20 C 330.61 20 340.78 21.58 348.28 24.39 C 355.79 27.21 360 31.02 360 35 L 360 125 C 360 133.28 342.09 140 320 140 C 297.91 140 280 133.28 280 125 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all" />
    <path d="M 360 35 C 360 43.28 342.09 50 320 50 C 297.91 50 280 43.28 280 35" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 93px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Altinn/figma-design-tokens</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="96" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/figma-...</text>
      </switch>
    </g>
    <path d="M 880 30 L 980 30 L 1000 50 L 1000 110 L 900 110 L 880 90 L 880 30 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all" />
    <path d="M 880 30 L 980 30 L 1000 50 L 900 50 Z" fill-opacity="0.05" fill="#000000" stroke="none" pointer-events="all" />
    <path d="M 880 30 L 900 50 L 900 110 L 880 90 Z" fill-opacity="0.1" fill="#000000" stroke="none" pointer-events="all" />
    <path d="M 900 110 L 900 50 L 880 30 M 900 50 L 1000 50" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 80px; margin-left: 901px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">@altinn/figma-tokens</div>
            </div>
          </div>
        </foreignObject>
        <text x="950" y="84" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">@altinn/figma-to...</text>
      </switch>
    </g>
    <rect x="440" y="10" width="400" height="280" fill="none" stroke="rgb(0, 0, 0)" pointer-events="none" />
    <rect x="440" y="60" width="400" height="110" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 392px; height: 1px; padding-top: 50px; margin-left: 445px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 120px; overflow: hidden;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                <h1>tokens.esm.js</h1>
                <p>
                  export const ComponentPanelColorBackgroundDefault = "#e3f7ff";
                  <br />
                  <span>
                    export const ComponentPanelColorBackgroundSuccess = "#d4f9e4";
                    <br />
                    ...
                  </span>
                </p>
              </div>
            </div>
          </div>
        </foreignObject>
        <text x="445" y="62" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">tokens.esm.js...</text>
      </switch>
    </g>
    <rect x="440" y="10" width="160" height="40" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 152px; height: 1px; padding-top: 0px; margin-left: 445px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 50px; overflow: hidden;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                <h1>tokens.json</h1>
                <p>
                  <br />
                </p>
              </div>
            </div>
          </div>
        </foreignObject>
        <text x="445" y="12" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">tokens.json
</text>
      </switch>
    </g>
    <rect x="440" y="180" width="400" height="110" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 392px; height: 1px; padding-top: 170px; margin-left: 445px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 120px; overflow: hidden;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                <h1>tokens.css</h1>
                <p>
                  :root {
                  <br />
                  <span>
                      --component-panel-color-background-default: #e3f7ff;
                    <br />
                  </span>
                  <span>
                      --component-panel-color-background-success: #d4f9e4;
                    <br />
                  </span>
                  <span>  ...</span>
                </p>
              </div>
            </div>
          </div>
        </foreignObject>
        <text x="445" y="182" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">tokens.css...</text>
      </switch>
    </g>
    <path d="M 360 80 L 390 80 Q 400 80 400 70 L 400 40 Q 400 30 410 30 L 433.63 30" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 438.88 30 L 431.88 33.5 L 433.63 30 L 431.88 26.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 80 L 390 80 Q 400 80 400 90 L 400 105 Q 400 115 410 115 L 433.63 115" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 438.88 115 L 431.88 118.5 L 433.63 115 L 431.88 111.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 80 L 390 80 Q 400 80 400 90 L 400 225 Q 400 235 410 235 L 433.63 235" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 438.88 235 L 431.88 238.5 L 433.63 235 L 431.88 231.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 840 60 L 873.63 60" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 878.88 60 L 871.88 63.5 L 873.63 60 L 871.88 56.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 280 385 C 280 376.72 297.91 370 320 370 C 330.61 370 340.78 371.58 348.28 374.39 C 355.79 377.21 360 381.02 360 385 L 360 475 C 360 483.28 342.09 490 320 490 C 297.91 490 280 483.28 280 475 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 385 C 360 393.28 342.09 400 320 400 C 297.91 400 280 393.28 280 385" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 443px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Altinn/altinn-design-system</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="446" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/altinn...</text>
      </switch>
    </g>
    <path d="M 320 370 L 320 340 Q 320 330 330 330 L 940 330 Q 950 330 950 320 L 950 110" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none" />
    <path d="M 400 370 L 500 370 L 520 390 L 520 450 L 420 450 L 400 430 L 400 370 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 400 370 L 500 370 L 520 390 L 420 390 Z" fill-opacity="0.05" fill="#000000" stroke="none" pointer-events="none" />
    <path d="M 400 370 L 420 390 L 420 450 L 400 430 Z" fill-opacity="0.1" fill="#000000" stroke="none" pointer-events="none" />
    <path d="M 420 450 L 420 390 L 400 370 M 420 390 L 520 390" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 420px; margin-left: 421px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">@altinn/altinn-design-system</div>
            </div>
          </div>
        </foreignObject>
        <text x="470" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">@altinn/altinn-d...</text>
      </switch>
    </g>
    <path d="M 360 412 L 395.43 411.86" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 400.68 411.84 L 393.7 415.37 L 395.43 411.86 L 393.67 408.37 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 280 525 C 280 516.72 297.91 510 320 510 C 330.61 510 340.78 511.58 348.28 514.39 C 355.79 517.21 360 521.02 360 525 L 360 615 C 360 623.28 342.09 630 320 630 C 297.91 630 280 623.28 280 615 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 525 C 360 533.28 342.09 540 320 540 C 297.91 540 280 533.28 280 525" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 583px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Altinn/app-frontend-react</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="586" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/app-fr...</text>
      </switch>
    </g>
    <path d="M 280 665 C 280 656.72 297.91 650 320 650 C 330.61 650 340.78 651.58 348.28 654.39 C 355.79 657.21 360 661.02 360 665 L 360 755 C 360 763.28 342.09 770 320 770 C 297.91 770 280 763.28 280 755 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 665 C 360 673.28 342.09 680 320 680 C 297.91 680 280 673.28 280 665" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 723px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Altinn/altinn-authorization-admin</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="726" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/altinn...</text>
      </switch>
    </g>
    <path d="M 300 803 C 300 794.72 317.91 788 340 788 C 350.61 788 360.78 789.58 368.28 792.39 C 375.79 795.21 380 799.02 380 803 L 380 893 C 380 901.28 362.09 908 340 908 C 317.91 908 300 901.28 300 893 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 380 803 C 380 811.28 362.09 818 340 818 C 317.91 818 300 811.28 300 803" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 290 813 C 290 804.72 307.91 798 330 798 C 340.61 798 350.78 799.58 358.28 802.39 C 365.79 805.21 370 809.02 370 813 L 370 903 C 370 911.28 352.09 918 330 918 C 307.91 918 290 911.28 290 903 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 370 813 C 370 821.28 352.09 828 330 828 C 307.91 828 290 821.28 290 813" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 871px; margin-left: 291px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Altinn/altinn-authorization-admin</div>
            </div>
          </div>
        </foreignObject>
        <text x="330" y="874" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/altinn...</text>
      </switch>
    </g>
    <path d="M 290 813 C 290 804.72 307.91 798 330 798 C 340.61 798 350.78 799.58 358.28 802.39 C 365.79 805.21 370 809.02 370 813 L 370 903 C 370 911.28 352.09 918 330 918 C 307.91 918 290 911.28 290 903 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 370 813 C 370 821.28 352.09 828 330 828 C 307.91 828 290 821.28 290 813" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 871px; margin-left: 291px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">...</div>
            </div>
          </div>
        </foreignObject>
        <text x="330" y="874" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">...</text>
      </switch>
    </g>
    <path d="M 290 813 C 290 804.72 307.91 798 330 798 C 340.61 798 350.78 799.58 358.28 802.39 C 365.79 805.21 370 809.02 370 813 L 370 903 C 370 911.28 352.09 918 330 918 C 307.91 918 290 911.28 290 903 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 370 813 C 370 821.28 352.09 828 330 828 C 307.91 828 290 821.28 290 813" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 280 823 C 280 814.72 297.91 808 320 808 C 330.61 808 340.78 809.58 348.28 812.39 C 355.79 815.21 360 819.02 360 823 L 360 913 C 360 921.28 342.09 928 320 928 C 297.91 928 280 921.28 280 913 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 823 C 360 831.28 342.09 838 320 838 C 297.91 838 280 831.28 280 823" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 881px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Altinn/altinn-authorization-admin</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="884" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Altinn/altinn...</text>
      </switch>
    </g>
    <path d="M 280 823 C 280 814.72 297.91 808 320 808 C 330.61 808 340.78 809.58 348.28 812.39 C 355.79 815.21 360 819.02 360 823 L 360 913 C 360 921.28 342.09 928 320 928 C 297.91 928 280 921.28 280 913 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 360 823 C 360 831.28 342.09 838 320 838 C 297.91 838 280 831.28 280 823" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 881px; margin-left: 281px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">...</div>
            </div>
          </div>
        </foreignObject>
        <text x="320" y="884" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">...</text>
      </switch>
    </g>
    <path d="M 360 570 L 460 570 Q 470 570 470 560 L 470 450" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="2 6" pointer-events="none" />
    <path d="M 360 710 L 460 710 Q 470 710 470 700 L 470 450" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none" />
    <path d="M 360 868 L 460 868 Q 470 868 470 858 L 470 450" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none" />
    <path d="M 0 23 L 0 0 L 240 0 L 240 23" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 0 23 L 0 320 L 240 320 L 240 23" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <path d="M 0 23 L 240 23" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none" />
    <g fill="rgb(0, 0, 0)" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
      <text x="119.5" y="16">Figma</text>
    </g>
    <g transform="translate(-0.5 -0.5)">
      <switch>
        <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
          <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 155px; margin-left: 115px;">
            <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
              <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
                <h1 style="text-align: left">tokens.json</h1>
                <p style="text-align: left">
                  {
                  <br />
                    "altinn": {
                  <br />
                      "component": {
                  <br />
                        "panel": {
                  <br />
                          "color": {
                  <br />
                            "background": {
                  <br />
                              "default": {
                  <br />
                                "value": "{colors.blue-00}",
                  <br />
                                "type": "color"
                  <br />
                              },
                  <br />
                              "success": {
                  <br />
                                "value": "{colors.success.calm}",
                  <br />
                                "type": "color"
                  <br />
                              },
                  <br />
                              ...
                </p>
              </div>
            </div>
          </div>
        </foreignObject>
        <text x="115" y="159" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">tokens.json...</text>
      </switch>
    </g>
  </g>
  <switch>
    <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" />
    <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
      <text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text>
    </a>
  </switch>
</svg>