feat(layout): add reusable grid definitions as custom properties (#233)

src/styles/custom-properties.css

@@ -59,4 +59,30 @@
   --leu-z-index-popup: 100;
 
   @leu-font-styles './font-definitions.json';
+
+  /*
+   * Grid system
+   *
+   * The design system uses a 6 columns system on smaller screens.
+   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
+   *
+   * The goal is to keep the css footprint small
+   * by not generating all classes for every cell width for every breakpoint.
+   * Most components don't need a grid and those who do probably have a very simple configuration.
+   * If we have enough use cases for a more complex grid system we can add it later.
+   */
+  --leu-grid-gap: 1rem;
+  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
+  --leu-grid-max-width: 73rem;
+
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
+
+  @media (--viewport-regular) {
+    --leu-grid-columns-offset: 3 / -1;
+  }
+
+  @media (--viewport-medium) {
+    --leu-grid-gap: 2rem;
+  }
 }

src/styles/style.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit"
+
+export default {
+  title: "Layout",
+  argTypes: {
+    name: {
+      control: "select",
+    },
+    color: {
+      control: {
+        type: "color",
+        presetColors: ["#009ee0", "#d93c1a", "#1a7f1f"],
+      },
+    },
+  },
+}
+
+function Template() {
+  return html` <style>
+      .container {
+        display: grid;
+        grid-template-columns: var(--leu-grid-template-columns);
+        gap: var(--leu-grid-gap);
+        max-width: var(--leu-grid-max-width);
+
+        margin: 0 auto;
+        padding: 1rem;
+
+        background-color: var(--leu-color-black-5);
+        font-family: var(--leu-font-family-regular);
+      }
+
+      .container div {
+        background-color: var(--leu-color-black-transp-5);
+        padding: 1rem;
+      }
+    </style>
+    <div class="container">
+      <div style="grid-column: var(--leu-grid-columns-full)">
+        <pre>--leu-grid-columns-full</pre>
+        <p>A preset to use the full width of the grid</p>
+      </div>
+      <div style="grid-column: var(--leu-grid-columns-offset)">
+        <pre>--leu-grid-columns-offset</pre>
+        <p>
+          A preset that indents the content by two columns starting at the
+          regular breakpoint. On smaller breakpoints it will use the full width.
+        </p>
+      </div>
+
+      ${[
+        [2, 2, 2, 2, 2, 2],
+        [3, 3, 3, 3],
+        [4, 4, 4],
+        [6, 6],
+      ]
+        .flat()
+        .map(
+          (columns) =>
+            html`<div style="grid-column-end: span ${columns}">${columns}</div>`
+        )}
+    </div>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {}