@ebrains/components 0.8.0-alpha.0 → 0.9.0-beta

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.css

@@ -1,64 +1,169 @@
+.coloured {
+  background: linear-gradient(to left,
+      #9CE142 0%,
+      #00C959 50%,
+      #00A595 100%);
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[300px\] {
+  width: 300px;
+}
+
 .container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .p-8 {
-    padding: 0.5rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
+.grid-layout {
+  --grid-columns: 6;
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
-  .my-20 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
   }
-  .f-heading-05 {
-    font-family: var(--f-heading-05-fontFamily);
-    font-weight: var(--f-heading-05-fontWeight);
-    font-size: var(--f-heading-05-fontSize);
-    line-height: var(--f-heading-05-lineHeight);
-    letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+@media (min-width: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
   }
 
-  .w-\[150px\] {
-    width: 150px;
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
 
-  .w-\[200px\] {
-    width: 200px;
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
 
-  .w-\[300px\] {
-    width: 500px;
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
   }
 
-  .coloured {
-    background: linear-gradient(to left, 
-  #9CE142 0%, 
-  #00C959 50%, 
-  #00A595 100%);
-  }
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '1afffa0e5e0253ca2d8aec1a740d351fc614e0c4' }, h("div", { key: '3756f6a667a09cde71a67cd9f9bfce1054a6d523', class: "container my-16" }, h("h3", { key: '371bd24965bcc0349dac7f65134b25f128423de3', class: "f-heading03" }, "Coloured Background"), h("div", { key: '23062436bef739840eb998b919adcc1b69c55740', class: "coloured w-[200px]" }, h("eds-logo", { key: '226140792cb59d82bf2696802d53d43f24171dea', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'a37d0871161b9753656768fcfe78158e63f52669', class: "container my-16" }, h("h3", { key: '0a3c80b44fd9161746203af3ef95654acd3986e8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'e3d9447be3a1499ed546e85cf534ba0709a846a0', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'fc63b377517ba82dc141d3e3a82221018a3ef315', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '68e487c6be2e62caa1d7196a294ed9fadf6ab399', class: "container my-16" }, h("h3", { key: '505ab03210a8ace1dd0394df3fa159f1dd3bddf0', class: "f-heading03" }, "Dark Background "), h("div", { key: '6d08734cedf520554d746caa6c99561fdd73f855', class: "w-[200px]" }, h("eds-logo", { key: '63d2496b5dab9c66809cbe38b55a83928276cce0', orientation: "vertical", type: "color-white", href: "#" })))));
+        return (h("div", { key: 'e842e396933ee714f86a9443b55cd7045d12277e', class: "container" }, h("ul", { key: 'dfea7dc44294bfe2acbbfd580bff8908cbeb98bf', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fe44c472c10b814ff815c2a8cd7101adb0890872', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '5ed6f1029df41907ca8b27a51612a1078f353ade', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'eae38dbd0f8d4b92f2768559dbe65d6c136ba746', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '7a05dacc86c54c6ff51810b14c9dc99fad4e36b5', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '4055ab71f60098acea7e27f2a8706c45aecb7097', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '340cfb0cbf6383d46eabd91b6fb591a003ec00f6', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'd4158d0b6413cae236c333fe0ffdd77dbda22c88', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'a411c3438499758b68cf949a83d9097da70a11f0', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'a7a97185be422337fb333709c61fe7c435bc82f3', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'cef2acc75d1749cd93699a99a2d80aeaa61ed632', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '43be8f5ca418a93b58c8f3a52d04a6e50b5bb03b', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'b5453b1009c0aa5c799c417e5c13b30cfc647840', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/{eds-logo-variations/eds-logo-variations.js → logo/logo-variations-tabs/logo-variations.js}

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class EdsLogoVariations {
+export class LogoVariationsTabs {
     constructor() {
         this.tabIndex = undefined;
     }
@@ -17,9 +17,9 @@ export class EdsLogoVariations {
         }
     }
     render() {
-        return h("div", { key: '31bd93b3412b859adc59f6a4fe67018bf9c13336', class: "container" }, this.renderContent());
+        return h("div", { key: 'f0bc6f4cd2e1d34d77ff52c3a0ce35a3214a2f9f', class: "container" }, this.renderContent());
     }
-    static get is() { return "eds-logo-variations"; }
+    static get is() { return "logo-variations-tabs"; }
     static get properties() {
         return {
             "tabIndex": {

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.css

@@ -1,210 +1,240 @@
-.container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .p-8 {
-    padding: 0.5rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-  .f-heading-05 {
-    font-family: var(--f-heading-05-fontFamily);
-    font-weight: var(--f-heading-05-fontWeight);
-    font-size: var(--f-heading-05-fontSize);
-    line-height: var(--f-heading-05-lineHeight);
-    letter-spacing: var(--f-heading-05-letterSpacing);
-  }
+.bg-accent {
+  background-color: var(--green-500);
+}
 
-  .f-ui-02 {
-    font-family: var(--f-ui-02-fontFamily);
-    font-weight: var(--f-ui-02-fontWeight);
-    font-size: var(--f-ui-02-fontSize);
-    line-height: var(--f-ui-02-lineHeight);
-    letter-spacing: var(--f-ui-02-letterSpacing);
-  }
-  .f-ui-02-light {
-    font-family: var(--f-ui-02-light-fontFamily);
-    font-weight: var(--f-ui-02-light-fontWeight);
-    font-size: var(--f-ui-02-light-fontSize);
-    line-height: var(--f-ui-02-light-lineHeight);
-    letter-spacing: var(--f-ui-02-light-letterSpacing);
-  }
+.bg-dark {
+  background-color: var(--grey-300);
+}
 
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-  }
-  
-  .example {
-    width: 200px;
-    text-align: center;
-    font-size: 14px;
-  }
-  
-  .logo {
-    width: 100%;
-    height: auto;
-  }
-  
-  .bg-dark {
-    background-color: #333;
-  }
-  
-  .bg-light {
-    background-color: #f3f3f3;
-  }
-  
-  .bg-white {
-    background-color: white;
-  }
-  
-  /* Wrong Usage: Non-brand colors */
-  .non-brand-color {
-    fill: purple; /* Non-brand color */
-  }
-  
-  /* Wrong Usage: Distorted logo */
-  .distorted {
-    transform: scaleX(1.5);
-  }
-  
-  /* Wrong Usage: Adding effects */
-  .effects {
-    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
-  }
-  
-  /* Wrong Usage: Rotated logo */
-  .rotated {
-    transform: rotate(15deg);
-  }
+.bg-strongest {
+  background-color: var(--black);
+}
 
-  .no-other-bg-color{
-    background-color: var(--purple-200);
-  }
+.text-center {
+  text-align: center;
+}
 
-  .no-other-color{
-    color: var(--red-700);
-  }
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+.bg-dark {
+  background-color: #333;
+}
+
+.bg-light {
+  background-color: #f3f3f3;
+}
+
+.bg-white {
+  background-color: white;
+}
 
-  /* Wrong Usage: Applying outlines */
+/* Wrong Usage: Non-brand colors */
+.non-brand-color {
+  fill: purple;
+  /* Non-brand color */
+}
+
+/* Wrong Usage: Distorted logo */
+.distorted {
+  transform: scaleX(0.5);
+}
+
+/* Wrong Usage: Adding effects */
+.effects {
+  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
+}
+
+/* Wrong Usage: Rotated logo */
+.rotated {
+  transform: rotate(15deg);
+}
+
+.no-other-bg-color {
+  background-color: var(--purple-200);
+}
+
+.no-other-color {
+  color: var(--red-700);
+}
+
+/* Wrong Usage: Applying outlines */
 .outlined {
-  stroke: red; /* Outline color */
-  stroke-width: 2px; /* Thickness of the outline */
-  fill: none; /* Remove the fill to emphasize the outline */
+  stroke: red;
+  /* Outline color */
+  stroke-width: 2px;
+  /* Thickness of the outline */
+  fill: none;
+  /* Remove the fill to emphasize the outline */
 }
 
 /* Wrong Usage: Changing the font */
 .custom-font {
-  font-family: 'Comic Sans MS', cursive; /* An incorrect font choice */
-  font-size: 20px; /* Modify font size */
-  color: #333; /* Incorrect text color */
+  font-family: 'Comic Sans MS', cursive;
+  /* An incorrect font choice */
+  font-size: 20px;
+  /* Modify font size */
+  color: #333;
+  /* Incorrect text color */
+}
+
+.container {
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
 }
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
 .grid-layout {
+  --grid-columns: 6;
   display: grid;
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
-.grid-col-span-12 {
-  --container-grid-columns: 12;
-  grid-column: span 12 / span 12;
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
 }
 
 .gap-y-8 {
   row-gap: 0.5rem;
 }
 
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
 @media (min-width: 750px) {
-  .md\:flex {
-    display: flex;
-  }
-  .md\:hidden {
-    display: none;
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:pt-28 {
-    padding-top: 1.75rem;
-  }
 }
 
 @media (min-width: 900px) {
-  .lg\:order-last {
-    order: 9999;
-  }
-  .lg\:order-none {
-    order: 0;
-  }
-  .lg\:mt-0 {
-    margin-top: 0rem;
-  }
-  .lg\:flex {
-    display: flex;
-  }
-  .lg\:w-\[150px\] {
-    width: 150px;
-  }
-  .lg\:w-auto {
-    width: auto;
-  }
-  .lg\:max-w-\[720px\] {
-    max-width: 720px;
-  }
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-  .lg\:flex-nowrap {
-    flex-wrap: nowrap;
-  }
   .lg\:gap-y-16 {
     row-gap: 1rem;
   }
-  .lg\:px-28 {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
-  }
-  .lg\:\!pl-12 {
-    padding-left: 0.75rem !important;
-  }
-  .lg\:\!pr-12 {
-    padding-right: 0.75rem !important;
+
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
 }
 
-@media (min-width: 750px) {
-  .md\:grid-col-span-4 {
-    --container-grid-columns: 4;
-    grid-column: span 4 / span 4;
-  }
-  .md\:grid-col-span-6 {
-    --container-grid-columns: 6;
-    grid-column: span 6 / span 6;
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
 }
 
-.flex-col {
-  flex-direction: column;
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
 }