@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/grid.css

@@ -0,0 +1,545 @@
+/* ========================================================================
+   Component: Grid
+ ========================================================================== */
+/*
+ * 1. Allow cells to wrap into the next line
+ * 2. Reset list
+ * 3. Horizontal gutter
+ * 4. Vertical gutter
+ */
+.uk-grid {
+  display: flex;
+  flex-wrap: wrap; /* 1 */
+  list-style: none; /* 2 */
+  margin-left: calc(var(--grid-gutter-horizontal) * -1); /* 3 */
+  padding: 0;
+  row-gap: var(--grid-gutter-vertical); /* 4 */
+}
+
+/*
+ * Grid cell
+ * 1. Horizontal gutter
+ * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
+ * Reset margin for e.g. paragraphs
+ */
+.uk-grid > * {
+  margin: 0;
+  /* 1 */
+  padding-left: var(--grid-gutter-horizontal);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-grid > * > :last-child {
+  margin-bottom: 0;
+}
+
+/* Gutter
+ ========================================================================== */
+/*
+ * Default
+ */
+/* Vertical */
+.uk-grid + .uk-grid,
+* + .uk-grid-margin {
+  margin-top: var(--grid-gutter-vertical);
+}
+
+.uk-grid > .uk-grid-margin {
+  margin-top: 0;
+}
+
+/* Phones portrait and smaller */
+@media (max-width: 639px) {
+  /* Horizontal */
+  .uk-grid {
+    margin-left: calc(var(--grid-gutter-horizontal-s) * -1);
+    row-gap: var(--grid-gutter-vertical-s);
+  }
+  .uk-grid > * {
+    padding-left: var(--grid-gutter-horizontal-s);
+  }
+  /* Vertical */
+  .uk-grid + .uk-grid,
+  * + .uk-grid-margin {
+    margin-top: var(--grid-gutter-vertical-s);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  /* Horizontal */
+  .uk-grid {
+    margin-left: calc(var(--grid-gutter-horizontal-m) * -1);
+    row-gap: var(--grid-gutter-vertical-m);
+  }
+  .uk-grid > * {
+    padding-left: var(--grid-gutter-horizontal-m);
+  }
+  /* Vertical */
+  .uk-grid + .uk-grid,
+  * + .uk-grid-margin {
+    margin-top: var(--grid-gutter-vertical-m);
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  /* Horizontal */
+  .uk-grid {
+    margin-left: calc(var(--grid-gutter-horizontal-l) * -1);
+    row-gap: var(--grid-gutter-vertical-l);
+  }
+  .uk-grid > * {
+    padding-left: var(--grid-gutter-horizontal-l);
+  }
+  /* Vertical */
+  .uk-grid + .uk-grid,
+  * + .uk-grid-margin {
+    margin-top: var(--grid-gutter-vertical-l);
+  }
+}
+/*
+ * XSmall
+ */
+/* Horizontal */
+.uk-grid-xsmall,
+.uk-grid-column-xsmall {
+  margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -1);
+}
+
+.uk-grid-xsmall,
+.uk-grid-row-xsmall {
+  row-gap: var(--grid-xsmall-gutter-vertical);
+}
+
+.uk-grid-xsmall > *,
+.uk-grid-column-xsmall > * {
+  padding-left: var(--grid-xsmall-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-xsmall,
+.uk-grid + .uk-grid-row-xsmall,
+* + .uk-grid-margin-xsmall {
+  margin-top: var(--grid-xsmall-gutter-vertical);
+}
+
+/*
+ * Small
+ */
+/* Horizontal */
+.uk-grid-small,
+.uk-grid-column-small {
+  margin-left: calc(var(--grid-small-gutter-horizontal) * -1);
+}
+
+.uk-grid-small,
+.uk-grid-row-small {
+  row-gap: var(--grid-small-gutter-vertical);
+}
+
+.uk-grid-small > *,
+.uk-grid-column-small > * {
+  padding-left: var(--grid-small-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-small,
+.uk-grid + .uk-grid-row-small,
+* + .uk-grid-margin-small {
+  margin-top: var(--grid-small-gutter-vertical);
+}
+
+/*
+ * Medium
+ */
+/* Horizontal */
+.uk-grid-medium,
+.uk-grid-column-medium {
+  margin-left: calc(var(--grid-medium-gutter-horizontal) * -1);
+}
+
+.uk-grid-medium,
+.uk-grid-row-medium {
+  row-gap: var(--grid-medium-gutter-vertical);
+}
+
+.uk-grid-medium > *,
+.uk-grid-column-medium > * {
+  padding-left: var(--grid-medium-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-medium,
+.uk-grid + .uk-grid-row-medium,
+* + .uk-grid-margin-medium {
+  margin-top: var(--grid-medium-gutter-vertical);
+}
+
+/*
+ * Large
+ */
+/* Horizontal */
+.uk-grid-large,
+.uk-grid-column-large {
+  margin-left: calc(var(--grid-large-gutter-horizontal) * -1);
+}
+
+.uk-grid-large,
+.uk-grid-row-large {
+  row-gap: var(--grid-large-gutter-vertical);
+}
+
+.uk-grid-large > *,
+.uk-grid-column-large > * {
+  padding-left: var(--grid-large-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-large,
+.uk-grid + .uk-grid-row-large,
+* + .uk-grid-margin-large {
+  margin-top: var(--grid-large-gutter-vertical);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  /* Horizontal */
+  .uk-grid-large,
+  .uk-grid-column-large {
+    margin-left: calc(var(--grid-large-gutter-horizontal-l) * -1);
+  }
+  .uk-grid-large,
+  .uk-grid-row-large {
+    row-gap: var(--grid-large-gutter-vertical-l);
+  }
+  .uk-grid-large > *,
+  .uk-grid-column-large > * {
+    padding-left: var(--grid-large-gutter-horizontal-l);
+  }
+  /* Vertical */
+  .uk-grid + .uk-grid-large,
+  .uk-grid + .uk-grid-row-large,
+  * + .uk-grid-margin-large {
+    margin-top: var(--grid-large-gutter-vertical-l);
+  }
+}
+/*
+ * Collapse
+ */
+/* Horizontal */
+.uk-grid-collapse,
+.uk-grid-column-collapse {
+  margin-left: 0;
+}
+
+.uk-grid-collapse,
+.uk-grid-row-collapse {
+  row-gap: 0;
+}
+
+.uk-grid-collapse > *,
+.uk-grid-column-collapse > * {
+  padding-left: 0;
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-collapse,
+.uk-grid + .uk-grid-row-collapse {
+  margin-top: 0;
+}
+
+/* Match child of a grid cell
+ ========================================================================== */
+/*
+ * Behave like a block element
+ * 1. Wrap into the next line
+ * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
+ * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
+ */
+.uk-grid-match > *,
+.uk-grid-item-match {
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+}
+
+.uk-grid-match > * > :not([class*=uk-width]),
+.uk-grid-item-match > :not([class*=uk-width]) {
+  /* 2 */
+  box-sizing: border-box;
+  /* 3 */
+  flex: auto;
+  width: 100%;
+}
+
+/* Divider
+ ========================================================================== */
+.uk-grid-divider > * {
+  padding-left: calc(var(--grid-gutter-horizontal) * 2);
+  position: relative;
+}
+
+.uk-grid-divider > :not(.uk-first-column)::before {
+  border-left: var(--grid-divider-border-width) solid var(--grid-divider-border);
+  bottom: 0;
+  content: "";
+  left: var(--grid-gutter-horizontal);
+  position: absolute;
+  top: 0;
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+  border-top: var(--grid-divider-border-width) solid var(--grid-divider-border);
+  content: "";
+  left: calc(var(--grid-gutter-horizontal) * 2);
+  position: absolute;
+  right: 0;
+  top: calc(var(--grid-gutter-vertical) * -1);
+}
+
+/*
+ * Default
+ */
+.uk-grid-divider.uk-grid-stack {
+  row-gap: unset;
+}
+
+/* Horizontal */
+.uk-grid-divider {
+  margin-left: calc(var(--grid-gutter-horizontal) * -2);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
+  margin-top: calc(var(--grid-gutter-vertical) * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  /* Horizontal */
+  .uk-grid-divider {
+    margin-left: calc(var(--grid-gutter-horizontal-l) * -2);
+  }
+  .uk-grid-divider > * {
+    padding-left: calc(var(--grid-gutter-horizontal-l) * 2);
+  }
+  .uk-grid-divider > :not(.uk-first-column)::before {
+    left: var(--grid-gutter-horizontal-l);
+  }
+  /* Vertical */
+  .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-gutter-vertical-l) * 2);
+  }
+  .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-gutter-horizontal-l) * 2);
+    top: calc(var(--grid-gutter-vertical-l) * -1);
+  }
+}
+/*
+ * Xsmall
+ */
+/* Horizontal */
+.uk-grid-divider.uk-grid-xsmall,
+.uk-grid-divider.uk-grid-column-xsmall {
+  margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-xsmall > *,
+.uk-grid-divider.uk-grid-column-xsmall > * {
+  padding-left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-xsmall > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-xsmall > :not(.uk-first-column)::before {
+  left: var(--grid-xsmall-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin {
+  margin-top: calc(var(--grid-xsmall-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+  top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin::before {
+  top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-xsmall.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+}
+
+/*
+ * Small
+ */
+/* Horizontal */
+.uk-grid-divider.uk-grid-small,
+.uk-grid-divider.uk-grid-column-small {
+  margin-left: calc(var(--grid-small-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-small > *,
+.uk-grid-divider.uk-grid-column-small > * {
+  padding-left: calc(var(--grid-small-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
+  left: var(--grid-small-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
+  margin-top: calc(var(--grid-small-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-small-gutter-horizontal) * 2);
+  top: calc(var(--grid-small-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
+  top: calc(var(--grid-small-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-small-gutter-horizontal) * 2);
+}
+
+/*
+ * Medium
+ */
+/* Horizontal */
+.uk-grid-divider.uk-grid-medium,
+.uk-grid-divider.uk-grid-column-medium {
+  margin-left: calc(var(--grid-medium-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-medium > *,
+.uk-grid-divider.uk-grid-column-medium > * {
+  padding-left: calc(var(--grid-medium-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
+  left: var(--grid-medium-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
+  margin-top: calc(var(--grid-medium-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-medium-gutter-horizontal) * 2);
+  top: calc(var(--grid-medium-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
+  top: calc(var(--grid-medium-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-medium-gutter-horizontal) * 2);
+}
+
+/*
+ * Large
+ */
+/* Horizontal */
+.uk-grid-divider.uk-grid-large,
+.uk-grid-divider.uk-grid-column-large {
+  margin-left: calc(var(--grid-large-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-large > *,
+.uk-grid-divider.uk-grid-column-large > * {
+  padding-left: calc(var(--grid-large-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
+  left: var(--grid-large-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
+  margin-top: calc(var(--grid-large-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-large-gutter-horizontal) * 2);
+  top: calc(var(--grid-large-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
+  top: calc(var(--grid-large-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
+  left: calc(var(--grid-large-gutter-horizontal) * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  /* Horizontal */
+  .uk-grid-divider.uk-grid-large,
+  .uk-grid-divider.uk-grid-column-large {
+    margin-left: calc(var(--grid-large-gutter-horizontal-l) * -2);
+  }
+  .uk-grid-divider.uk-grid-large > *,
+  .uk-grid-divider.uk-grid-column-large > * {
+    padding-left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+  }
+  .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
+  .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
+    left: var(--grid-large-gutter-horizontal-l);
+  }
+  /* Vertical */
+  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
+  .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-large-gutter-vertical-l) * 2);
+  }
+  .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+    top: calc(var(--grid-large-gutter-vertical-l) * -1);
+  }
+  .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
+    top: calc(var(--grid-large-gutter-vertical-l) * -1);
+  }
+  .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+  }
+}
+:root {
+  --grid-gutter-horizontal: var(--global-gutter);
+  --grid-gutter-vertical: var(--grid-gutter-horizontal);
+  --grid-gutter-horizontal-s: var(--global-small-gutter);
+  --grid-gutter-vertical-s: var(--grid-gutter-horizontal-s);
+  --grid-gutter-horizontal-m: var(--global-medium-gutter);
+  --grid-gutter-vertical-m: var(--grid-gutter-horizontal-m);
+  --grid-gutter-horizontal-l: var(--global-large-gutter);
+  --grid-gutter-vertical-l: var(--grid-gutter-horizontal-l);
+  --grid-xsmall-gutter-horizontal: var(--global-xsmall-gutter);
+  --grid-xsmall-gutter-vertical: var(--grid-xsmall-gutter-horizontal);
+  --grid-small-gutter-horizontal: var(--global-small-gutter);
+  --grid-small-gutter-vertical: var(--grid-small-gutter-horizontal);
+  --grid-medium-gutter-horizontal: var(--global-medium-gutter);
+  --grid-medium-gutter-vertical: var(--grid-medium-gutter-horizontal);
+  --grid-large-gutter-horizontal: var(--global-large-gutter);
+  --grid-large-gutter-vertical: var(--grid-large-gutter-horizontal);
+  --grid-large-gutter-horizontal-l: var(--global-xlarge-gutter);
+  --grid-large-gutter-vertical-l: var(--grid-large-gutter-horizontal-l);
+  --grid-divider-border-width: var(--global-border-width);
+  --grid-divider-border: var(--global-border);
+  --inverse-grid-divider-border: var(--inverse-global-border);
+}

package/dist/assets/heading.css

@@ -0,0 +1,175 @@
+/* ========================================================================
+   Component: Heading
+ ========================================================================== */
+.uk-heading-small {
+  font-size: var(--heading-small-font-size);
+  line-height: var(--heading-small-line-height);
+}
+
+.uk-heading-medium {
+  font-size: var(--heading-medium-font-size);
+  line-height: var(--heading-medium-line-height);
+}
+
+.uk-heading-large {
+  font-size: var(--heading-large-font-size);
+  line-height: var(--heading-large-line-height);
+}
+
+.uk-heading-xlarge {
+  font-size: var(--heading-xlarge-font-size);
+  line-height: var(--heading-xlarge-line-height);
+}
+
+.uk-heading-2xlarge {
+  font-size: var(--heading-2xlarge-font-size);
+  line-height: var(--heading-2xlarge-line-height);
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: 960px) {
+  .uk-heading-small {
+    font-size: var(--heading-small-font-size-m);
+  }
+  .uk-heading-medium {
+    font-size: var(--heading-medium-font-size-m);
+  }
+  .uk-heading-large {
+    font-size: var(--heading-large-font-size-m);
+  }
+  .uk-heading-xlarge {
+    font-size: var(--heading-xlarge-font-size-m);
+  }
+  .uk-heading-2xlarge {
+    font-size: var(--heading-2xlarge-font-size-m);
+  }
+}
+/* Laptop and bigger */
+@media (min-width: 1200px) {
+  .uk-heading-medium {
+    font-size: var(--heading-medium-font-size-l);
+  }
+  .uk-heading-large {
+    font-size: var(--heading-large-font-size-l);
+  }
+  .uk-heading-xlarge {
+    font-size: var(--heading-xlarge-font-size-l);
+  }
+  .uk-heading-2xlarge {
+    font-size: var(--heading-2xlarge-font-size-l);
+  }
+}
+/* Divider
+ ========================================================================== */
+.uk-heading-divider {
+  border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
+  padding-bottom: var(--heading-divider-padding-bottom);
+}
+
+/* Bullet
+ ========================================================================== */
+.uk-heading-bullet {
+  position: relative;
+}
+
+/*
+ * 1. Using `inline-block` to make it work with text alignment
+ * 2. Center vertically
+ * 3. Style
+ */
+.uk-heading-bullet::before {
+  border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
+  content: "";
+  /* 1 */
+  display: inline-block;
+  /* 3 */
+  height: var(--heading-bullet-height);
+  margin-right: var(--heading-bullet-margin-right);
+  /* 2 */
+  position: relative;
+  top: var(--heading-bullet-top);
+  vertical-align: middle;
+}
+
+/* Line
+ ========================================================================== */
+/*
+ * Clip the child element
+ */
+.uk-heading-line {
+  overflow: hidden;
+}
+
+/*
+ * Extra markup is needed to make it work with text align
+ */
+.uk-heading-line > * {
+  display: inline-block;
+  position: relative;
+}
+
+/*
+ * 1. Center vertically
+ * 2. Make the element as large as possible. It's clipped by the container.
+ * 3. Style
+ */
+.uk-heading-line > ::before,
+.uk-heading-line > ::after {
+  /* 3 */
+  border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
+  content: "";
+  /* 1 */
+  position: absolute;
+  top: calc(var(--heading-line-top) - var(--heading-line-height) / 2);
+  /* 2 */
+  width: var(--heading-line-width);
+}
+
+.uk-heading-line > ::before {
+  margin-right: var(--heading-line-margin-horizontal);
+  right: 100%;
+}
+
+.uk-heading-line > ::after {
+  left: 100%;
+  margin-left: var(--heading-line-margin-horizontal);
+}
+
+:root {
+  --heading-medium-font-size-l: 4rem;
+  --heading-large-font-size-l: 6rem;
+  --heading-xlarge-font-size-l: 8rem;
+  --heading-2xlarge-font-size-l: 11rem;
+  --heading-small-font-size-m: 3.25rem;
+  --heading-medium-font-size-m: 3.5rem;
+  --heading-large-font-size-m: var(--heading-medium-font-size-l);
+  --heading-xlarge-font-size-m: var(--heading-large-font-size-l);
+  --heading-2xlarge-font-size-m: var(--heading-xlarge-font-size-l);
+  --heading-small-font-size: 2.6rem;
+  --heading-medium-font-size: 2.8875rem;
+  --heading-large-font-size: 3.4rem;
+  --heading-xlarge-font-size: var(--heading-large-font-size-m);
+  --heading-2xlarge-font-size: var(--heading-xlarge-font-size-m);
+  --heading-small-line-height: 1.2;
+  --heading-medium-line-height: 1.1;
+  --heading-large-line-height: 1.1;
+  --heading-xlarge-line-height: 1;
+  --heading-2xlarge-line-height: 1;
+  --heading-divider-padding-bottom: calc(5px + 0.1em);
+  --heading-divider-border-width: calc(0.2px + 0.05em);
+  --heading-divider-border: var(--global-border);
+  --heading-bullet-top: -0.1em;
+  --heading-bullet-height: calc(4px + 0.7em);
+  --heading-bullet-margin-right: calc(5px + 0.2em);
+  --heading-bullet-border-width: calc(5px + 0.1em);
+  --heading-bullet-border: var(--global-border);
+  --heading-line-top: 50%;
+  --heading-line-height: var(--heading-line-border-width);
+  --heading-line-width: 2000px;
+  --heading-line-border-width: calc(0.2px + 0.05em);
+  --heading-line-border: var(--global-border);
+  --heading-line-margin-horizontal: calc(5px + 0.3em);
+  --inverse-heading-divider-border: var(--inverse-global-border);
+  --inverse-heading-bullet-border: var(--inverse-global-border);
+  --inverse-heading-line-border: var(--inverse-global-border);
+}