Sizes

Kahi UI in its default theme uses Modular Scale and stepping scaling to produce generative size tiers used throughout the Framework.

Block Sizes

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

Kahi UI typically uses block sizes to show chunks of content in uniform sizes, such as Mosaic.

<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(--sizes-block-nano) * 1rem);"
        />
    </div>

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

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

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

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

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

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

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

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

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

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

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

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

Border Sizes

Kahi UI uses border sizes to provide a standard set of border widths for Components.

<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:var(--sizes-borders-nano);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-tiny);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-small);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-medium);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-large);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-huge);"
        />
    </div>

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

        <div
            data-height="icon-nano"
            style="background:currentColor;width:var(--sizes-borders-massive);"
        />
    </div>
</Stack.Container>

Icon Sizes

Kahi UI provides icon sizes that reflect standard icon sizing used in other applications and environments.

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

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

        <div
            style="background:currentColor;width:var(--sizes-icon-nano);height:var(--sizes-icon-nano);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-tiny);height:var(--sizes-icon-tiny);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-small);height:var(--sizes-icon-small);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-medium);height:var(--sizes-icon-medium);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-large);height:var(--sizes-icon-large);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-huge);height:var(--sizes-icon-huge);"
        />
    </div>

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

        <div
            style="background:currentColor;width:var(--sizes-icon-massive);height:var(--sizes-icon-massive);"
        />
    </div>
</Stack.Container>

Prose Size

Kahi UI defines a single variable to determine how long a paragraph should get before being broken into a new line.

<p
    style="border:1px solid currentColor;width:var(--sizes-prose);"
>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Proin et consectetur orci. Curabitur a
    egestas turpis, vitae convallis sapien. Sed
    pellentesque rutrum tellus, in iaculis dolor
    tincidunt non. Orci varius natoque penatibus et
    magnis dis parturient montes, nascetur ridiculus
    mus.
</p>