diff --git a/source/_data/data.json b/source/_data/data.json
index f81391c7d6d6cfb6503b457612a09f1aec157f70..e6877d613952b16d5474e9cb808b67719dc0e93d 100755
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -92,5 +92,69 @@
"long": "20",
"short": "20"
},
- "seconds": "31"
+ "seconds": "31",
+ "greyColors": [
+ {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
+ {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
+ {"cls": "grey-125", "hex": "#f0f0f0", "name": "Grey 125"},
+ {"cls": "grey-200", "hex": "#adadad", "name": "Grey 200"},
+ {"cls": "grey-300", "hex": "#4c4c4c", "name": "Grey 300"},
+ {"cls": "grey-400", "hex": "#343434", "name": "Grey 400"},
+ {"cls": "grey-500", "hex": "#303132", "name": "Grey 500"},
+ {"cls": "grey-600", "hex": "#262626", "name": "Grey 600"},
+ {"cls": "grey-700", "hex": "#202020", "name": "Grey 700"},
+ {"cls": "grey-800", "hex": "#1f1f1f", "name": "Grey 800"}
+ ],
+ "brandColors": [
+ {
+ "name": "Primary",
+ "variants": [
+ {"cls": "black", "name": "Black", "hex": "#000000"},
+ {"cls": "white", "name": "White", "hex": "#ffffff"}
+ ]
+ },
+ {
+ "name": "Green",
+ "variants": [
+ {"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
+ {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
+ ]
+ },
+ {
+ "name": "Blue",
+ "variants": [
+ {"cls": "blue-100", "name": "Blue 100", "hex": "#abcdef"},
+ {"cls": "blue-200", "name": "Blue 200", "hex": "#76b4cf"},
+ {"cls": "blue-300", "name": "Blue 300", "hex": "#027da8"}
+ ]
+ },
+ {
+ "name": "Cyan",
+ "variants": [
+ {"cls": "cyan-100", "name": "Cyan 100", "hex": "#a7d4d1"},
+ {"cls": "cyan-200", "name": "Cyan 200", "hex": "#57b3bd"},
+ {"cls": "cyan-300", "name": "Cyan 300", "hex": "#3e8793"},
+ {"cls": "cyan-400", "name": "Cyan 400", "hex": "#497280"},
+ {"cls": "cyan-500", "name": "Cyan 500", "hex": "#004958"}
+ ]
+ },
+ {
+ "name": "Orange",
+ "variants": [
+ {"cls": "orange-100", "name": "Orange 100", "hex": "#f2d29f"},
+ {"cls": "orange-200", "name": "Orange 200", "hex": "#f1ae7b"},
+ {"cls": "orange-300", "name": "Orange 300", "hex": "#ed9654"}
+ ]
+ },
+ {
+ "name": "Violet",
+ "variants": [
+ {"cls": "violet-100", "name": "Violet 100", "hex": "#edc8bd"},
+ {"cls": "violet-200", "name": "Violet 200", "hex": "#d28c94"},
+ {"cls": "violet-300", "name": "Violet 300", "hex": "#8d415f"},
+ {"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
+ {"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
+ ]
+ }
+ ]
}
diff --git a/source/_meta/_01-foot.mustache b/source/_meta/_01-foot.mustache
index c80166eaaff259522180a40c0379685999008c5f..3e8c0ec5fdc931b9fd03281657ccf486e4a12a49 100755
--- a/source/_meta/_01-foot.mustache
+++ b/source/_meta/_01-foot.mustache
@@ -15,13 +15,14 @@
*/
var idx = location.pathname.indexOf("/patterns");
var prefix = location.pathname.substring(0, idx);
+ var anchors = document.querySelectorAll('a[data-href]');
- if (prefix != "") {
- var anchors = document.querySelectorAll('a[data-href]');
-
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
+ for (var i = 0; i < anchors.length; i++) {
+ var anchor = anchors[i];
+ if (prefix != "") {
anchor.setAttribute('href', prefix + anchor.dataset.href);
+ } else {
+ anchor.setAttribute('href', anchor.dataset.href);
}
}
</script>
diff --git a/source/_patterns/00-atoms/00-global/00-brand-colors.mustache b/source/_patterns/00-atoms/00-global/00-brand-colors.mustache
index 9cb7fef4c17f502213a2365c2a6db1389c258f04..1fa3d6536da6ea9f89b6d2ec8c23ddbc6c4af3f0 100644
--- a/source/_patterns/00-atoms/00-global/00-brand-colors.mustache
+++ b/source/_patterns/00-atoms/00-global/00-brand-colors.mustache
@@ -1,37 +1,8 @@
-<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
- <div class="card flex flex-col">
- <div class="h-32 bg-black"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Black</p>
- <p>#000000</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-white"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">White</p>
- <p>#ffffff</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-green-100"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Green 100</p>
- <p>#29bc51</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-green-200"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Green 200</p>
- <p>#26b34b</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-green-300"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Green 300</p>
- <p>#22a244</p>
- </div>
- </div>
-</div>
+{{# brandColors }}
+ <h2 class="head-alt-sm mb-4 mt-8">{{ name }}</h2>
+ <div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+ {{# variants }}
+ {{> molecules-color-swatch }}
+ {{/ variants }}
+ </div>
+{{/ brandColors }}
diff --git a/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache b/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
index edae8c5c2a493207429e62cedfb7dc463d9097ff..23ece7780036119f8c6632b0bbe9151eb3394fa3 100644
--- a/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+++ b/source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
@@ -1,79 +1,5 @@
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-50"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 50</p>
- <p>#f7f7f7</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-100"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 100</p>
- <p>#f3f3f3</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-125"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 125</p>
- <p>#f0f0f0</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-150"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 150</p>
- <p>#00000012</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-200"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 200</p>
- <p>#adadad</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-300"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 300</p>
- <p>#4c4c4c</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-400"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 400</p>
- <p>#343434</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-500"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 500</p>
- <p>#303132</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-600"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 600</p>
- <p>#262626</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-700"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 700</p>
- <p>#202020</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-grey-800"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Grey 800</p>
- <p>#1f1f1f</p>
- </div>
- </div>
+ {{# greyColors }}
+ {{> molecules-color-swatch }}
+ {{/ greyColors }}
</div>
diff --git a/source/_patterns/00-atoms/00-global/02-utility-colors.mustache b/source/_patterns/00-atoms/00-global/02-utility-colors.mustache
deleted file mode 100644
index 2cc4164159822e039806d2c7540882890a7a781d..0000000000000000000000000000000000000000
--- a/source/_patterns/00-atoms/00-global/02-utility-colors.mustache
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
- <div class="card flex flex-col">
- <div class="h-32 bg-red-100"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Red 100</p>
- <p>#d6151b</p>
- </div>
- </div>
- <div class="card flex flex-col">
- <div class="h-32 bg-red-200"></div>
- <div class="card__body p-2 flex">
- <p class="font-bold flex-grow">Red 200</p>
- <p>#d6151b</p>
- </div>
- </div>
-</div>
diff --git a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
index 1062f30ccca9a6f9b47e9f420dab7dc579e9114e..b07e5c04905c3f531accd62849d3cac2233fe87f 100644
--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -1,22 +1,28 @@
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black") }}
- {{> atoms-basic-button(classes: "btn--grey-800") }}
{{> atoms-basic-button(classes: "btn--grey-700") }}
{{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }}
{{> atoms-basic-button(classes: "btn--white") }}
- {{> atoms-basic-button(classes: "btn--green-100") }}
- {{> atoms-basic-button(classes: "btn--red-100") }}
+ {{> atoms-basic-button(classes: "btn--blue-300") }}
+ {{> atoms-basic-button(classes: "btn--cyan-200") }}
+ {{> atoms-basic-button(classes: "btn--green-200") }}
+ {{> atoms-basic-button(classes: "btn--orange-300") }}
+ {{> atoms-basic-button(classes: "btn--violet-400") }}
+ {{> atoms-basic-button(classes: "btn--violet-500") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black") }}
- {{> atoms-icon-button(classes: "btn--grey-800") }}
{{> atoms-icon-button(classes: "btn--grey-700") }}
{{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }}
{{> atoms-icon-button(classes: "btn--white") }}
- {{> atoms-icon-button(classes: "btn--green-100") }}
- {{> atoms-icon-button(classes: "btn--red-100") }}
+ {{> atoms-icon-button(classes: "btn--blue-300") }}
+ {{> atoms-icon-button(classes: "btn--cyan-200") }}
+ {{> atoms-icon-button(classes: "btn--green-200") }}
+ {{> atoms-icon-button(classes: "btn--orange-300") }}
+ {{> atoms-icon-button(classes: "btn--violet-400") }}
+ {{> atoms-icon-button(classes: "btn--violet-500") }}
</div>
</div>
diff --git a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
index fc31157282e10fe16c578c0d8d11cb2b0a45556d..c6560bdbc2d3ee7a8b9623cd072edcd6f3f35aa1 100644
--- a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+++ b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
@@ -1,22 +1,28 @@
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
- {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
- {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
- {{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
- {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
- {{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
- {{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
</div>
diff --git a/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
index 3bd3e8c51154984812cebef4bed3f1ba54b9559f..f2db96721245fdb8fe7301e0cd1f72cbbd25c48d 100644
--- a/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
+++ b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
@@ -1,24 +1,30 @@
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
- {{> atoms-basic-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
- {{> atoms-basic-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }}
- {{> atoms-basic-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }}
+ {{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
+ {{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
+ {{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+ {{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
+ {{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
+ {{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
- {{> atoms-icon-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
- {{> atoms-icon-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }}
- {{> atoms-icon-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }}
+ {{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
+ {{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
+ {{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+ {{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
+ {{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
+ {{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
</div>
diff --git a/source/_patterns/00-atoms/flags/flag-color-variants.mustache b/source/_patterns/00-atoms/flags/flag-color-variants.mustache
index 9c386d16fde828921bcc53da6897fc2837110084..9ebac5aee2e1b28e9dc005cc7afad57fc38bf515 100644
--- a/source/_patterns/00-atoms/flags/flag-color-variants.mustache
+++ b/source/_patterns/00-atoms/flags/flag-color-variants.mustache
@@ -3,9 +3,9 @@
{{> atoms-basic-flag(classes: "bg-black text-white") }}
</div>
<div class="inline-flex flex-col space-y-2">
- {{> atoms-basic-flag(classes: "bg-green-100 text-white") }}
+ {{> atoms-basic-flag(classes: "bg-green-200 text-white") }}
</div>
<div class="inline-flex flex-col space-y-2">
- {{> atoms-basic-flag(classes: "bg-red-100 text-white") }}
+ {{> atoms-basic-flag(classes: "bg-blue-100 text-white") }}
</div>
</div>
diff --git a/source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache b/source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache
index 4bc002c420dea16e992465a8327f05881867dc0b..cf6696ad4249dbbd6de1dee8c2f54b7726991312 100644
--- a/source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache
+++ b/source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache
@@ -17,9 +17,9 @@
<a href="#" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{ headline.medium }}</h1></a>
<p class="card-body-text flex-grow text-white">{{ excerpt.long }}</p>
<div class="inline-block-nogap mt-4">
- {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
- {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
- {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
+ {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
+ {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
+ {{> atoms-basic-button(classes: "article-card__category-button btn--grey-700 btn--condensed text-sm font-light", cta: "Kategorie 3") }}
</div>
</div>
</article>
diff --git a/source/_patterns/01-molecules/banner/color-variants.mustache b/source/_patterns/01-molecules/banner/color-variants.mustache
index 575b14a8696b0d8999da278fbafe793b2f79077e..e0c7e1bef76f478577b2319459d3852cce933b72 100644
--- a/source/_patterns/01-molecules/banner/color-variants.mustache
+++ b/source/_patterns/01-molecules/banner/color-variants.mustache
@@ -1,8 +1,8 @@
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
{{> molecules-banner(color: "bg-black") }}
- {{> molecules-banner(color: "bg-red-100") }}
- {{> molecules-banner(color: "bg-green-100") }}
+ {{> molecules-banner(color: "bg-violet-300") }}
{{> molecules-banner(color: "bg-green-200") }}
+ {{> molecules-banner(color: "bg-blue-200") }}
{{> molecules-banner(color: "bg-brands-facebook") }}
{{> molecules-banner(color: "bg-brands-twitter") }}
</div>
diff --git a/source/_patterns/01-molecules/calendar/calendar-table-row.mustache b/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
index 24663d3557444b323a072e9477628e6acc288d4a..b0f8c22b9db7c177a90eba085024711caf8705b2 100644
--- a/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
+++ b/source/_patterns/01-molecules/calendar/calendar-table-row.mustache
@@ -1,5 +1,5 @@
<div class="grid grid-cols-12 items-center calendar-table-row {{ classes }}">
- <div class="col-span-2 text-red-100 head-alt-md calendar-table-row__col"><span>10.</span></div>
+ <div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>10.</span></div>
<div class="col-span-8 grid grid-cols-3 calendar-table-row__col">
<div class="col-span-3 md:col-span-1">
<strong class="block">{{ dateverbose }}</strong>
@@ -12,7 +12,7 @@
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
<a href="#">
- <i class="fas fa-map-marker-alt text-red-100 mr-1" aria-hidden="true"></i>
+ <i class="fas fa-map-marker-alt text-violet-300 mr-1" aria-hidden="true"></i>
<span>Mapa</span>
</a>
</div>
diff --git a/source/_patterns/01-molecules/calendar/calendar.mustache b/source/_patterns/01-molecules/calendar/calendar.mustache
index efd14254d80c6eaa0a2fd154220a54d53b1de69a..9557a099470cc9077aa64a2e49987836418e5a6a 100644
--- a/source/_patterns/01-molecules/calendar/calendar.mustache
+++ b/source/_patterns/01-molecules/calendar/calendar.mustache
@@ -1,6 +1,6 @@
<div class="calendar grid grid-cols-4">
<div class="col-span-4 xl:col-span-1">
- {{> molecules-banner(color: "bg-red-100", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
+ {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
</div>
<div class="col-span-4 xl:col-span-3">
{{> molecules-calendar-table-row }}
diff --git a/source/_patterns/01-molecules/pagination/pagination.mustache b/source/_patterns/01-molecules/pagination/pagination.mustache
index f1cafc244849b6f5725323d98f8b5b72c58ccaa7..71f41c66f9eff7c9b77bf33340556e9ec8b86a2e 100644
--- a/source/_patterns/01-molecules/pagination/pagination.mustache
+++ b/source/_patterns/01-molecules/pagination/pagination.mustache
@@ -3,7 +3,7 @@
{{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }}
{{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
- {{> atoms-basic-button(cta: "3", classes: "btn--grey-300 btn--condensed hidden md:inline-block") }}
+ {{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
{{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }}
diff --git a/source/_patterns/01-molecules/utility/color-swatch.mustache b/source/_patterns/01-molecules/utility/color-swatch.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..90fa624c310b6fb71ed435813da04e0b2de96a44
--- /dev/null
+++ b/source/_patterns/01-molecules/utility/color-swatch.mustache
@@ -0,0 +1,7 @@
+<div class="card flex flex-col">
+ <div class="h-32 bg-{{ cls }}"></div>
+ <div class="card__body p-2 flex">
+ <p class="font-bold flex-grow">{{ name }}</p>
+ <p>{{ hex }}</p>
+ </div>
+</div>
diff --git a/source/_patterns/02-organisms/00-global/footer.mustache b/source/_patterns/02-organisms/00-global/footer.mustache
index 3a0860b41a8548604778672ec5aefc51e9122bd7..57964d2d8cf3906da2cbf84010a739b4a63ef77b 100644
--- a/source/_patterns/02-organisms/00-global/footer.mustache
+++ b/source/_patterns/02-organisms/00-global/footer.mustache
@@ -66,8 +66,8 @@
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div>
<div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
- {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
- {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div>
</section>
</div>
diff --git a/source/_patterns/02-organisms/00-global/navbar.mustache b/source/_patterns/02-organisms/00-global/navbar.mustache
index 9513d41e11a68ebf3129e1a1fda5c7e3da24ad44..ece0a03f738e1a4a018fc92d3e1f4fef05b07a8f 100644
--- a/source/_patterns/02-organisms/00-global/navbar.mustache
+++ b/source/_patterns/02-organisms/00-global/navbar.mustache
@@ -56,8 +56,8 @@
</ul>
</div>
<div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
- {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
- {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+ {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+ {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
</div>
</div>
</div>
diff --git a/source/_patterns/02-organisms/00-global/subnav.mustache b/source/_patterns/02-organisms/00-global/subnav.mustache
index c0ded10fc8cc5cc1c4d7762f0eec6e23c0a13682..03bba1f0e9cd9a7a66b6eea040ab2ec483f94db5 100644
--- a/source/_patterns/02-organisms/00-global/subnav.mustache
+++ b/source/_patterns/02-organisms/00-global/subnav.mustache
@@ -17,11 +17,11 @@
<button
@click="toggleView('calendar')"
- class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-red-100 text-sm"
+ class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm"
:class="{'btn--activated': isCurrentView('calendar')}"
>
<div class="btn__body">
- <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-red-100"></i>
+ <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-orange-300"></i>
<span class="hidden md:block">Krajský kalendář</span>
</div>
</button>
diff --git a/source/_patterns/02-organisms/03-hero/elections-hero.mustache b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
index 9b7e5cd8794ea44c2c4dcca035f55dee07a436f0..65617de9af128cda86996acb290fc94e9a133c75 100644
--- a/source/_patterns/02-organisms/03-hero/elections-hero.mustache
+++ b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
@@ -1,7 +1,7 @@
<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-2 lg:col-span-3 order-1">
- {{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
+ {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
<h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
diff --git a/source/_patterns/03-templates/pirate-center.mustache b/source/_patterns/03-templates/pirate-center.mustache
index ea5814fbb95e33f19ff212c146eb04d5e3f3e4c3..73c9e55ddbbe0d4e8e0051cf051f0fd41871a5b8 100644
--- a/source/_patterns/03-templates/pirate-center.mustache
+++ b/source/_patterns/03-templates/pirate-center.mustache
@@ -69,7 +69,7 @@
{{> molecules-calendar-table-row(classes: "calendar-table-row--standalone") }}
</p>
- {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--red-100 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
+ {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--orange-300 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
</div>
<div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
<div class="lg:card lg:elevation-10">
diff --git a/source/css/atoms/table.pcss b/source/css/atoms/table.pcss
index a15cc6e4a0342112c7efe2da26ec99ad8aed0553..b307692e438ec7571d5aee01ba2874bb83a3f69c 100644
--- a/source/css/atoms/table.pcss
+++ b/source/css/atoms/table.pcss
@@ -27,7 +27,7 @@
}
td {
- @apply border border-grey-150;
+ @apply border border-grey-125;
}
}
diff --git a/source/css/molecules/calendar.pcss b/source/css/molecules/calendar.pcss
index cab9f32502b3198ad91b5977550b3370d5b17603..84ae5bfc614f1404a9604b149ab08dee83d3e19e 100644
--- a/source/css/molecules/calendar.pcss
+++ b/source/css/molecules/calendar.pcss
@@ -1,5 +1,5 @@
.calendar-table-row {
- @apply border-b border-grey-150;
+ @apply border-b border-grey-125;
&:first-of-type {
@apply border-t;
@@ -11,7 +11,7 @@
}
.calendar-table-row__col {
- @apply h-full border-r border-grey-150 p-2 flex justify-center items-center;
+ @apply h-full border-r border-grey-125 p-2 flex justify-center items-center;
&:first-child {
@apply border-l;
diff --git a/source/css/molecules/candidate-card.pcss b/source/css/molecules/candidate-card.pcss
index 8d80adfa34c07da36e87e8d7f4eebb27dffd2218..d6af350cc68a9d5cc3440a4c56781bf6a06828d8 100644
--- a/source/css/molecules/candidate-card.pcss
+++ b/source/css/molecules/candidate-card.pcss
@@ -23,13 +23,13 @@
}
.candidate-card__affiliation {
- @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;
+ @apply text-sm bg-grey-50 flex border-t border-b border-grey-125;
> div {
@apply py-2 px-4 flex items-center;
&:not(:first-child) {
- @apply border-l border-grey-150;
+ @apply border-l border-grey-125;
}
&:last-child {
diff --git a/source/css/molecules/candidate-table-row.pcss b/source/css/molecules/candidate-table-row.pcss
index 99988bcaf66b9768513b7a4643454bd1df4af623..4a43ccda2aa36d9eedc2a55eff6fc59071cf787a 100644
--- a/source/css/molecules/candidate-table-row.pcss
+++ b/source/css/molecules/candidate-table-row.pcss
@@ -64,7 +64,7 @@
}
.candidate-table-row__bio {
- @apply border-l border-grey-150 py-0 px-8;
+ @apply border-l border-grey-125 py-0 px-8;
}
.candidate-table-row__affiliation {
diff --git a/source/css/molecules/switch.pcss b/source/css/molecules/switch.pcss
index f4f1118f1dc9b6eac48f88cf785cbe95ad8e76ea..8e2c84b6bc790b80e4dc67d190d1d682aa9dc641 100644
--- a/source/css/molecules/switch.pcss
+++ b/source/css/molecules/switch.pcss
@@ -11,6 +11,6 @@
&.switch__item--active,
&.switch__item--active:hover {
- @apply bg-green-100;
+ @apply bg-cyan-300;
}
}
diff --git a/source/css/organisms/region-map.pcss b/source/css/organisms/region-map.pcss
index 380fef78d83bf44fd426736f933000e71b642e0e..fffb71db0332bc6f7530030701688dfa886dfa34 100644
--- a/source/css/organisms/region-map.pcss
+++ b/source/css/organisms/region-map.pcss
@@ -12,5 +12,5 @@
}
.region-map__region--current {
- fill: theme('colors.black');
+ fill: theme('colors.violet.400');
}
diff --git a/tailwind-plugins/buttons.js b/tailwind-plugins/buttons.js
index e178c67286a7d2765836b98d814aa43cd8e5c2d9..8a57b791ecfe14b845ef05bc8dfa3277e9ae4cfd 100644
--- a/tailwind-plugins/buttons.js
+++ b/tailwind-plugins/buttons.js
@@ -157,41 +157,27 @@ module.exports = function (options) {
},
},
..._.map(options.colors, (colorOptions, name) => {
+ const bg = getThemeColor(colorOptions.background, '#000');
return {
// Standard colorized variant
[`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
backgroundColor: getThemeColor(colorOptions.background),
color: getThemeColor(colorOptions.text),
- // '&:focus': {
- // outline: 0,
- // boxShadow: `0 0 0 .2em ${Color(colorOptions.background).alpha(.5).rgb().toString()}`,
- // },
- // '&:hover': {
- // backgroundColor: _.get(colorOptions, 'hoverBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
- // color: _.get(colorOptions, 'hoverText', colorOptions.text),
- // },
- // '&:active': {
- // backgroundColor: _.get(colorOptions, 'activeBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
- // color: _.get(colorOptions, 'activeText', colorOptions.text),
- // }
},
[`.btn--${e(name)} .btn__icon`]: {
- borderColor: getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1)),
- backgroundColor: getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000')),
+ borderColor: getThemeColor(colorOptions.iconBorder, darken(bg, 0.1)),
+ backgroundColor: getThemeColor(colorOptions.iconBackground, bg),
},
// Hover state unless set with --to-* variant.
[`.btn--${e(name)}.btn--hoveractive:not([class^="btn--to-"]):hover`]: {
'.btn__body, .btn__icon': {
- backgroundColor: getThemeColor(colorOptions.hoverBackground, '#000'),
+ backgroundColor: getThemeColor(colorOptions.hoverBackground, darken(bg, 0.2)),
color: getThemeColor(colorOptions.hoverText, '#fff'),
},
'.btn__icon': {
borderColor: getThemeColor(
colorOptions.hoverIconBorder,
- lighten(
- getThemeColor(colorOptions.hoverBackground, '#000'),
- 0.1
- )
+ darken(bg, 0.3)
),
},
'.btn__icon svg, .btn__icon i': {
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d20a70a3a402011eb61679a627b69cd98984466..fdd036a65f5b9b4d224428a675ff8d943ad7c1ae 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -66,7 +66,6 @@ module.exports = {
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
- '150': '#00000012',
'200': '#adadad',
'300': '#4c4c4c',
'400': '#343434',
@@ -75,21 +74,41 @@ module.exports = {
'700': '#202020',
'800': '#1f1f1f',
},
- 'red': {
- '100': '#d6151b',
- '200': darken('#d6151b', 0.1),
- },
'green': {
- '100': '#29bc51',
- '200': darken('#29bc51', 0.1),
- '300': darken('#29bc51', 0.18),
+ '100': '#d6e8b3',
+ '200': '#92c6ab',
+ '300': darken('#92c6ab', 0.1),
},
'brands': {
'facebook': '#067ceb',
'twitter': '#00c9ff',
'gmail': '#ec230e',
'linkedin': '#0066a9',
- }
+ },
+ 'blue': {
+ '100': '#abcdef',
+ '200': '#76b4cf',
+ '300': '#027da8',
+ },
+ 'cyan': {
+ '100': '#a7d4d1',
+ '200': '#57b3bd',
+ '300': '#3e8793',
+ '400': '#497280',
+ '500': '#004958',
+ },
+ 'orange': {
+ '100': '#f2d29f',
+ '200': '#f1ae7b',
+ '300': '#ed9654',
+ },
+ 'violet': {
+ '100': '#edc8bd',
+ '200': '#d28c94',
+ '300': '#8d415f',
+ '400': '#840048',
+ '500': '#670047',
+ },
},
container: {
center: true,
@@ -139,56 +158,54 @@ module.exports = {
text: 'white',
background: 'black',
iconBorder: 'grey.400',
- iconBackground: 'grey.800',
- hoverIconBorder: 'grey.600',
- },
- 'grey-800': {
- text: 'white',
- background: 'grey.800',
- iconBorder: 'grey.500',
hoverIconBorder: 'grey.600',
},
'grey-700': {
text: 'white',
background: 'grey.700',
- iconBorder: 'grey.800',
+ iconBorder: 'grey.500',
+ hoverBackground: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-500': {
text: 'white',
background: 'grey.500',
iconBorder: 'grey.300',
- hoverIconBorder: 'grey.600',
- },
- 'grey-300': {
- text: 'white',
- background: 'grey.300',
- iconBorder: 'grey.150',
- hoverIconBorder: 'grey.600',
+ hoverBackground: 'grey.300',
+ hoverIconBorder: 'grey.400',
},
'grey-125': {
text: 'black',
background: 'grey.125',
- iconBorder: 'grey.150',
- hoverIconBorder: 'grey.600',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
- hoverIconBorder: 'grey.600',
},
- 'green-100': {
+ 'blue-300': {
text: 'white',
- background: 'green.100',
- iconBorder: 'green.200',
- hoverIconBorder: 'grey.600',
+ background: 'blue.300',
},
- 'red-100': {
+ 'cyan-200': {
text: 'white',
- background: 'red.100',
- iconBorder: 'red.200',
- hoverIconBorder: 'grey.600',
+ background: 'cyan.200',
+ },
+ 'green-200': {
+ text: 'white',
+ background: 'green.200',
+ },
+ 'orange-300': {
+ text: 'white',
+ background: 'orange.300',
+ },
+ 'violet-400': {
+ text: 'white',
+ background: 'violet.400',
+ },
+ 'violet-500': {
+ text: 'white',
+ background: 'violet.500',
},
'brands-facebook': {
text: 'white',