Styleguide Update 1

styleguide/assets/icon/fairydust.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="387.074" height="600">
-    <path d="M193.537 0c-16.56 0-33.118 5.21-47 15.621l-36.002 26.994a134.8 134.8 0 0 0-50.404 77.303l-6.887 29.625a221.3 221.3 0 0 0-2.414 88.346L62 301.543a74.85 74.85 0 0 1-11.45 54.486l-5.624 8.436A256 256 0 0 0 9.58 444.359L3.984 466.75a133.52 133.52 0 0 0 9.973 91.814l5.479 11.014c19.46 39.138 78.74 39.138 98.2 0l5.477-11.014a597 597 0 0 0 31.787-76.992l-.066.207c4.198-12.242 15.545-20.271 28.486-20.16h20.219c13.223 0 24.748 8.31 28.93 20.854l.008.015a590 590 0 0 0 31.49 76.092l5.47 11c19.46 39.137 78.742 39.137 98.202 0l5.476-11.016a133.52 133.52 0 0 0 9.975-91.814l-5.596-22.391a256 256 0 0 0-35.345-79.893l-5.625-8.437a73.98 73.98 0 0 1-11.235-54.295l10.69-58.789a223.1 223.1 0 0 0-1.713-88.302l-7.649-34.399a133.16 133.16 0 0 0-50.078-77.629l-36.002-26.994C226.656 5.21 210.097 0 193.537 0m0 49.902c5.96 0 11.919 1.902 17 5.713l36.002 27.002a83.1 83.1 0 0 1 31.27 48.47l7.648 34.407a173.1 173.1 0 0 1 1.328 68.504l-10.69 58.79a124.06 124.06 0 0 0 18.833 90.982l5.617 8.43a206 206 0 0 1 28.441 64.288l5.596 22.389a83.47 83.47 0 0 1-6.236 57.424l-5.479 11.021c-2.485 4.998-6.173 4.998-8.658 0l-5.479-11.021-.006-.015a540 540 0 0 1-28.82-69.627l-.008-.023c-10.933-32.766-41.813-55.023-76.357-55.023h-19.791c-34.27-.295-65.094 21.528-76.211 53.947l-.067.199A547 547 0 0 1 78.341 536.3l-5.476 11.022c-2.485 4.998-6.173 4.998-8.658 0L58.728 536.3a83.47 83.47 0 0 1-6.236-57.424l5.594-22.388a206 206 0 0 1 28.443-64.29l5.617-8.43a124.93 124.93 0 0 0 19.098-90.87l-11.17-63.654a171.3 171.3 0 0 1 1.87-68.379l6.886-29.63a84.74 84.74 0 0 1 31.705-48.618l36.002-27.002c5.082-3.81 11.04-5.713 17-5.713M193.525 126c-41.125 0-75 33.875-75 75s33.875 75 75 75 75-33.875 75-75-33.874-75-75-75m0 50c14.104 0 25 10.897 25 25s-10.896 25-25 25-25-10.897-25-25 10.897-25 25-25m0 310.617a25 25 0 0 0-25 25v63.967a25 25 0 0 0 25 25 25 25 0 0 0 25-25v-63.967a25 25 0 0 0-25-25" style="stroke-width:3.77952"/>
+    <path d="M193.537 0c-16.56 0-33.118 5.21-47 15.621l-19.998 15a189.67 189.67 0 0 0-70.94 108.78l-2.355 10.142a221.3 221.3 0 0 0-2.414 88.346l18.086 103.05a25 25 0 0 0 28.945 20.301 25 25 0 0 0 20.3-28.945l-18.087-103.05a171.3 171.3 0 0 1 1.87-68.38l2.36-10.148a139.63 139.63 0 0 1 52.235-80.102l19.998-15c10.163-7.622 23.837-7.622 34 0l36.002 27.002a83.1 83.1 0 0 1 31.27 48.47l7.648 34.407a173.1 173.1 0 0 1 1.328 68.504l-10.69 58.79.296-1.388a111.98 111.98 0 0 0 12.314 82.957 25 25 0 0 0 .752 1.204 321.4 321.4 0 0 1 44.38 100.328l.745 2.988a83.47 83.47 0 0 1-6.236 57.424l-5.479 11.021c-2.485 4.998-6.173 4.998-8.658 0l-5.479-11.021-.006-.015a540 540 0 0 1-28.82-69.627l-.008-.023c-10.933-32.766-41.813-55.023-76.357-55.023h-19.791c-34.27-.295-65.094 21.528-76.211 53.947l-.067.199A547 547 0 0 1 78.341 536.3l-5.476 11.022c-2.485 4.998-6.173 4.998-8.658 0L58.728 536.3a83.47 83.47 0 0 1-6.236-57.424l15.303-61.195a25 25 0 0 0-18.198-30.316 25 25 0 0 0-30.318 18.187L3.984 466.749a133.52 133.52 0 0 0 9.973 91.815l5.478 11.013c19.46 39.138 78.741 39.138 98.201 0l5.477-11.013a597 597 0 0 0 31.787-76.992l-.066.207c4.198-12.242 15.545-20.272 28.486-20.16h20.219c13.222 0 24.748 8.309 28.93 20.853l.007.015a590 590 0 0 0 31.49 76.092l5.471 10.998c19.46 39.137 78.741 39.137 98.202 0l5.476-11.014a133.52 133.52 0 0 0 9.975-91.814l-.746-2.99c-10.221-40.882-27.35-79.708-50.6-114.847a61.92 61.92 0 0 1-6.75-45.789 25 25 0 0 0 .295-1.389l10.69-58.789a223.1 223.1 0 0 0-1.713-88.302l-7.649-34.399a133.16 133.16 0 0 0-50.078-77.629l-36.002-26.994C226.656 5.21 210.097 0 193.537 0m-.012 126a25 25 0 0 0-25 25 25 25 0 0 0 25 25c14.104 0 25 10.897 25 25s-10.896 25-25 25-25-10.897-25-25a25 25 0 0 0-25-25 25 25 0 0 0-25 25c0 41.125 33.875 75 75 75s75-33.875 75-75-33.874-75-75-75m0 360.617a25 25 0 0 0-25 25v63.967a25 25 0 0 0 25 25 25 25 0 0 0 25-25v-63.967a25 25 0 0 0-25-25" style="stroke-width:3.77952"/>
 </svg>

styleguide/assets/icon/looping.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M231.51 7.746a25 25 0 0 0-9.752.256c-17.828 4.035-35.735 9.9-52.84 18.553a25 25 0 0 0-11.023 33.591 25 25 0 0 0 33.593 11.024c12.659-6.403 26.647-11.084 41.307-14.402a25 25 0 0 0 18.865-29.903 25 25 0 0 0-20.15-19.119m140.744.736a25 25 0 0 0-20.42 18.834 25 25 0 0 0 18.44 30.166c14.563 3.514 28.421 8.42 40.884 15.057a25 25 0 0 0 33.817-10.312 25 25 0 0 0-10.313-33.819c-16.979-9.042-34.844-15.232-52.66-19.531a25 25 0 0 0-9.748-.395M107.334 145.42a25 25 0 0 0-24.295 25.685c.53 19.03 3.845 37.498 8.832 55.06l.045.151.088.303a25 25 0 0 0 30.986 17.024 25 25 0 0 0 17.024-30.989l-.045-.15-.01-.037c-4.05-14.271-6.548-28.663-6.94-42.752a25 25 0 0 0-25.685-24.295zm385.73 3.521a25 25 0 0 0-26.195 23.745c-.7 14.263-3.477 28.763-7.8 43.09a25 25 0 0 0 16.71 31.158 25 25 0 0 0 31.157-16.713c5.3-17.567 8.938-36.037 9.873-55.084a25 25 0 0 0-23.745-26.196M193.774 324.48a25 25 0 0 0-8.682.039 25 25 0 0 0-11.705 5.523 25 25 0 0 0-2.918 35.234c11.308 13.351 23.245 26.099 35.68 38.266a25 25 0 0 0 35.351-.383 25 25 0 0 0-.383-35.353c-11.39-11.145-22.258-22.758-32.494-34.844a25 25 0 0 0-14.85-8.482m210.353 2.636a25 25 0 0 0-14.908 8.377c-10.33 12.023-21.277 23.573-32.737 34.649a25 25 0 0 0-.603 35.35 25 25 0 0 0 35.35.603c12.508-12.089 24.52-24.756 35.914-38.016a25 25 0 0 0-2.67-35.256 25 25 0 0 0-11.664-5.605 25 25 0 0 0-8.682-.102m-61.328 125.031a25 25 0 0 0-21.98 11.91 25 25 0 0 0 8.224 34.385 804 804 0 0 0 44.826 25.55 25 25 0 0 0 33.787-10.415 25 25 0 0 0-10.412-33.787c-14.284-7.553-28.315-15.53-42.039-23.957a25 25 0 0 0-12.406-3.686m-88.475 1.823a25 25 0 0 0-12.422 3.629 753 753 0 0 1-42.144 23.765 25 25 0 0 0-10.574 33.739 25 25 0 0 0 33.738 10.572 803 803 0 0 0 44.943-25.348 25 25 0 0 0 8.385-34.346 25 25 0 0 0-21.926-12.011m270.647 81.006a25 25 0 0 0-6.506.513 25 25 0 0 0-18.576 16.729 25 25 0 0 0 16.054 31.5 959 959 0 0 0 49.23 14.537 25 25 0 0 0 30.597-17.717 25 25 0 0 0-17.717-30.596 909 909 0 0 1-46.664-13.777 25 25 0 0 0-6.418-1.19m-453.182 1.072a25 25 0 0 0-6.422 1.164 923 923 0 0 1-46.732 13.613 25 25 0 0 0-17.81 30.541 25 25 0 0 0 30.54 17.81 973 973 0 0 0 49.266-14.35 25 25 0 0 0 16.176-31.438 25 25 0 0 0-18.514-16.803 25 25 0 0 0-6.504-.537"/>
+</svg>

styleguide/assets/icon/paperplane.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="500">
+    <path d="M535.018.094a62.1 62.1 0 0 0-21.815 4.885L40.133 205.717c-48.038 20.384-52.852 90-8.076 116.8l39.984 23.934a25 25 0 0 0 34.291-8.611 25 25 0 0 0-8.611-34.291l-39.985-23.934c-12.309-7.367-11.28-22.267 1.926-27.87L532.734 51.007c5.133-2.178 10.814-.833 14.424 3.416s4.022 10.072 1.043 14.785L346.838 387.883c-16.664 26.371-50.638 34.466-77.404 18.445l-4.643-2.78a25 25 0 0 0-34.291 8.612 25 25 0 0 0 8.611 34.291l4.645 2.78c49.586 29.68 114.48 14.215 145.35-34.64L590.468 95.919c14.549-23.025 12.428-53.113-5.207-73.87C574.24 9.077 558.64 1.497 542.372.233a63 63 0 0 0-7.354-.138M396.455 142.82a25 25 0 0 0-11.898 5.088l-211.47 166.139c-30.343 23.84-48.087 60.34-48.087 98.93V475a25 25 0 0 0 25 25 25 25 0 0 0 25.002-25v-62.023a75.75 75.75 0 0 1 28.975-59.612l211.468-166.138a25 25 0 0 0 4.215-35.104 25 25 0 0 0-23.205-9.303"/>
+</svg>

styleguide/assets/image/doodle_example_1.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="3000"
+   height="1200"
+   viewBox="0 0 3000 1200"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs" /><g
+     id="layer"><path
+       style="fill:none;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50, 150;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+       d="m 25.000002,1175.0001 c 650.000048,0 1550.000098,-1150.000113 875.000068,-1150.000113 -725.00006,0 -103.84433,976.922213 250.00003,800.000063 200,-100.00001 323.8192,-463.50213 550,-400.00003 361.6858,101.54621 325.0001,675.00008 650.0001,325.00002"
+       id="path123-1" /><path
+       d="m 2787.4987,171.54852 a 62.1,62.1 0 0 0 -21.815,4.885 l -473.07,200.738 c -48.038,20.384 -52.852,90 -8.076,116.8 l 39.984,23.934 a 25,25 0 0 0 34.291,-8.611 25,25 0 0 0 -8.611,-34.291 l -39.985,-23.934 c -12.309,-7.367 -11.28,-22.267 1.926,-27.87 l 473.072,-200.738 c 5.133,-2.178 10.814,-0.833 14.424,3.416 3.61,4.249 4.022,10.072 1.043,14.785 l -201.363,318.675 c -16.664,26.371 -50.638,34.466 -77.404,18.445 l -4.643,-2.78 a 25,25 0 0 0 -34.291,8.612 25,25 0 0 0 8.611,34.291 l 4.645,2.78 c 49.586,29.68 114.48,14.215 145.35,-34.64 l 201.362,-318.672 c 14.549,-23.025 12.428,-53.113 -5.207,-73.87 -11.021,-12.972 -26.621,-20.552 -42.889,-21.816 a 63,63 0 0 0 -7.354,-0.138 m -138.563,142.725 a 25,25 0 0 0 -11.898,5.088 l -211.47,166.139 c -30.343,23.84 -48.087,60.34 -48.087,98.93 v 62.023 a 25,25 0 0 0 25,25 25,25 0 0 0 25.002,-25 v -62.023 a 75.75,75.75 0 0 1 28.975,-59.612 l 211.468,-166.138 a 25,25 0 0 0 4.215,-35.104 25,25 0 0 0 -23.205,-9.303"
+       id="path1" /></g></svg>

styleguide/assets/image/doodle_example_3.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="800"
+   height="4500"
+   viewBox="0 0 800 4500"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs" /><g
+     id="layer"><path
+       style="fill:none;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50, 150;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+       d="M 700.00005,4400.0003 C -350.00002,3325.0004 900.00007,2600.0002 575,1900.0002 249.99993,1200.0002 225.00004,1425.0001 375.00003,925.00006"
+       id="path123-1" /><path
+       d="m 564.77596,150.58167 c -16.08962,-3.9189 -33.41023,-2.77531 -49.36167,4.05482 l -22.97968,9.84143 a 189.67,189.67 0 0 0 -94.66759,88.90232 l -4.68819,9.29661 a 221.3,221.3 0 0 0 -23.25236,85.26529 l -6.81434,104.40293 a 25,25 0 0 0 23.31863,26.57414 25,25 0 0 0 26.57317,-23.31886 l 6.81337,-104.40317 a 171.3,171.3 0 0 1 17.99889,-65.99515 l 4.69447,-9.30126 a 139.63,139.63 0 0 1 69.70729,-65.46541 l 22.97969,-9.84144 c 11.67806,-5.00044 24.96365,-1.76451 33.03424,8.04604 l 28.5894,34.75484 a 83.1,83.1 0 0 1 18.91145,54.49322 l -0.7116,35.23957 a 173.1,173.1 0 0 1 -14.92108,66.87243 l -24.29891,54.59032 0.61606,-1.27852 a 111.98,111.98 0 0 0 -7.66741,83.51472 25,25 0 0 0 0.44572,1.34776 321.4,321.4 0 0 1 19.37694,107.98068 l 0.0167,3.07943 a 83.47,83.47 0 0 1 -19.64816,54.31715 l -7.93148,9.41136 c -3.59718,4.26796 -7.18042,3.3952 -8.41207,-2.0489 l -2.71527,-12.00455 -0.006,-0.0169 a 540,540 0 0 1 -11.52439,-74.46952 l -0.004,-0.0247 c -2.86871,-34.42258 -27.60449,-63.35508 -61.16728,-71.52986 l -19.22885,-4.68351 c -33.22676,-8.39656 -68.33959,5.51212 -86.81272,34.37945 l -0.11219,0.17749 a 547,547 0 0 1 -44.99501,61.64398 l -7.92879,9.41304 c -3.59719,4.26796 -7.18043,3.39521 -8.41208,-2.0489 l -2.71503,-12.00552 a 83.47,83.47 0 0 1 7.53043,-57.26863 l 29.35001,-55.83535 a 25,25 0 0 0 -10.50686,-33.76141 25,25 0 0 0 -33.76075,10.4957 l -29.34272,55.83918 a 133.52,133.52 0 0 0 -12.03814,91.56713 l 2.71619,11.99654 c 9.6453,42.63147 67.24245,56.66022 95.41163,23.2391 l 7.92764,-9.40406 a 597,597 0 0 0 49.10413,-67.28273 l -0.11311,0.1855 c 6.97581,-10.90082 19.90078,-16.01748 32.4477,-12.8462 l 19.64468,4.7848 c 12.84644,3.12896 22.07873,13.92956 23.17343,27.10691 l 0.006,0.0169 a 590,590 0 0 0 12.58849,81.38269 l 2.71294,11.98031 c 9.64554,42.63051 67.24268,56.65926 95.41261,23.23934 l 7.9269,-9.40526 a 133.52,133.52 0 0 0 31.41929,-86.84549 l -0.0172,-3.08161 c -0.25602,-42.13955 -7.71037,-83.91626 -21.98437,-123.55922 a 61.92,61.92 0 0 1 4.27762,-46.08576 25,25 0 0 0 0.61532,-1.27973 l 24.29868,-54.58935 a 223.1,223.1 0 0 0 19.23217,-86.1992 l 0.70874,-35.23203 A 133.16,133.16 0 0 0 635.3325,211.62774 l -28.5913,-34.74706 c -11.02296,-13.4002 -25.87867,-22.38087 -41.96829,-26.29976 m -29.82935,122.41817 a 25,25 0 0 0 -30.2061,18.37368 25,25 0 0 0 18.37368,30.20609 c 13.70338,3.33769 21.71113,16.50369 18.37368,30.20609 -3.33745,13.70241 -16.50271,21.71137 -30.2061,18.37368 -13.70338,-3.33769 -21.71112,-16.50368 -18.37367,-30.20609 a 25,25 0 0 0 -18.37368,-30.20609 25,25 0 0 0 -30.20609,18.37367 c -9.73216,39.95686 15.16417,80.88612 55.12103,90.61828 39.95686,9.73216 80.88611,-15.16417 90.61828,-55.12103 9.73216,-39.95686 -15.1632,-80.88588 -55.12103,-90.61828 M 449.60415,623.3729 a 25,25 0 0 0 -30.2061,18.37368 l -15.13768,62.15004 a 25,25 0 0 0 18.37368,30.20609 25,25 0 0 0 30.20609,-18.37367 l 15.13768,-62.15005 A 25,25 0 0 0 449.60415,623.3729"
+       style="stroke-width:3.77952"
+       id="path1" /></g></svg>

styleguide/assets/style/base.css

@@ -54,6 +54,17 @@
   --color-red-800: #780404;
   --color-red-900: #5c0202;
   --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
   --color-white: #ffffff;
   --color-dark-foreground: var(--color-neutral-50);
   --color-dark-background: var(--color-neutral-950);
@@ -69,6 +80,7 @@
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
   --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
   --color-dark-accent-1: #60a5f9;
   --color-dark-accent-2: #d381f7;
   --color-dark-accent-3: #ff7975;
@@ -86,6 +98,7 @@
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
   --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
   --color-light-accent-1: #303ec0;
   --color-light-accent-2: #6c366c;
   --color-light-accent-3: #932f0a;
@@ -137,6 +150,7 @@
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
   --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
@@ -185,6 +199,7 @@
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
   --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
@@ -226,6 +241,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -275,6 +291,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -321,6 +338,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -362,6 +380,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -564,7 +583,7 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }

styleguide/assets/style/base.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiGF;EA7FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EA+DF;IA9DI;;;AAUF;EACE;;AAGF;EACE;;;AAmDJ;EA9CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAtGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwEA;IAvEE;;;AAsEJ;EA5DE;IACE;;EAGF;IACE;;EA2DA;IAtDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAhEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAtHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwFE;IAvFA;;;AAmFJ;EAzEE;IACE;;EAGF;IACE;;EA4EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAtfuB;EAufvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmGF;EA/FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EAgEF;IA/DI;;;AAUF;EACE;;AAGF;EACE;;;AAoDJ;EA/CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAxGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAyEA;IAxEE;;;AAuEJ;EA7DE;IACE;;EAGF;IACE;;EA4DA;IAvDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAjEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAxHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAyFE;IAxFA;;;AAoFJ;EA1EE;IACE;;EAGF;IACE;;EA6EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KArgBuB;EAsgBvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}

styleguide/assets/style/base.scss

@@ -63,6 +63,17 @@ $mobile-navigation-height: 4rem;
   --color-red-800: #780404;
   --color-red-900: #5c0202;
   --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
 
   --color-white: #ffffff;
 
@@ -80,6 +91,7 @@ $mobile-navigation-height: 4rem;
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
   --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
   --color-dark-accent-1: #60a5f9;
   --color-dark-accent-2: #d381f7;
   --color-dark-accent-3: #ff7975;
@@ -98,6 +110,7 @@ $mobile-navigation-height: 4rem;
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
   --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
   --color-light-accent-1: #303ec0;
   --color-light-accent-2: #6c366c;
   --color-light-accent-3: #932f0a;
@@ -153,6 +166,7 @@ $mobile-navigation-height: 4rem;
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
   --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
@@ -204,6 +218,7 @@ $mobile-navigation-height: 4rem;
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
   --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
@@ -450,7 +465,7 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }

styleguide/assets/style/icons.css

@@ -121,6 +121,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
   mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
   mask-image: url("../icon/menu.svg");
 }
@@ -139,6 +142,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
   mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
   mask-image: url("../icon/pen.svg");
 }

styleguide/assets/style/icons.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA6DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}
+{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA+DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}

styleguide/assets/style/icons.scss

@@ -34,12 +34,14 @@ $icons: (
   "lock",
   "login",
   "logout",
+  "looping",
   "menu",
   "menu_small",
   "merch",
   "message",
   "microphone",
   "network",
+  "paperplane",
   "pen",
   "plate_and_cutlery",
   "power",

styleguide/assets/style/merch.css

@@ -54,6 +54,17 @@
   --color-red-800: #780404;
   --color-red-900: #5c0202;
   --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
   --color-white: #ffffff;
   --color-dark-foreground: var(--color-neutral-50);
   --color-dark-background: var(--color-neutral-950);
@@ -69,6 +80,7 @@
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
   --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
   --color-dark-accent-1: #60a5f9;
   --color-dark-accent-2: #d381f7;
   --color-dark-accent-3: #ff7975;
@@ -86,6 +98,7 @@
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
   --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
   --color-light-accent-1: #303ec0;
   --color-light-accent-2: #6c366c;
   --color-light-accent-3: #932f0a;
@@ -137,6 +150,7 @@
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
   --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
@@ -185,6 +199,7 @@
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
   --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
@@ -226,6 +241,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -275,6 +291,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -321,6 +338,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -362,6 +380,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -564,7 +583,7 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
@@ -804,6 +823,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
   mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
   mask-image: url("../icon/menu.svg");
 }
@@ -822,6 +844,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
   mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
   mask-image: url("../icon/pen.svg");
 }
@@ -1083,6 +1108,7 @@ body > div main {
   max-width: min(var(--container-4xl), 100vw);
   width: 100%;
   padding: 0 1rem;
+  overflow-x: hidden;
 }
 @media (min-width: 48rem) {
   body > div main {
@@ -1238,13 +1264,14 @@ main > div.generator i {
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;
 }
 .swatch-grid section {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
   margin-top: 2rem;
+  --swatch-size: 5rem;
 }
 .swatch-grid section > span {
   width: 100%;
@@ -1253,17 +1280,17 @@ main > div.generator i {
 .swatch-grid section .swatch-container {
   display: inline-flex;
   flex-direction: column;
-  align-items: end;
+  align-items: center;
   gap: 0.25rem;
   background-color: var(--color-background);
-  border-radius: 1rem;
-  padding: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.25rem;
   border: 0.125rem solid var(--color-foreground);
 }
 .swatch-grid section .swatch-container .swatch {
   background-color: var(--swatch-color);
-  width: 8rem;
-  height: 8rem;
+  width: var(--swatch-size);
+  aspect-ratio: 1;
   border-radius: 0.5rem;
 }
 .swatch-grid section .swatch-container span {

styleguide/assets/style/styleguide.css

@@ -54,6 +54,17 @@
   --color-red-800: #780404;
   --color-red-900: #5c0202;
   --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
   --color-white: #ffffff;
   --color-dark-foreground: var(--color-neutral-50);
   --color-dark-background: var(--color-neutral-950);
@@ -69,6 +80,7 @@
   --color-dark-secondary: var(--color-krypton-300);
   --color-dark-error: var(--color-red-500);
   --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
   --color-dark-accent-1: #60a5f9;
   --color-dark-accent-2: #d381f7;
   --color-dark-accent-3: #ff7975;
@@ -86,6 +98,7 @@
   --color-light-secondary: var(--color-krypton-500);
   --color-light-error: var(--color-red-600);
   --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
   --color-light-accent-1: #303ec0;
   --color-light-accent-2: #6c366c;
   --color-light-accent-3: #932f0a;
@@ -137,6 +150,7 @@
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
   --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
   --color-accent-1: var(--color-dark-accent-1);
   --color-accent-2: var(--color-dark-accent-2);
   --color-accent-3: var(--color-dark-accent-3);
@@ -185,6 +199,7 @@
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
   --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
@@ -226,6 +241,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -275,6 +291,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -321,6 +338,7 @@
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
     --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
     --color-accent-1: var(--color-light-accent-1);
     --color-accent-2: var(--color-light-accent-2);
     --color-accent-3: var(--color-light-accent-3);
@@ -362,6 +380,7 @@
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
     --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
     --color-accent-1: var(--color-dark-accent-1);
     --color-accent-2: var(--color-dark-accent-2);
     --color-accent-3: var(--color-dark-accent-3);
@@ -564,7 +583,7 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
@@ -804,6 +823,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
   mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
   mask-image: url("../icon/menu.svg");
 }
@@ -822,6 +844,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
   mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
   mask-image: url("../icon/pen.svg");
 }
@@ -1083,6 +1108,7 @@ body > div main {
   max-width: min(var(--container-4xl), 100vw);
   width: 100%;
   padding: 0 1rem;
+  overflow-x: hidden;
 }
 @media (min-width: 48rem) {
   body > div main {
@@ -1238,13 +1264,14 @@ main > div.generator i {
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;
 }
 .swatch-grid section {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
   margin-top: 2rem;
+  --swatch-size: 5rem;
 }
 .swatch-grid section > span {
   width: 100%;
@@ -1253,17 +1280,17 @@ main > div.generator i {
 .swatch-grid section .swatch-container {
   display: inline-flex;
   flex-direction: column;
-  align-items: end;
+  align-items: center;
   gap: 0.25rem;
   background-color: var(--color-background);
-  border-radius: 1rem;
-  padding: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.25rem;
   border: 0.125rem solid var(--color-foreground);
 }
 .swatch-grid section .swatch-container .swatch {
   background-color: var(--swatch-color);
-  width: 8rem;
-  height: 8rem;
+  width: var(--swatch-size);
+  aspect-ratio: 1;
   border-radius: 0.5rem;
 }
 .swatch-grid section .swatch-container span {

styleguide/assets/style/styleguide.scss

@@ -241,6 +241,7 @@ body {
       max-width: min(var(--container-4xl), 100vw);
       width: 100%;
       padding: 0 1rem;
+      overflow-x: hidden;
 
       @media (min-width: $breakpoint-mobile) {
         padding-left: 2rem;
@@ -427,13 +428,14 @@ main > div.generator {
 .swatch-grid {
   background-color: var(--color-background);
   color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;
 
   section {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-top: 2rem;
+    --swatch-size: 5rem;
 
     & > span {
       width: 100%;
@@ -443,17 +445,17 @@ main > div.generator {
     .swatch-container {
       display: inline-flex;
       flex-direction: column;
-      align-items: end;
+      align-items: center;
       gap: 0.25rem;
       background-color: var(--color-background);
-      border-radius: 1rem;
-      padding: 0.5rem;
+      border-radius: 0.75rem;
+      padding: 0.25rem;
       border: 0.125rem solid var(--color-foreground);
 
       .swatch {
         background-color: var(--swatch-color);
-        width: 8rem;
-        height: 8rem;
+        width: var(--swatch-size);
+        aspect-ratio: 1;
         border-radius: 0.5rem;
       }