@statistikzh/leu 0.8.0 → 0.10.0

package/dist/theme.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
   --leu-color-black-60: #666;
@@ -42,396 +43,548 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-family-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-family-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular: InterRegular, HelveticaNowRegular, Helvetica,
+    sans-serif;
+  --leu-font-family-black: InterBlack, HelveticaNowBlack, Arial Black, Helvetica,
+    sans-serif;
+  /* stylelint-enable value-keyword-case */
 
   --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
 
   --leu-z-index-popup: 100;
+  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
 
-  --leu-t-30-regular-font-size: 0.75rem;
+  /*
+   * 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-t-30-regular-line-height: 1.5;
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
 
-  --leu-t-30-regular-spacing: 0.5625rem;
+  --leu-t-tiny-regular-font-size: 0.75rem;
 
-  --leu-t-30-regular-font: var(--leu-t-30-regular-font-size) / var(--leu-t-30-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-tiny-regular-line-height: 1.5;
 
-  --leu-t-30-black-font-size: 0.75rem;
+  --leu-t-tiny-regular-spacing: 0.5625rem;
 
-  --leu-t-30-black-line-height: 1.5;
+  --leu-t-tiny-regular-font: var(--leu-t-tiny-regular-font-size) / var(--leu-t-tiny-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-30-black-spacing: 0.5625rem;
+  --leu-t-tiny-black-font-size: 0.75rem;
 
-  --leu-t-30-black-font: var(--leu-t-30-black-font-size) / var(--leu-t-30-black-line-height) var(--leu-font-family-black);
+  --leu-t-tiny-black-line-height: 1.5;
 
-  --leu-t-35-regular-font-size: 0.875rem;
+  --leu-t-tiny-black-spacing: 0.5625rem;
 
-  --leu-t-35-regular-line-height: 1.4;
+  --leu-t-tiny-black-font: var(--leu-t-tiny-black-font-size) / var(--leu-t-tiny-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-35-regular-spacing: 0.625rem;
+  --leu-t-small-regular-font-size: 0.875rem;
 
-  --leu-t-35-regular-font: var(--leu-t-35-regular-font-size) / var(--leu-t-35-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-small-regular-line-height: 1.4;
 
-  --leu-t-35-black-font-size: 0.875rem;
+  --leu-t-small-regular-spacing: 0.625rem;
 
-  --leu-t-35-black-line-height: 1.4;
+  --leu-t-small-regular-font: var(--leu-t-small-regular-font-size) / var(--leu-t-small-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-35-black-spacing: 0.625rem;
+  --leu-t-small-black-font-size: 0.875rem;
 
-  --leu-t-35-black-font: var(--leu-t-35-black-font-size) / var(--leu-t-35-black-line-height) var(--leu-font-family-black);
+  --leu-t-small-black-line-height: 1.4;
 
-  --leu-t-40-regular-font-size: 1rem;
+  --leu-t-small-black-spacing: 0.625rem;
 
-  --leu-t-40-regular-line-height: 1.5;
+  --leu-t-small-black-font: var(--leu-t-small-black-font-size) / var(--leu-t-small-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-40-regular-spacing: 0.75rem;
+  --leu-t-regular-regular-font-size: 1rem;
 
-  --leu-t-40-regular-font: var(--leu-t-40-regular-font-size) / var(--leu-t-40-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-regular-regular-line-height: 1.5;
 
-  --leu-t-40-black-font-size: 1rem;
+  --leu-t-regular-regular-spacing: 0.75rem;
 
-  --leu-t-40-black-line-height: 1.5;
+  --leu-t-regular-regular-font: var(--leu-t-regular-regular-font-size) / var(--leu-t-regular-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-40-black-spacing: 0.75rem;
+  --leu-t-regular-black-font-size: 1rem;
 
-  --leu-t-40-black-font: var(--leu-t-40-black-font-size) / var(--leu-t-40-black-line-height) var(--leu-font-family-black);
+  --leu-t-regular-black-line-height: 1.5;
 
-  --leu-t-45-regular-font-size: 1.125rem;
+  --leu-t-regular-black-spacing: 0.75rem;
 
-  --leu-t-45-regular-line-height: 1.5;
+  --leu-t-regular-black-font: var(--leu-t-regular-black-font-size) / var(--leu-t-regular-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-45-regular-spacing: 0.8125rem;
+  --leu-t-bigger-regular-regular-font-size: 1.125rem;
 
-  --leu-t-45-regular-font: var(--leu-t-45-regular-font-size) / var(--leu-t-45-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-bigger-regular-regular-line-height: 1.5;
 
-  --leu-t-45-black-font-size: 1.125rem;
+  --leu-t-bigger-regular-regular-spacing: 0.8125rem;
 
-  --leu-t-45-black-line-height: 1.3;
+  --leu-t-bigger-regular-regular-font: var(--leu-t-bigger-regular-regular-font-size) / var(--leu-t-bigger-regular-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-45-black-spacing: 0.75rem;
+  --leu-t-bigger-regular-black-font-size: 1.125rem;
 
-  --leu-t-45-black-font: var(--leu-t-45-black-font-size) / var(--leu-t-45-black-line-height) var(--leu-font-family-black);
+  --leu-t-bigger-regular-black-line-height: 1.3;
 
-  --leu-t-50-regular-font-size: 1.25rem;
+  --leu-t-bigger-regular-black-spacing: 0.75rem;
 
-  --leu-t-50-regular-line-height: 1.5;
+  --leu-t-bigger-regular-black-font: var(--leu-t-bigger-regular-black-font-size) / var(--leu-t-bigger-regular-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-50-regular-spacing: 0.9375rem;
+  --leu-t-medium-regular-font-size: 1.25rem;
 
-  --leu-t-50-regular-font: var(--leu-t-50-regular-font-size) / var(--leu-t-50-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-medium-regular-line-height: 1.5;
 
-  --leu-t-50-black-font-size: 1.25rem;
+  --leu-t-medium-regular-spacing: 0.9375rem;
 
-  --leu-t-50-black-line-height: 1.3;
+  --leu-t-medium-regular-font: var(--leu-t-medium-regular-font-size) / var(--leu-t-medium-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-50-black-spacing: 0.8125rem;
+  --leu-t-medium-black-font-size: 1.25rem;
 
-  --leu-t-50-black-font: var(--leu-t-50-black-font-size) / var(--leu-t-50-black-line-height) var(--leu-font-family-black);
+  --leu-t-medium-black-line-height: 1.3;
 
-  --leu-t-60-regular-font-size: 1.5rem;
+  --leu-t-medium-black-spacing: 0.8125rem;
 
-  --leu-t-60-regular-line-height: 1.5;
+  --leu-t-medium-black-font: var(--leu-t-medium-black-font-size) / var(--leu-t-medium-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-60-regular-spacing: 1.125rem;
+  --leu-t-large-regular-font-size: 1.5rem;
 
-  --leu-t-60-regular-font: var(--leu-t-60-regular-font-size) / var(--leu-t-60-regular-line-height) var(--leu-font-family-regular);
+  --leu-t-large-regular-line-height: 1.5;
 
-  --leu-t-60-black-font-size: 1.5rem;
+  --leu-t-large-regular-spacing: 1.125rem;
 
-  --leu-t-60-black-line-height: 1.3;
+  --leu-t-large-regular-font: var(--leu-t-large-regular-font-size) / var(--leu-t-large-regular-line-height) var(--leu-font-family-regular);
 
-  --leu-t-60-black-spacing: 0.9375rem;
+  --leu-t-large-black-font-size: 1.5rem;
 
-  --leu-t-60-black-font: var(--leu-t-60-black-font-size) / var(--leu-t-60-black-line-height) var(--leu-font-family-black);
+  --leu-t-large-black-line-height: 1.3;
 
-  --leu-t-70-black-font-size: 1.75rem;
+  --leu-t-large-black-spacing: 0.9375rem;
 
-  --leu-t-70-black-line-height: 1.2;
+  --leu-t-large-black-font: var(--leu-t-large-black-font-size) / var(--leu-t-large-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-70-black-spacing: 1.0625rem;
+  --leu-t-small-big-black-font-size: 1.75rem;
 
-  --leu-t-70-black-font: var(--leu-t-70-black-font-size) / var(--leu-t-70-black-line-height) var(--leu-font-family-black);
+  --leu-t-small-big-black-line-height: 1.2;
 
-  --leu-t-80-black-font-size: 2rem;
+  --leu-t-small-big-black-spacing: 1.0625rem;
 
-  --leu-t-80-black-line-height: 1.2;
+  --leu-t-small-big-black-font: var(--leu-t-small-big-black-font-size) / var(--leu-t-small-big-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-80-black-spacing: 1.1875rem;
+  --leu-t-big-black-font-size: 2rem;
 
-  --leu-t-80-black-font: var(--leu-t-80-black-font-size) / var(--leu-t-80-black-line-height) var(--leu-font-family-black);
+  --leu-t-big-black-line-height: 1.2;
 
-  --leu-t-100-black-font-size: 2.5rem;
+  --leu-t-big-black-spacing: 1.1875rem;
 
-  --leu-t-100-black-line-height: 1.2;
+  --leu-t-big-black-font: var(--leu-t-big-black-font-size) / var(--leu-t-big-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-100-black-spacing: 1.5rem;
+  --leu-t-bigger-big-black-font-size: 2.5rem;
 
-  --leu-t-100-black-font: var(--leu-t-100-black-font-size) / var(--leu-t-100-black-line-height) var(--leu-font-family-black);
+  --leu-t-bigger-big-black-line-height: 1.2;
 
-  --leu-t-120-black-font-size: 3rem;
+  --leu-t-bigger-big-black-spacing: 1.5rem;
 
-  --leu-t-120-black-line-height: 1;
+  --leu-t-bigger-big-black-font: var(--leu-t-bigger-big-black-font-size) / var(--leu-t-bigger-big-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-120-black-spacing: 1.5rem;
+  --leu-t-small-huge-black-font-size: 3rem;
 
-  --leu-t-120-black-font: var(--leu-t-120-black-font-size) / var(--leu-t-120-black-line-height) var(--leu-font-family-black);
+  --leu-t-small-huge-black-line-height: 1;
 
-  --leu-t-140-black-font-size: 3.5rem;
+  --leu-t-small-huge-black-spacing: 1.5rem;
 
-  --leu-t-140-black-line-height: 1;
+  --leu-t-small-huge-black-font: var(--leu-t-small-huge-black-font-size) / var(--leu-t-small-huge-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-140-black-spacing: 1.75rem;
+  --leu-t-huge-black-font-size: 3.5rem;
 
-  --leu-t-140-black-font: var(--leu-t-140-black-font-size) / var(--leu-t-140-black-line-height) var(--leu-font-family-black);
+  --leu-t-huge-black-line-height: 1;
 
-  --leu-t-180-black-font-size: 4.5rem;
+  --leu-t-huge-black-spacing: 1.75rem;
 
-  --leu-t-180-black-line-height: 1;
+  --leu-t-huge-black-font: var(--leu-t-huge-black-font-size) / var(--leu-t-huge-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-180-black-spacing: 2.25rem;
+  --leu-t-giant-black-font-size: 4.5rem;
 
-  --leu-t-180-black-font: var(--leu-t-180-black-font-size) / var(--leu-t-180-black-line-height) var(--leu-font-family-black);
+  --leu-t-giant-black-line-height: 1;
 
-  --leu-t-curve-35-black-font-size:  var(--leu-t-30-black-font-size);
+  --leu-t-giant-black-spacing: 2.25rem;
 
-  --leu-t-curve-35-black-line-height:  var(--leu-t-30-black-line-height);
+  --leu-t-giant-black-font: var(--leu-t-giant-black-font-size) / var(--leu-t-giant-black-line-height) var(--leu-font-family-black);
 
-  --leu-t-curve-35-black-spacing:  var(--leu-t-30-black-spacing);
+  --leu-t-curve-tiny-regular-font-size:  var(--leu-t-tiny-regular-font-size);
 
-  --leu-t-curve-35-black-font:  var(--leu-t-30-black-font);
+  --leu-t-curve-tiny-regular-line-height:  var(--leu-t-tiny-regular-line-height);
 
-  --leu-t-curve-45-black-font-size:  var(--leu-t-35-black-font-size);
+  --leu-t-curve-tiny-regular-spacing:  var(--leu-t-tiny-regular-spacing);
 
-  --leu-t-curve-45-black-line-height:  var(--leu-t-35-black-line-height);
+  --leu-t-curve-tiny-regular-font:  var(--leu-t-tiny-regular-font);
 
-  --leu-t-curve-45-black-spacing:  var(--leu-t-35-black-spacing);
+  --leu-t-curve-tiny-black-font-size:  var(--leu-t-tiny-black-font-size);
 
-  --leu-t-curve-45-black-font:  var(--leu-t-35-black-font);
+  --leu-t-curve-tiny-black-line-height:  var(--leu-t-tiny-black-line-height);
 
-  --leu-t-curve-50-black-font-size:  var(--leu-t-40-black-font-size);
+  --leu-t-curve-tiny-black-spacing:  var(--leu-t-tiny-black-spacing);
 
-  --leu-t-curve-50-black-line-height:  var(--leu-t-40-black-line-height);
+  --leu-t-curve-tiny-black-font:  var(--leu-t-tiny-black-font);
 
-  --leu-t-curve-50-black-spacing:  var(--leu-t-40-black-spacing);
+  --leu-t-curve-small-regular-font-size:  var(--leu-t-small-regular-font-size);
 
-  --leu-t-curve-50-black-font:  var(--leu-t-40-black-font);
+  --leu-t-curve-small-regular-line-height:  var(--leu-t-small-regular-line-height);
 
-  --leu-t-curve-60-black-font-size:  var(--leu-t-45-black-font-size);
+  --leu-t-curve-small-regular-spacing:  var(--leu-t-small-regular-spacing);
 
-  --leu-t-curve-60-black-line-height:  var(--leu-t-45-black-line-height);
+  --leu-t-curve-small-regular-font:  var(--leu-t-small-regular-font);
 
-  --leu-t-curve-60-black-spacing:  var(--leu-t-45-black-spacing);
+  --leu-t-curve-small-black-font-size:  var(--leu-t-small-black-font-size);
 
-  --leu-t-curve-60-black-font:  var(--leu-t-45-black-font);
+  --leu-t-curve-small-black-line-height:  var(--leu-t-small-black-line-height);
 
-  --leu-t-curve-70-black-font-size:  var(--leu-t-45-black-font-size);
+  --leu-t-curve-small-black-spacing:  var(--leu-t-small-black-spacing);
 
-  --leu-t-curve-70-black-line-height:  var(--leu-t-45-black-line-height);
+  --leu-t-curve-small-black-font:  var(--leu-t-small-black-font);
 
-  --leu-t-curve-70-black-spacing:  var(--leu-t-45-black-spacing);
+  --leu-t-curve-regular-regular-font-size:  var(--leu-t-regular-regular-font-size);
 
-  --leu-t-curve-70-black-font:  var(--leu-t-45-black-font);
+  --leu-t-curve-regular-regular-line-height:  var(--leu-t-regular-regular-line-height);
 
-  --leu-t-curve-80-black-font-size:  var(--leu-t-45-black-font-size);
+  --leu-t-curve-regular-regular-spacing:  var(--leu-t-regular-regular-spacing);
 
-  --leu-t-curve-80-black-line-height:  var(--leu-t-45-black-line-height);
+  --leu-t-curve-regular-regular-font:  var(--leu-t-regular-regular-font);
 
-  --leu-t-curve-80-black-spacing:  var(--leu-t-45-black-spacing);
+  --leu-t-curve-regular-black-font-size:  var(--leu-t-regular-black-font-size);
 
-  --leu-t-curve-80-black-font:  var(--leu-t-45-black-font);
+  --leu-t-curve-regular-black-line-height:  var(--leu-t-regular-black-line-height);
 
-  --leu-t-curve-120-black-font-size:  var(--leu-t-60-black-font-size);
+  --leu-t-curve-regular-black-spacing:  var(--leu-t-regular-black-spacing);
 
-  --leu-t-curve-120-black-line-height:  var(--leu-t-60-black-line-height);
+  --leu-t-curve-regular-black-font:  var(--leu-t-regular-black-font);
 
-  --leu-t-curve-120-black-spacing:  var(--leu-t-60-black-spacing);
+  --leu-t-curve-bigger-regular-regular-font-size:  var(--leu-t-bigger-regular-regular-font-size);
 
-  --leu-t-curve-120-black-font:  var(--leu-t-60-black-font);
+  --leu-t-curve-bigger-regular-regular-line-height:  var(--leu-t-bigger-regular-regular-line-height);
 
-  --leu-t-curve-180-black-font-size:  var(--leu-t-70-black-font-size);
+  --leu-t-curve-bigger-regular-regular-spacing:  var(--leu-t-bigger-regular-regular-spacing);
 
-  --leu-t-curve-180-black-line-height:  var(--leu-t-70-black-line-height);
+  --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-bigger-regular-regular-font);
 
-  --leu-t-curve-180-black-spacing:  var(--leu-t-70-black-spacing);
+  --leu-t-curve-bigger-regular-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
 
-  --leu-t-curve-180-black-font:  var(--leu-t-70-black-font);
+  --leu-t-curve-bigger-regular-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-bigger-regular-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-bigger-regular-black-font:  var(--leu-t-bigger-regular-black-font);
+
+  --leu-t-curve-medium-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+
+  --leu-t-curve-medium-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-medium-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-medium-black-font:  var(--leu-t-bigger-regular-black-font);
+
+  --leu-t-curve-large-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+
+  --leu-t-curve-large-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+
+  --leu-t-curve-large-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+
+  --leu-t-curve-large-black-font:  var(--leu-t-bigger-regular-black-font);
+
+  --leu-t-curve-big-black-font-size:  var(--leu-t-large-black-font-size);
+
+  --leu-t-curve-big-black-line-height:  var(--leu-t-large-black-line-height);
+
+  --leu-t-curve-big-black-spacing:  var(--leu-t-large-black-spacing);
+
+  --leu-t-curve-big-black-font:  var(--leu-t-large-black-font);
+
+  --leu-t-curve-huge-black-font-size:  var(--leu-t-small-big-black-font-size);
+
+  --leu-t-curve-huge-black-line-height:  var(--leu-t-small-big-black-line-height);
+
+  --leu-t-curve-huge-black-spacing:  var(--leu-t-small-big-black-spacing);
+
+  --leu-t-curve-huge-black-font:  var(--leu-t-small-big-black-font);
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-35-black-font-size:  var(--leu-t-35-black-font-size);
-    --leu-t-curve-35-black-line-height:  var(--leu-t-35-black-line-height);
-    --leu-t-curve-35-black-spacing:  var(--leu-t-35-black-spacing);
-    --leu-t-curve-35-black-font:  var(--leu-t-35-black-font);
+  :root,
+:host {
+    --leu-t-curve-tiny-regular-font-size:  var(--leu-t-small-regular-font-size);
+    --leu-t-curve-tiny-regular-line-height:  var(--leu-t-small-regular-line-height);
+    --leu-t-curve-tiny-regular-spacing:  var(--leu-t-small-regular-spacing);
+    --leu-t-curve-tiny-regular-font:  var(--leu-t-small-regular-font);
 }
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-45-black-font-size:  var(--leu-t-40-black-font-size);
-    --leu-t-curve-45-black-line-height:  var(--leu-t-40-black-line-height);
-    --leu-t-curve-45-black-spacing:  var(--leu-t-40-black-spacing);
-    --leu-t-curve-45-black-font:  var(--leu-t-40-black-font);
+  :root,
+:host {
+    --leu-t-curve-tiny-black-font-size:  var(--leu-t-small-black-font-size);
+    --leu-t-curve-tiny-black-line-height:  var(--leu-t-small-black-line-height);
+    --leu-t-curve-tiny-black-spacing:  var(--leu-t-small-black-spacing);
+    --leu-t-curve-tiny-black-font:  var(--leu-t-small-black-font);
+}
+}
+@media (min-width: 600px) {
+  :root,
+:host {
+    --leu-t-curve-small-regular-font-size:  var(--leu-t-regular-regular-font-size);
+    --leu-t-curve-small-regular-line-height:  var(--leu-t-regular-regular-line-height);
+    --leu-t-curve-small-regular-spacing:  var(--leu-t-regular-regular-spacing);
+    --leu-t-curve-small-regular-font:  var(--leu-t-regular-regular-font);
 }
 }
 @media (min-width: 1024px) {
-  :root {
-    --leu-t-curve-45-black-font-size:  var(--leu-t-45-black-font-size);
-    --leu-t-curve-45-black-line-height:  var(--leu-t-45-black-line-height);
-    --leu-t-curve-45-black-spacing:  var(--leu-t-45-black-spacing);
-    --leu-t-curve-45-black-font:  var(--leu-t-45-black-font);
+  :root,
+:host {
+    --leu-t-curve-small-regular-font-size:  var(--leu-t-bigger-regular-regular-font-size);
+    --leu-t-curve-small-regular-line-height:  var(--leu-t-bigger-regular-regular-line-height);
+    --leu-t-curve-small-regular-spacing:  var(--leu-t-bigger-regular-regular-spacing);
+    --leu-t-curve-small-regular-font:  var(--leu-t-bigger-regular-regular-font);
+}
+}
+@media (min-width: 600px) {
+  :root,
+:host {
+    --leu-t-curve-small-black-font-size:  var(--leu-t-regular-black-font-size);
+    --leu-t-curve-small-black-line-height:  var(--leu-t-regular-black-line-height);
+    --leu-t-curve-small-black-spacing:  var(--leu-t-regular-black-spacing);
+    --leu-t-curve-small-black-font:  var(--leu-t-regular-black-font);
+}
+}
+@media (min-width: 1024px) {
+  :root,
+:host {
+    --leu-t-curve-small-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+    --leu-t-curve-small-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+    --leu-t-curve-small-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+    --leu-t-curve-small-black-font:  var(--leu-t-bigger-regular-black-font);
+}
+}
+@media (min-width: 400px) {
+  :root,
+:host {
+    --leu-t-curve-regular-regular-font-size:  var(--leu-t-bigger-regular-regular-font-size);
+    --leu-t-curve-regular-regular-line-height:  var(--leu-t-bigger-regular-regular-line-height);
+    --leu-t-curve-regular-regular-spacing:  var(--leu-t-bigger-regular-regular-spacing);
+    --leu-t-curve-regular-regular-font:  var(--leu-t-bigger-regular-regular-font);
+}
+}
+@media (min-width: 1280px) {
+  :root,
+:host {
+    --leu-t-curve-regular-regular-font-size:  var(--leu-t-medium-regular-font-size);
+    --leu-t-curve-regular-regular-line-height:  var(--leu-t-medium-regular-line-height);
+    --leu-t-curve-regular-regular-spacing:  var(--leu-t-medium-regular-spacing);
+    --leu-t-curve-regular-regular-font:  var(--leu-t-medium-regular-font);
 }
 }
 @media (min-width: 400px) {
-  :root {
-    --leu-t-curve-50-black-font-size:  var(--leu-t-45-black-font-size);
-    --leu-t-curve-50-black-line-height:  var(--leu-t-45-black-line-height);
-    --leu-t-curve-50-black-spacing:  var(--leu-t-45-black-spacing);
-    --leu-t-curve-50-black-font:  var(--leu-t-45-black-font);
+  :root,
+:host {
+    --leu-t-curve-regular-black-font-size:  var(--leu-t-bigger-regular-black-font-size);
+    --leu-t-curve-regular-black-line-height:  var(--leu-t-bigger-regular-black-line-height);
+    --leu-t-curve-regular-black-spacing:  var(--leu-t-bigger-regular-black-spacing);
+    --leu-t-curve-regular-black-font:  var(--leu-t-bigger-regular-black-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-50-black-font-size:  var(--leu-t-50-black-font-size);
-    --leu-t-curve-50-black-line-height:  var(--leu-t-50-black-line-height);
-    --leu-t-curve-50-black-spacing:  var(--leu-t-50-black-spacing);
-    --leu-t-curve-50-black-font:  var(--leu-t-50-black-font);
+  :root,
+:host {
+    --leu-t-curve-regular-black-font-size:  var(--leu-t-medium-black-font-size);
+    --leu-t-curve-regular-black-line-height:  var(--leu-t-medium-black-line-height);
+    --leu-t-curve-regular-black-spacing:  var(--leu-t-medium-black-spacing);
+    --leu-t-curve-regular-black-font:  var(--leu-t-medium-black-font);
 }
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-60-black-font-size:  var(--leu-t-50-black-font-size);
-    --leu-t-curve-60-black-line-height:  var(--leu-t-50-black-line-height);
-    --leu-t-curve-60-black-spacing:  var(--leu-t-50-black-spacing);
-    --leu-t-curve-60-black-font:  var(--leu-t-50-black-font);
+  :root,
+:host {
+    --leu-t-curve-bigger-regular-regular-font-size:  var(--leu-t-medium-regular-font-size);
+    --leu-t-curve-bigger-regular-regular-line-height:  var(--leu-t-medium-regular-line-height);
+    --leu-t-curve-bigger-regular-regular-spacing:  var(--leu-t-medium-regular-spacing);
+    --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-medium-regular-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-60-black-font-size:  var(--leu-t-60-black-font-size);
-    --leu-t-curve-60-black-line-height:  var(--leu-t-60-black-line-height);
-    --leu-t-curve-60-black-spacing:  var(--leu-t-60-black-spacing);
-    --leu-t-curve-60-black-font:  var(--leu-t-60-black-font);
+  :root,
+:host {
+    --leu-t-curve-bigger-regular-regular-font-size:  var(--leu-t-large-regular-font-size);
+    --leu-t-curve-bigger-regular-regular-line-height:  var(--leu-t-large-regular-line-height);
+    --leu-t-curve-bigger-regular-regular-spacing:  var(--leu-t-large-regular-spacing);
+    --leu-t-curve-bigger-regular-regular-font:  var(--leu-t-large-regular-font);
+}
+}
+@media (min-width: 600px) {
+  :root,
+:host {
+    --leu-t-curve-bigger-regular-black-font-size:  var(--leu-t-medium-black-font-size);
+    --leu-t-curve-bigger-regular-black-line-height:  var(--leu-t-medium-black-line-height);
+    --leu-t-curve-bigger-regular-black-spacing:  var(--leu-t-medium-black-spacing);
+    --leu-t-curve-bigger-regular-black-font:  var(--leu-t-medium-black-font);
+}
+}
+@media (min-width: 1280px) {
+  :root,
+:host {
+    --leu-t-curve-bigger-regular-black-font-size:  var(--leu-t-large-black-font-size);
+    --leu-t-curve-bigger-regular-black-line-height:  var(--leu-t-large-black-line-height);
+    --leu-t-curve-bigger-regular-black-spacing:  var(--leu-t-large-black-spacing);
+    --leu-t-curve-bigger-regular-black-font:  var(--leu-t-large-black-font);
 }
 }
 @media (min-width: 400px) {
-  :root {
-    --leu-t-curve-70-black-font-size:  var(--leu-t-50-black-font-size);
-    --leu-t-curve-70-black-line-height:  var(--leu-t-50-black-line-height);
-    --leu-t-curve-70-black-spacing:  var(--leu-t-50-black-spacing);
-    --leu-t-curve-70-black-font:  var(--leu-t-50-black-font);
+  :root,
+:host {
+    --leu-t-curve-medium-black-font-size:  var(--leu-t-medium-black-font-size);
+    --leu-t-curve-medium-black-line-height:  var(--leu-t-medium-black-line-height);
+    --leu-t-curve-medium-black-spacing:  var(--leu-t-medium-black-spacing);
+    --leu-t-curve-medium-black-font:  var(--leu-t-medium-black-font);
 }
 }
 @media (min-width: 1024px) {
-  :root {
-    --leu-t-curve-70-black-font-size:  var(--leu-t-60-black-font-size);
-    --leu-t-curve-70-black-line-height:  var(--leu-t-60-black-line-height);
-    --leu-t-curve-70-black-spacing:  var(--leu-t-60-black-spacing);
-    --leu-t-curve-70-black-font:  var(--leu-t-60-black-font);
+  :root,
+:host {
+    --leu-t-curve-medium-black-font-size:  var(--leu-t-large-black-font-size);
+    --leu-t-curve-medium-black-line-height:  var(--leu-t-large-black-line-height);
+    --leu-t-curve-medium-black-spacing:  var(--leu-t-large-black-spacing);
+    --leu-t-curve-medium-black-font:  var(--leu-t-large-black-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-70-black-font-size:  var(--leu-t-70-black-font-size);
-    --leu-t-curve-70-black-line-height:  var(--leu-t-70-black-line-height);
-    --leu-t-curve-70-black-spacing:  var(--leu-t-70-black-spacing);
-    --leu-t-curve-70-black-font:  var(--leu-t-70-black-font);
+  :root,
+:host {
+    --leu-t-curve-medium-black-font-size:  var(--leu-t-small-big-black-font-size);
+    --leu-t-curve-medium-black-line-height:  var(--leu-t-small-big-black-line-height);
+    --leu-t-curve-medium-black-spacing:  var(--leu-t-small-big-black-spacing);
+    --leu-t-curve-medium-black-font:  var(--leu-t-small-big-black-font);
 }
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-80-black-font-size:  var(--leu-t-60-black-font-size);
-    --leu-t-curve-80-black-line-height:  var(--leu-t-60-black-line-height);
-    --leu-t-curve-80-black-spacing:  var(--leu-t-60-black-spacing);
-    --leu-t-curve-80-black-font:  var(--leu-t-60-black-font);
+  :root,
+:host {
+    --leu-t-curve-large-black-font-size:  var(--leu-t-large-black-font-size);
+    --leu-t-curve-large-black-line-height:  var(--leu-t-large-black-line-height);
+    --leu-t-curve-large-black-spacing:  var(--leu-t-large-black-spacing);
+    --leu-t-curve-large-black-font:  var(--leu-t-large-black-font);
 }
 }
 @media (min-width: 1024px) {
-  :root {
-    --leu-t-curve-80-black-font-size:  var(--leu-t-70-black-font-size);
-    --leu-t-curve-80-black-line-height:  var(--leu-t-70-black-line-height);
-    --leu-t-curve-80-black-spacing:  var(--leu-t-70-black-spacing);
-    --leu-t-curve-80-black-font:  var(--leu-t-70-black-font);
+  :root,
+:host {
+    --leu-t-curve-large-black-font-size:  var(--leu-t-small-big-black-font-size);
+    --leu-t-curve-large-black-line-height:  var(--leu-t-small-big-black-line-height);
+    --leu-t-curve-large-black-spacing:  var(--leu-t-small-big-black-spacing);
+    --leu-t-curve-large-black-font:  var(--leu-t-small-big-black-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-80-black-font-size:  var(--leu-t-80-black-font-size);
-    --leu-t-curve-80-black-line-height:  var(--leu-t-80-black-line-height);
-    --leu-t-curve-80-black-spacing:  var(--leu-t-80-black-spacing);
-    --leu-t-curve-80-black-font:  var(--leu-t-80-black-font);
+  :root,
+:host {
+    --leu-t-curve-large-black-font-size:  var(--leu-t-big-black-font-size);
+    --leu-t-curve-large-black-line-height:  var(--leu-t-big-black-line-height);
+    --leu-t-curve-large-black-spacing:  var(--leu-t-big-black-spacing);
+    --leu-t-curve-large-black-font:  var(--leu-t-big-black-font);
 }
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-120-black-font-size:  var(--leu-t-70-black-font-size);
-    --leu-t-curve-120-black-line-height:  var(--leu-t-70-black-line-height);
-    --leu-t-curve-120-black-spacing:  var(--leu-t-70-black-spacing);
-    --leu-t-curve-120-black-font:  var(--leu-t-70-black-font);
+  :root,
+:host {
+    --leu-t-curve-big-black-font-size:  var(--leu-t-small-big-black-font-size);
+    --leu-t-curve-big-black-line-height:  var(--leu-t-small-big-black-line-height);
+    --leu-t-curve-big-black-spacing:  var(--leu-t-small-big-black-spacing);
+    --leu-t-curve-big-black-font:  var(--leu-t-small-big-black-font);
 }
 }
 @media (min-width: 840px) {
-  :root {
-    --leu-t-curve-120-black-font-size:  var(--leu-t-80-black-font-size);
-    --leu-t-curve-120-black-line-height:  var(--leu-t-80-black-line-height);
-    --leu-t-curve-120-black-spacing:  var(--leu-t-80-black-spacing);
-    --leu-t-curve-120-black-font:  var(--leu-t-80-black-font);
+  :root,
+:host {
+    --leu-t-curve-big-black-font-size:  var(--leu-t-big-black-font-size);
+    --leu-t-curve-big-black-line-height:  var(--leu-t-big-black-line-height);
+    --leu-t-curve-big-black-spacing:  var(--leu-t-big-black-spacing);
+    --leu-t-curve-big-black-font:  var(--leu-t-big-black-font);
 }
 }
 @media (min-width: 1024px) {
-  :root {
-    --leu-t-curve-120-black-font-size:  var(--leu-t-100-black-font-size);
-    --leu-t-curve-120-black-line-height:  var(--leu-t-100-black-line-height);
-    --leu-t-curve-120-black-spacing:  var(--leu-t-100-black-spacing);
-    --leu-t-curve-120-black-font:  var(--leu-t-100-black-font);
+  :root,
+:host {
+    --leu-t-curve-big-black-font-size:  var(--leu-t-bigger-big-black-font-size);
+    --leu-t-curve-big-black-line-height:  var(--leu-t-bigger-big-black-line-height);
+    --leu-t-curve-big-black-spacing:  var(--leu-t-bigger-big-black-spacing);
+    --leu-t-curve-big-black-font:  var(--leu-t-bigger-big-black-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-120-black-font-size:  var(--leu-t-120-black-font-size);
-    --leu-t-curve-120-black-line-height:  var(--leu-t-120-black-line-height);
-    --leu-t-curve-120-black-spacing:  var(--leu-t-120-black-spacing);
-    --leu-t-curve-120-black-font:  var(--leu-t-120-black-font);
+  :root,
+:host {
+    --leu-t-curve-big-black-font-size:  var(--leu-t-small-huge-black-font-size);
+    --leu-t-curve-big-black-line-height:  var(--leu-t-small-huge-black-line-height);
+    --leu-t-curve-big-black-spacing:  var(--leu-t-small-huge-black-spacing);
+    --leu-t-curve-big-black-font:  var(--leu-t-small-huge-black-font);
 }
 }
 @media (min-width: 400px) {
-  :root {
-    --leu-t-curve-180-black-font-size:  var(--leu-t-80-black-font-size);
-    --leu-t-curve-180-black-line-height:  var(--leu-t-80-black-line-height);
-    --leu-t-curve-180-black-spacing:  var(--leu-t-80-black-spacing);
-    --leu-t-curve-180-black-font:  var(--leu-t-80-black-font);
+  :root,
+:host {
+    --leu-t-curve-huge-black-font-size:  var(--leu-t-big-black-font-size);
+    --leu-t-curve-huge-black-line-height:  var(--leu-t-big-black-line-height);
+    --leu-t-curve-huge-black-spacing:  var(--leu-t-big-black-spacing);
+    --leu-t-curve-huge-black-font:  var(--leu-t-big-black-font);
 }
 }
 @media (min-width: 600px) {
-  :root {
-    --leu-t-curve-180-black-font-size:  var(--leu-t-100-black-font-size);
-    --leu-t-curve-180-black-line-height:  var(--leu-t-100-black-line-height);
-    --leu-t-curve-180-black-spacing:  var(--leu-t-100-black-spacing);
-    --leu-t-curve-180-black-font:  var(--leu-t-100-black-font);
+  :root,
+:host {
+    --leu-t-curve-huge-black-font-size:  var(--leu-t-bigger-big-black-font-size);
+    --leu-t-curve-huge-black-line-height:  var(--leu-t-bigger-big-black-line-height);
+    --leu-t-curve-huge-black-spacing:  var(--leu-t-bigger-big-black-spacing);
+    --leu-t-curve-huge-black-font:  var(--leu-t-bigger-big-black-font);
 }
 }
 @media (min-width: 840px) {
-  :root {
-    --leu-t-curve-180-black-font-size:  var(--leu-t-120-black-font-size);
-    --leu-t-curve-180-black-line-height:  var(--leu-t-120-black-line-height);
-    --leu-t-curve-180-black-spacing:  var(--leu-t-120-black-spacing);
-    --leu-t-curve-180-black-font:  var(--leu-t-120-black-font);
+  :root,
+:host {
+    --leu-t-curve-huge-black-font-size:  var(--leu-t-small-huge-black-font-size);
+    --leu-t-curve-huge-black-line-height:  var(--leu-t-small-huge-black-line-height);
+    --leu-t-curve-huge-black-spacing:  var(--leu-t-small-huge-black-spacing);
+    --leu-t-curve-huge-black-font:  var(--leu-t-small-huge-black-font);
 }
 }
 @media (min-width: 1024px) {
-  :root {
-    --leu-t-curve-180-black-font-size:  var(--leu-t-140-black-font-size);
-    --leu-t-curve-180-black-line-height:  var(--leu-t-140-black-line-height);
-    --leu-t-curve-180-black-spacing:  var(--leu-t-140-black-spacing);
-    --leu-t-curve-180-black-font:  var(--leu-t-140-black-font);
+  :root,
+:host {
+    --leu-t-curve-huge-black-font-size:  var(--leu-t-huge-black-font-size);
+    --leu-t-curve-huge-black-line-height:  var(--leu-t-huge-black-line-height);
+    --leu-t-curve-huge-black-spacing:  var(--leu-t-huge-black-spacing);
+    --leu-t-curve-huge-black-font:  var(--leu-t-huge-black-font);
 }
 }
 @media (min-width: 1280px) {
-  :root {
-    --leu-t-curve-180-black-font-size:  var(--leu-t-180-black-font-size);
-    --leu-t-curve-180-black-line-height:  var(--leu-t-180-black-line-height);
-    --leu-t-curve-180-black-spacing:  var(--leu-t-180-black-spacing);
-    --leu-t-curve-180-black-font:  var(--leu-t-180-black-font);
+  :root,
+:host {
+    --leu-t-curve-huge-black-font-size:  var(--leu-t-giant-black-font-size);
+    --leu-t-curve-huge-black-line-height:  var(--leu-t-giant-black-line-height);
+    --leu-t-curve-huge-black-spacing:  var(--leu-t-giant-black-spacing);
+    --leu-t-curve-huge-black-font:  var(--leu-t-giant-black-font);
+}
 }
+@media (min-width: 600px) {
+  :root,
+:host {
+    --leu-grid-columns-offset: 3 / -1;
+}
+  }
+@media (min-width: 840px) {
+  :root,
+:host {
+    --leu-grid-gap: 2rem;
 }
+  }