Styleguide Update 1

2025-04-05 23:50:54 +02:00 · 2025-04-05 23:50:54 +02:00 · 9e177678ac
commit 9e177678ac
parent 844a3bc36e
28 changed files with 699 additions and 77 deletions
--- a/styleguide/assets/style/base.css
+++ b/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;
 }
--- a/styleguide/assets/style/base.css.map
+++ b/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"}
--- a/styleguide/assets/style/base.scss
+++ b/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;
 }
--- a/styleguide/assets/style/icons.css
+++ b/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");
 }
--- a/styleguide/assets/style/icons.css.map
+++ b/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"}
--- a/styleguide/assets/style/icons.scss
+++ b/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",
--- a/styleguide/assets/style/merch.css
+++ b/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 {
--- a/styleguide/assets/style/merch.css.map
+++ b/styleguide/assets/style/merch.css.map
--- a/styleguide/assets/style/styleguide.css
+++ b/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 {
--- a/styleguide/assets/style/styleguide.css.map
+++ b/styleguide/assets/style/styleguide.css.map
--- a/styleguide/assets/style/styleguide.scss
+++ b/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;
      }