Split semantic token docs into components patterns and layouts

index.html

@@ -18,6 +18,8 @@
       <ul class="sg-index-list">
         <li><a href="./foundations.html">Foundations</a></li>
         <li><a href="./semantic-tokens-components.html">Semantic Tokens Components</a></li>
+        <li><a href="./semantic-tokens-patterns.html">Semantic Tokens Patterns</a></li>
+        <li><a href="./semantic-tokens-layouts.html">Semantic Tokens Layouts</a></li>
       </ul>
     </section>