@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/grid/_grid.scss

@@ -0,0 +1,657 @@
+// Name:            Grid
+// Description:     Component to create responsive, fluid and nestable grids
+//
+// Component:       `uk-grid`
+//
+// Modifiers:       `uk-grid-xsmall`
+//                  `uk-grid-small`
+//                  `uk-grid-medium`
+//                  `uk-grid-large`
+//                  `uk-grid-collapse`
+//                  `uk-grid-divider`
+//                  `uk-grid-match`
+//                  `uk-grid-stack`
+//                  `uk-grid-margin`
+//                  `uk-grid-margin-small`
+//                  `uk-grid-margin-medium`
+//                  `uk-grid-margin-large`
+//                  `uk-grid-margin-collapse`
+//
+// Sub-modifier:    `uk-grid-item-match`
+//
+// States:          `uk-first-column`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin grid-styles {
+    /* ========================================================================
+       Component: Grid
+     ========================================================================== */
+
+    /*
+     * 1. Allow cells to wrap into the next line
+     * 2. Reset list
+     * 3. Horizontal gutter
+     * 4. Vertical gutter
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-grid > * {
+        margin: 0;
+
+        /* 1 */
+        padding-left: var(--grid-gutter-horizontal);
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-grid > * > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Gutter
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid,
+    * + .#{$prefix}-grid-margin {
+        margin-top: var(--grid-gutter-vertical);
+    }
+
+    .#{$prefix}-grid > .#{$prefix}-grid-margin {
+        margin-top: 0;
+    }
+
+
+    /* Phones portrait and smaller */
+    @media (--media-breakpoint-xsmall-max) {
+        /* Horizontal */
+        .#{$prefix}-grid {
+            margin-left: calc(var(--grid-gutter-horizontal-s) * -1);
+            row-gap: var(--grid-gutter-vertical-s);
+        }
+
+        .#{$prefix}-grid > * {
+            padding-left: var(--grid-gutter-horizontal-s);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid + .#{$prefix}-grid,
+        * + .#{$prefix}-grid-margin {
+            margin-top: var(--grid-gutter-vertical-s);
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        /* Horizontal */
+        .#{$prefix}-grid {
+            margin-left: calc(var(--grid-gutter-horizontal-m) * -1);
+            row-gap: var(--grid-gutter-vertical-m);
+        }
+
+        .#{$prefix}-grid > * {
+            padding-left: var(--grid-gutter-horizontal-m);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid + .#{$prefix}-grid,
+        * + .#{$prefix}-grid-margin {
+            margin-top: var(--grid-gutter-vertical-m);
+        }
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        /* Horizontal */
+        .#{$prefix}-grid {
+            margin-left: calc(var(--grid-gutter-horizontal-l) * -1);
+            row-gap: var(--grid-gutter-vertical-l);
+        }
+
+        .#{$prefix}-grid > * {
+            padding-left: var(--grid-gutter-horizontal-l);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid + .#{$prefix}-grid,
+        * + .#{$prefix}-grid-margin {
+            margin-top: var(--grid-gutter-vertical-l);
+        }
+    }
+
+    /*
+     * XSmall
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-xsmall,
+    .#{$prefix}-grid-column-xsmall {
+        margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -1);
+    }
+
+    .#{$prefix}-grid-xsmall,
+    .#{$prefix}-grid-row-xsmall {
+        row-gap: var(--grid-xsmall-gutter-vertical);
+    }
+
+    .#{$prefix}-grid-xsmall > *,
+    .#{$prefix}-grid-column-xsmall > * {
+        padding-left: var(--grid-xsmall-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid-xsmall,
+    .#{$prefix}-grid + .#{$prefix}-grid-row-xsmall,
+    * + .#{$prefix}-grid-margin-xsmall {
+        margin-top: var(--grid-xsmall-gutter-vertical);
+    }
+
+    /*
+     * Small
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-small,
+    .#{$prefix}-grid-column-small {
+        margin-left: calc(var(--grid-small-gutter-horizontal) * -1);
+    }
+
+    .#{$prefix}-grid-small,
+    .#{$prefix}-grid-row-small {
+        row-gap: var(--grid-small-gutter-vertical);
+    }
+
+    .#{$prefix}-grid-small > *,
+    .#{$prefix}-grid-column-small > * {
+        padding-left: var(--grid-small-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid-small,
+    .#{$prefix}-grid + .#{$prefix}-grid-row-small,
+    * + .#{$prefix}-grid-margin-small {
+        margin-top: var(--grid-small-gutter-vertical);
+    }
+
+    /*
+     * Medium
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-medium,
+    .#{$prefix}-grid-column-medium {
+        margin-left: calc(var(--grid-medium-gutter-horizontal) * -1);
+    }
+
+    .#{$prefix}-grid-medium,
+    .#{$prefix}-grid-row-medium {
+        row-gap: var(--grid-medium-gutter-vertical);
+    }
+
+    .#{$prefix}-grid-medium > *,
+    .#{$prefix}-grid-column-medium > * {
+        padding-left: var(--grid-medium-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid-medium,
+    .#{$prefix}-grid + .#{$prefix}-grid-row-medium,
+    * + .#{$prefix}-grid-margin-medium {
+        margin-top: var(--grid-medium-gutter-vertical);
+    }
+
+    /*
+     * Large
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-large,
+    .#{$prefix}-grid-column-large {
+        margin-left: calc(var(--grid-large-gutter-horizontal) * -1);
+    }
+
+    .#{$prefix}-grid-large,
+    .#{$prefix}-grid-row-large {
+        row-gap: var(--grid-large-gutter-vertical);
+    }
+
+    .#{$prefix}-grid-large > *,
+    .#{$prefix}-grid-column-large > * {
+        padding-left: var(--grid-large-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid-large,
+    .#{$prefix}-grid + .#{$prefix}-grid-row-large,
+    * + .#{$prefix}-grid-margin-large {
+        margin-top: var(--grid-large-gutter-vertical);
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        /* Horizontal */
+        .#{$prefix}-grid-large,
+        .#{$prefix}-grid-column-large {
+            margin-left: calc(var(--grid-large-gutter-horizontal-l) * -1);
+        }
+
+        .#{$prefix}-grid-large,
+        .#{$prefix}-grid-row-large {
+            row-gap: var(--grid-large-gutter-vertical-l);
+        }
+
+        .#{$prefix}-grid-large > *,
+        .#{$prefix}-grid-column-large > * {
+            padding-left: var(--grid-large-gutter-horizontal-l);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid + .#{$prefix}-grid-large,
+        .#{$prefix}-grid + .#{$prefix}-grid-row-large,
+        * + .#{$prefix}-grid-margin-large {
+            margin-top: var(--grid-large-gutter-vertical-l);
+        }
+    }
+
+    /*
+     * Collapse
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-collapse,
+    .#{$prefix}-grid-column-collapse {
+        margin-left: 0;
+    }
+
+    .#{$prefix}-grid-collapse,
+    .#{$prefix}-grid-row-collapse {
+        row-gap: 0;
+    }
+
+    .#{$prefix}-grid-collapse > *,
+    .#{$prefix}-grid-column-collapse > * {
+        padding-left: 0;
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid + .#{$prefix}-grid-collapse,
+    .#{$prefix}-grid + .#{$prefix}-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)
+     */
+
+    .#{$prefix}-grid-match > *,
+    .#{$prefix}-grid-item-match {
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+    }
+
+    .#{$prefix}-grid-match > * > :not([class*='#{$prefix}-width']),
+    .#{$prefix}-grid-item-match > :not([class*='#{$prefix}-width']) {
+        /* 2 */
+        box-sizing: border-box;
+
+        /* 3 */
+        flex: auto;
+        width: 100%;
+    }
+
+
+    /* Divider
+     ========================================================================== */
+
+    .#{$prefix}-grid-divider > * {
+        padding-left: calc(var(--grid-gutter-horizontal) * 2);
+        position: relative;
+    }
+
+    .#{$prefix}-grid-divider > :not(.#{$prefix}-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;
+        @if map.has-key($mixins, 'hook-grid-divider-horizontal') {
+            @include meta.apply(map.get($mixins, 'hook-grid-divider-horizontal'));
+        }
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-stack > .#{$prefix}-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);
+        @if map.has-key($mixins, 'hook-grid-divider-vertical') {
+            @include meta.apply(map.get($mixins, 'hook-grid-divider-vertical'));
+        }
+    }
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-stack {
+        row-gap: unset;
+    }
+
+    /* Horizontal */
+    .#{$prefix}-grid-divider {
+        margin-left: calc(var(--grid-gutter-horizontal) * -2);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+        margin-top: calc(var(--grid-gutter-vertical) * 2);
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        /* Horizontal */
+        .#{$prefix}-grid-divider {
+            margin-left: calc(var(--grid-gutter-horizontal-l) * -2);
+        }
+
+        .#{$prefix}-grid-divider > * {
+            padding-left: calc(var(--grid-gutter-horizontal-l) * 2);
+        }
+
+        .#{$prefix}-grid-divider > :not(.#{$prefix}-first-column)::before {
+            left: var(--grid-gutter-horizontal-l);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid-divider.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+            margin-top: calc(var(--grid-gutter-vertical-l) * 2);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+            left: calc(var(--grid-gutter-horizontal-l) * 2);
+            top: calc(var(--grid-gutter-vertical-l) * -1);
+        }
+    }
+
+    /*
+     * Xsmall
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-xsmall,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-xsmall {
+        margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-xsmall > *,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-xsmall > * {
+        padding-left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-xsmall > :not(.#{$prefix}-first-column)::before,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-xsmall > :not(.#{$prefix}-first-column)::before {
+        left: var(--grid-xsmall-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-xsmall.#{$prefix}-grid-stack > .#{$prefix}-grid-margin,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-xsmall.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+        margin-top: calc(var(--grid-xsmall-gutter-vertical) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-xsmall.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+        top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-xsmall.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-xsmall.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+    }
+
+    /*
+     * Small
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-small,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-small {
+        margin-left: calc(var(--grid-small-gutter-horizontal) * -2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-small > *,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-small > * {
+        padding-left: calc(var(--grid-small-gutter-horizontal) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-small > :not(.#{$prefix}-first-column)::before,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-small > :not(.#{$prefix}-first-column)::before {
+        left: var(--grid-small-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-small.#{$prefix}-grid-stack > .#{$prefix}-grid-margin,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-small.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+        margin-top: calc(var(--grid-small-gutter-vertical) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-small.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-small-gutter-horizontal) * 2);
+        top: calc(var(--grid-small-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-small.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        top: calc(var(--grid-small-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-small.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-small-gutter-horizontal) * 2);
+    }
+
+    /*
+     * Medium
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-medium,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-medium {
+        margin-left: calc(var(--grid-medium-gutter-horizontal) * -2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-medium > *,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-medium > * {
+        padding-left: calc(var(--grid-medium-gutter-horizontal) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-medium > :not(.#{$prefix}-first-column)::before,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-medium > :not(.#{$prefix}-first-column)::before {
+        left: var(--grid-medium-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-medium.#{$prefix}-grid-stack > .#{$prefix}-grid-margin,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-medium.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+        margin-top: calc(var(--grid-medium-gutter-vertical) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-medium.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-medium-gutter-horizontal) * 2);
+        top: calc(var(--grid-medium-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-medium.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        top: calc(var(--grid-medium-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-medium.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-medium-gutter-horizontal) * 2);
+    }
+
+    /*
+     * Large
+     */
+
+    /* Horizontal */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-large,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-large {
+        margin-left: calc(var(--grid-large-gutter-horizontal) * -2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-large > *,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-large > * {
+        padding-left: calc(var(--grid-large-gutter-horizontal) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-large > :not(.#{$prefix}-first-column)::before,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-large > :not(.#{$prefix}-first-column)::before {
+        left: var(--grid-large-gutter-horizontal);
+    }
+
+    /* Vertical */
+    .#{$prefix}-grid-divider.#{$prefix}-grid-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin,
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+        margin-top: calc(var(--grid-large-gutter-vertical) * 2);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-large-gutter-horizontal) * 2);
+        top: calc(var(--grid-large-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-row-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        top: calc(var(--grid-large-gutter-vertical) * -1);
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-column-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        left: calc(var(--grid-large-gutter-horizontal) * 2);
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        /* Horizontal */
+        .#{$prefix}-grid-divider.#{$prefix}-grid-large,
+        .#{$prefix}-grid-divider.#{$prefix}-grid-column-large {
+            margin-left: calc(var(--grid-large-gutter-horizontal-l) * -2);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-large > *,
+        .#{$prefix}-grid-divider.#{$prefix}-grid-column-large > * {
+            padding-left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-large > :not(.#{$prefix}-first-column)::before,
+        .#{$prefix}-grid-divider.#{$prefix}-grid-column-large > :not(.#{$prefix}-first-column)::before {
+            left: var(--grid-large-gutter-horizontal-l);
+        }
+
+        /* Vertical */
+        .#{$prefix}-grid-divider.#{$prefix}-grid-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin,
+        .#{$prefix}-grid-divider.#{$prefix}-grid-row-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin {
+            margin-top: calc(var(--grid-large-gutter-vertical-l) * 2);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+            left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+            top: calc(var(--grid-large-gutter-vertical-l) * -1);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-row-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+            top: calc(var(--grid-large-gutter-vertical-l) * -1);
+        }
+
+        .#{$prefix}-grid-divider.#{$prefix}-grid-column-large.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+            left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-grid-misc') {
+        @include meta.apply(map.get($mixins, 'hook-grid-misc'));
+    }
+
+    @content;
+}
+
+@mixin grid-tokens {
+    --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);
+
+    @content;
+}
+
+@mixin grid-inverse-tokens {
+    --inverse-grid-divider-border: var(--inverse-global-border);
+
+    @content;
+}

package/styles/grid/_index.scss

@@ -0,0 +1,11 @@
+@use 'grid' as *;
+
+$generate-tokens: true !default;
+
+@include grid-styles;
+
+@if $generate-tokens {
+    :root {
+        @include grid-tokens;
+    }
+}