Spacings

IMPORTANT: Spacing CSS Custom Properties are defined as a unitless multipliers, so Components can customize scaling based on context.

Kahi UI in its default theme uses Modular Scale to produce generative spacing tiers used throughout the Framework.

Block Spacings

Kahi UI typically uses block spacing for more obvious distinctions chunks of content, such as spacing between grid items.

<script>
    import {Stack, Text} from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="large"
    variation="wrap"
>
    <div>
        <Text is="strong">NANO</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-nano) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">TINY</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-tiny) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">SMALL</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-small) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-medium) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">LARGE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-large) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">HUGE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-huge) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-block-massive) * 1rem);"
        />
    </div>
</Stack.Container>

Inline Spacings

Kahi UI typically uses inline spacing for more fine-grained visuals where subtlely is needed. Such as spacing between letters in categorization legends.

<script>
    import {Stack, Text} from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="large"
    variation="wrap"
>
    <div>
        <Text is="strong">NANO</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-nano) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">TINY</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-tiny) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">SMALL</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-small) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-medium) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">LARGE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-large) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">HUGE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-huge) * 1rem);"
        />
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>

        <div
            data-height="icon-nano"
            style="background:currentColor;width:calc(var(--spacings-inline-massive) * 1rem);"
        />
    </div>
</Stack.Container>