From 93fdf66b0a81fb96ded3d07fc485716802abbc4d Mon Sep 17 00:00:00 2001 From: kritzl Date: Sat, 5 Apr 2025 23:50:54 +0200 Subject: [PATCH] Styleguide Update 1 --- styleguide/assets/icon/fairydust.svg | 2 +- styleguide/assets/icon/looping.svg | 3 + styleguide/assets/icon/paperplane.svg | 3 + styleguide/assets/image/doodle_example_1.svg | 17 ++ styleguide/assets/image/doodle_example_2.svg | 18 ++ styleguide/assets/image/doodle_example_3.svg | 18 ++ styleguide/assets/style/base.css | 21 +- styleguide/assets/style/base.css.map | 2 +- styleguide/assets/style/base.scss | 17 +- styleguide/assets/style/icons.css | 6 + styleguide/assets/style/icons.css.map | 2 +- styleguide/assets/style/icons.scss | 2 + styleguide/assets/style/merch.css | 41 +++- styleguide/assets/style/merch.css.map | 2 +- styleguide/assets/style/styleguide.css | 41 +++- styleguide/assets/style/styleguide.css.map | 2 +- styleguide/assets/style/styleguide.scss | 14 +- styleguide/changelog/index.html | 142 +++++++++++++ styleguide/colors/index.html | 37 +++- styleguide/demopage/index.html | 6 + styleguide/doodles/index.html | 211 +++++++++++++++++++ styleguide/generator/index.html | 6 + styleguide/glow/index.html | 127 +++++++---- styleguide/iconography/index.html | 6 + styleguide/iconography/list/index.html | 6 + styleguide/index.html | 6 + styleguide/logo/index.html | 6 + styleguide/typography/index.html | 6 + 28 files changed, 696 insertions(+), 74 deletions(-) create mode 100644 styleguide/assets/icon/looping.svg create mode 100644 styleguide/assets/icon/paperplane.svg create mode 100644 styleguide/assets/image/doodle_example_1.svg create mode 100644 styleguide/assets/image/doodle_example_2.svg create mode 100644 styleguide/assets/image/doodle_example_3.svg create mode 100644 styleguide/changelog/index.html create mode 100644 styleguide/doodles/index.html diff --git a/styleguide/assets/icon/fairydust.svg b/styleguide/assets/icon/fairydust.svg index e847437..3b71971 100644 --- a/styleguide/assets/icon/fairydust.svg +++ b/styleguide/assets/icon/fairydust.svg @@ -1,3 +1,3 @@ - + diff --git a/styleguide/assets/icon/looping.svg b/styleguide/assets/icon/looping.svg new file mode 100644 index 0000000..b342502 --- /dev/null +++ b/styleguide/assets/icon/looping.svg @@ -0,0 +1,3 @@ + + + diff --git a/styleguide/assets/icon/paperplane.svg b/styleguide/assets/icon/paperplane.svg new file mode 100644 index 0000000..1ab4e0e --- /dev/null +++ b/styleguide/assets/icon/paperplane.svg @@ -0,0 +1,3 @@ + + + diff --git a/styleguide/assets/image/doodle_example_1.svg b/styleguide/assets/image/doodle_example_1.svg new file mode 100644 index 0000000..a70d061 --- /dev/null +++ b/styleguide/assets/image/doodle_example_1.svg @@ -0,0 +1,17 @@ + + diff --git a/styleguide/assets/image/doodle_example_2.svg b/styleguide/assets/image/doodle_example_2.svg new file mode 100644 index 0000000..a5d3c7b --- /dev/null +++ b/styleguide/assets/image/doodle_example_2.svg @@ -0,0 +1,18 @@ + + diff --git a/styleguide/assets/image/doodle_example_3.svg b/styleguide/assets/image/doodle_example_3.svg new file mode 100644 index 0000000..ab16421 --- /dev/null +++ b/styleguide/assets/image/doodle_example_3.svg @@ -0,0 +1,18 @@ + + diff --git a/styleguide/assets/style/base.css b/styleguide/assets/style/base.css index b93175e..4da9b4f 100644 --- 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; } diff --git a/styleguide/assets/style/base.css.map b/styleguide/assets/style/base.css.map index 979737a..5d3e13e 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/styleguide/assets/style/base.scss b/styleguide/assets/style/base.scss index f21d72b..ef92663 100644 --- 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; } diff --git a/styleguide/assets/style/icons.css b/styleguide/assets/style/icons.css index 85434aa..5fac8d5 100644 --- 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"); } diff --git a/styleguide/assets/style/icons.css.map b/styleguide/assets/style/icons.css.map index 7feeab7..7c7adfa 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/styleguide/assets/style/icons.scss b/styleguide/assets/style/icons.scss index b155139..96f31d4 100644 --- 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", diff --git a/styleguide/assets/style/merch.css b/styleguide/assets/style/merch.css index dddf994..7bb604b 100644 --- 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%; @@ -1256,14 +1283,14 @@ main > div.generator i { align-items: end; 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 { diff --git a/styleguide/assets/style/merch.css.map b/styleguide/assets/style/merch.css.map index 6e5e59d..9092ab0 100644 --- a/styleguide/assets/style/merch.css.map +++ b/styleguide/assets/style/merch.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss","merch.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;;;ACtgBA;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;;;AChFN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFrEqB;EEsErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EAEE;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;;;AAIA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC/jBF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"merch.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.scss","merch.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;;;ACnhBA;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;;;AClFN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFrEqB;EEsErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EAEE;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;IACA;;;;AAMR;EACE;;;AAIA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjkBF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"merch.css"} \ No newline at end of file diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css index 40f70b0..f47a08a 100644 --- 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%; @@ -1256,14 +1283,14 @@ main > div.generator i { align-items: end; 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 { diff --git a/styleguide/assets/style/styleguide.css.map b/styleguide/assets/style/styleguide.css.map index 1019593..0c17df3 100644 --- a/styleguide/assets/style/styleguide.css.map +++ b/styleguide/assets/style/styleguide.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.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;;;ACtgBA;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;;;AChFN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFrEqB;EEsErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EAEE;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;;AAMR;EACE;;;AAIA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["base.scss","icons.scss","styleguide.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;;;ACnhBA;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;;;AClFN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI,YFhBqB;;;AEmBvB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QFrEqB;EEsErB;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EA1BF;IA2BI;;EAGE;IACE;;EAIJ;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAKA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EAEE;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAIJ;EACE;EACA;;AAEA;EAIE;;AAON;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;IACA;;;;AAMR;EACE;;;AAIA;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"} \ No newline at end of file diff --git a/styleguide/assets/style/styleguide.scss b/styleguide/assets/style/styleguide.scss index 02fc119..39196ca 100644 --- 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%; @@ -446,14 +448,14 @@ main > div.generator { align-items: end; 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; } diff --git a/styleguide/changelog/index.html b/styleguide/changelog/index.html new file mode 100644 index 0000000..b7f7afb --- /dev/null +++ b/styleguide/changelog/index.html @@ -0,0 +1,142 @@ + + + + + + + + + Changelog + + + +
+ + Logo of Easterhegg 2025. In the style of a neon sign: + The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. + +
+
+ +
+

Changelog

+

+ Here you can see the list of changes we have made to the style guide + since the initial release: +

+
    +
  • + 2025-04-05 - Update 1 +
      +
    • + New pages: Doodles, + Changelog +
      • +
    • The page about glow is no longer WIP
      • +
    • New Color: warning
      • +
    • New Icons: paperplane looping
      • +
    • Updated icon: fairydust
      • +
    • + Typography: update border color of <code> +
      • +
    +
    • +
  • +

    2025-03-05 - Initial release

    +
    • +
+
+
+ + + diff --git a/styleguide/colors/index.html b/styleguide/colors/index.html index ca206bc..64fb167 100644 --- a/styleguide/colors/index.html +++ b/styleguide/colors/index.html @@ -69,6 +69,9 @@
  • Glow
    • +
  • + Doodles +
  • Demopage
    • @@ -77,6 +80,9 @@ >Image Generator +
  • + Changelog +
  • - Error & Success + Status indicators
    #54aa18 + +
    +
    + #efb100 +
    @@ -542,7 +559,7 @@
    - Error & Success + Status indicators
    #47990f + +
    +
    + #d08700 +
    @@ -612,7 +640,10 @@

    -
    +
    CMYK Colors
    • +
  • + Doodles +
  • Demopage
    • @@ -77,6 +80,9 @@ >Image Generator +
  • + Changelog +
  • + + + + + + + + Doodles + + + +
    + + Logo of Easterhegg 2025. In the style of a neon sign: + The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. + The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink. + Logo of Easterhegg 2025. In the style of a unpowered neon sign: + The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg. + The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink. + +
    +
    + +
    +

    Doodles

    +

    + To add a bit of variety to the design or as part of a page's + background, we designed a few doodles which can be used to fill some + space. These consist of an icon (preferably of something that can + move) and a dashed line behind it, which shows the path travelled. The + line has rounded ends and a line-to-space ratio of 1:3 (the lines will appear longer due to the line caps), where 1 is the + line thickness. Here are some examples: +

    +
    + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html index 66f59dc..d373493 100644 --- a/styleguide/generator/index.html +++ b/styleguide/generator/index.html @@ -69,12 +69,18 @@
  • Glow
    • +
  • + Doodles +
  • Demopage
  • Image Generator
    • +
  • + Changelog +
  • Glow
    • +
  • + Doodles +
  • Demopage
    • @@ -77,6 +80,9 @@ >Image Generator +
  • + Changelog +

  • Glow

    -
    - -

    - Work in progress - This page is still under development.
    - Not all resources may be available yet, explanations and examples - may be missing and things may change without notice. -

    -

    Darkmode

    To add the glow to something of a given height (or fontsize), here @@ -147,22 +144,42 @@

  • For SVG filters instead use the following two filters: 
    
+<!-- this code assumes a font-size of 520 -->
+
 <filter x="-150%" y="-150%" width="400%" height="400%"
-   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
-  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
-     style="flood-color: var(--color-white);" result="drop_shadow_0" />
-  <feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
-     style="flood-color: var(--color-primary);" result="drop_shadow_1" />
-  <feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
-     style="flood-color: var(--color-primary);" result="drop_shadow_2" />
+   color-interpolation-filters="sRGB" id="textBlurPrimary" >
+  <feGaussianBlur in="SourceGraphic" stdDeviation="16.25" />
+  <feOffset dx="0" dy="0" result="offsetblur" />
+  <feFlood flood-color="#ffffff" flood-opacity="1" /> <!-- color-white -->
+  <feComposite in2="offsetblur" operator="in" />
+  <feMerge result="drop_shadow_0" >
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic" />
+  </feMerge>
+
+  <feGaussianBlur in="drop_shadow_0" stdDeviation="32.5" />
+  <feOffset dx="0" dy="0" result="offsetblur" />
+  <feFlood flood-color="#c6257d" flood-opacity="1" /> <!-- color-primary -->
+  <feComposite in2="offsetblur" operator="in" />
+  <feMerge result="drop_shadow_1" >
+    <feMergeNode/>
+    <feMergeNode in="drop_shadow_0" />
+  </feMerge>
+
+  <feGaussianBlur in="drop_shadow_1" stdDeviation="65" />
+  <feOffset dx="0" dy="0" result="offsetblur" />
+  <feFlood flood-color="#c6257d" flood-opacity="1" /> <!-- color-primary -->
+  <feComposite in2="offsetblur" operator="in" />
+  <feMerge result="drop_shadow_2" >
+    <feMergeNode/>
+    <feMergeNode in="drop_shadow_1" />
+  </feMerge>
 </filter>
 
 <filter x="-150%" y="-150%" width="400%" height="400%"
-   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
-  <feFlood style="flood-color: var(--color-white);" result="flood-white"
-     />
-  <feFlood style="flood-color: var(--color-primary);"
-     result="flood-glow-color" />
+   color-interpolation-filters="sRGB" id="textInsetPrimary" >
+  <feFlood flood-color="#ffffff" result="flood-white" /> <!-- color-white -->
+  <feFlood flood-color="#c6257d" result="flood-glow-color" /> <!-- color-primary -->
 
   <feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
      result="flooded" />
@@ -177,13 +194,6 @@
     <feMergeNode in="inset_shadow" />
   </feMerge>
 </filter>
    - We use two separate filters here, because when combining shadows - with the primary and the secondary color as can be seen in the logo, - it is necessary to first add all drop-shadows to all paths using - style="mix-blend-mode: screen;" and then layer all - inset-shadow filters ontop of that. Otherwise one path's drop-shadow - could layer over another path's inset-shadow. Have a look at the - logo's source for an example.
    • @@ -216,22 +226,31 @@
  • For SVG filters instead use the following two filters: 
    
+<!-- this code assumes a font-size of 520 -->
+
 <filter x="-25%" y="-150%" width="150%" height="400%"
-   style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
-  <feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
-     style="flood-color: var(--color-argon-950);" result="drop_shadow_0" />
+   color-interpolation-filters="sRGB" id="textBlurPrimary" >
+  <feGaussianBlur in="SourceGraphic" stdDeviation="16.25" />
+  <feOffset dx="0" dy="0" result="offsetblur" />
+  <feFlood flood-color="#3f012d" flood-opacity="1" /> <!-- color-argon-950 -->
+  <feComposite in2="offsetblur" operator="in" />
+  <feMerge result="drop_shadow_0" >
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic" />
+  </feMerge>
 </filter>
 
 <filter x="-25%" y="-150%" width="150%" height="400%"
-   style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
-  <feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
-     />
-  <feFlood style="flood-color: var(--color-argon-800);"
-     result="flood_darker" />
+   color-interpolation-filters="sRGB" id="textInsetPrimary" >
+  <feFlood flood-color="#c6257d" result="flood_brighter" /> <!-- color-primary -->
+  <feFlood flood-color="#3f012d" result="flood_darker" /> <!-- color-argon-950 -->
 
   <feComposite in="flood_darker" in2="SourceAlpha" operator="in"
      result="flooded" />
-  <feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+  <feComponentTransfer in="SourceAlpha" result="reduced_alpha" >
+    <feFuncA type="table" tableValues="0 0.5" />
+  </feComponentTransfer>
+  <feGaussianBlur in="reduced_alpha" stdDeviation="16.25"
      result="inset_drop_shadow" />
   <feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
      result="inset_drop_shadow_brighter" />
@@ -242,15 +261,35 @@
     <feMergeNode in="inset_shadow" />
   </feMerge>
 </filter>
    - We use two separate filters here, because when combining shadows - with the primary and the secondary color as can be seen in the logo, - it is necessary to first add all drop-shadows to all paths using - style="mix-blend-mode: screen;" and then layer all - inset-shadow filters ontop of that. Otherwise one path's drop-shadow - could layer over another path's inset-shadow. Have a look at the - logo's source for an example.
    • + +

    Notes

    +

    + In the SVG files we use two separate filters, because when combining + shadows with the primary and the secondary color as can be seen in the + logo, it is necessary to first add all drop-shadows to all paths using + style="mix-blend-mode: screen;" and put them in an + isolated group, so that the blend mode does not interfere with the + background:
    + <g style="isolation: isolate;">
    + Then layer all inset-shadow filters on top of that - otherwise, one + path's drop shadow might overlay another path's inset-shadow. Have a + look at the + logo's source + for an example. +

    +

    + Since inkscape, for example, cannot handle the ‘feDropShadow’ filter + yet, we use it in its long form as a combination of 5 other filters, + as described in the + SVG Filter Effects Module Level 1 (Working Draft). +