refactor(docusaurus): classes for color boxes

eea · Sep 12, 2022 · 80219d5 · 80219d5
1 parent ae20a72
commit 80219d5
Show file tree

Hide file tree

Showing 7 changed files with 1,462 additions and 1,360 deletions.
diff --git a/theme/themes/eea/tokens/colors.less b/theme/themes/eea/tokens/colors.less
@@ -58,6 +58,6 @@
 @grey-1: #F9F9F9;
 @grey-2: #E6E7E8;
 @grey-3: #BCBEC0;
-@grey-4: #67696b; // 10% shade of #808285 which passed AA validation on white bg
+@grey-4: #67696b; /* 10% shade of #808285 which passed AA validation on white bg */
 @grey-5: #323232;
 @grey-6: #000000;
diff --git a/website/docs/webdev/3-Guidelines/2-colours.md b/website/docs/webdev/3-Guidelines/2-colours.md
diff --git a/website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.md b/website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.md
diff --git a/website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.md b/website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.md
diff --git a/website/docs/webdev/3-Guidelines/Thematic Platforms/WiseFreshwater.md b/website/docs/webdev/3-Guidelines/Thematic Platforms/WiseFreshwater.md
diff --git a/website/docs/webdev/3-Guidelines/Thematic Platforms/WiseMarine.md b/website/docs/webdev/3-Guidelines/Thematic Platforms/WiseMarine.md
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -82,6 +82,63 @@
   --ifm-h4-font-size: 1.25rem;
   --ifm-h5-font-size: 1.125rem;
   --ifm-h6-font-size: 1rem;
+  --brown-0: #FFF6EC;
+  --brown-1: #FFEDD8;
+  --brown-2: #E7BC91;
+  --brown-3: #BC8A5F;
+  --brown-4: #8B5E34;
+  --brown-5: #603808;
+  --brown-6: #3D2201;
+  --purple-0: #EFEBF2;
+  --purple-1: #DFD6E7;
+  --purple-2: #BEADCE;
+  --purple-3: #9E84B6;
+  --purple-4: #7D5B9D;
+  --purple-5: #5C3285;
+  --purple-6: #3C096C;
+  --red-0: #FBEEF8;
+  --red-1: #F6DDF0;
+  --red-2: #E7B2C0;
+  --red-3: #D78890;
+  --red-4: #C65B59;
+  --red-5: #B83230;
+  --red-6: #5C1918;
+  --green-0: #C8FFF8;
+  --green-1: #85FFF1;
+  --green-2: #00F5D8;
+  --green-3: #00CCB4;
+  --green-4: #00A390;
+  --green-5: #007B6C;
+  --green-6: #005248;
+  --yellow-0: #FEF6CD;
+  --yellow-1: #FBEC9B;
+  --yellow-2: #FAD936;
+  --yellow-3: #FAC50D;
+  --yellow-4: #FDAF20;
+  --yellow-5: #FF9933;
+  --yellow-6: #E56B38; /* */
+  --blue-0: #A0D7FF;
+  --blue-1: #47B3FF;
+  --blue-2: #0A99FF; /* */
+  --blue-3: #0083E0;
+  --blue-4: #006BB8;
+  --blue-5: #004B7F;
+  --blue-6: #003052;
+  --blue-grey-0: #DAE8F4;
+  --blue-grey-1: #ACCAE5;
+  --blue-grey-2: #8EA6C2;
+  --blue-grey-3: #6989A5;
+  --blue-grey-4: #4C677F;
+  --blue-grey-5: #3D5265;
+  --blue-grey-6: #2E3E4C; /* */
+  --grey-0: #FFFFFF;
+  --grey-1: #F9F9F9;
+  --grey-2: #E6E7E8;
+  --grey-3: #BCBEC0;
+  --grey-4: #67696b; /* 10% shade of #808285 which passed AA validation on white bg - diff */
+  --grey-5: #323232;
+  --grey-6: #000000;
+
 }
 
 .markdown h1:first-child {
@@ -151,3 +208,48 @@ iframe {
 .frameWrapper {
   width: 100%;
 }
+
+.large-color-box-td{
+  width: 200px;
+  height: 150px;
+  text-align: center;
+}
+
+.large-color-box{
+  width: 100%;
+  height: 150px;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.small-color-box-td{
+  width: 120px;
+  height: 80px;
+  text-align: center;
+}
+
+.small-color-box{
+  width: 100%;
+  text-align: center;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.small-color-box-td-70{
+  width: 100px;
+  height: 70px;
+  text-align: center;
+}
+
+.small-color-box-70{
+  width: 100%;
+  text-align: center;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}