styles
  • elements
  • forms
  • icon sizes
  • typography
    • components
  • Dialog
  • HueInput
  • Breadcrumbs
  • Message
  • PendingAnimation
  • PendingButton
  • Teleport

    • welcome to the library 🪧 🐿

    This code is pre-alpha and the docs are currently lacking, so we recommend opening your browser's devtools and searching the source code from GitHub to improve the experience.

    pre-alpha: not ready for production

    👆 blockquote

    👇 hr 👈 code

    details and summary

    Click me, a summary, to see the rest of the details

    Here's an unfinished detail: what styling should the summary have?

    pre-alpha: not ready for production

    form input textarea select button

    create an account

    form <input type="range" />

    form <input type="checkbox" />

    form <input type="radio" />

    <button disabled>:|</button>

    button with CSS class .selected

    .selected buttons with the .deselectable class continue to be clickable when selected:

    .buttonlike CSS class

    the .buttonlike class is useful when you want interactive builtin elements to be wrapped in a larger clickable area:

    .buttonlike with .selected
    .buttonlike with .selected and .deselectable
    TODO: add more deselectable signifiers?

    the --icon_size property's variants

    icon sizes usepx not rem, so they're insensitive to browser font size
    --icon_size_xs18px
    🐢
    --icon_size_sm32px
    🐢
    --icon_size_md48px
    🐢
    --icon_size_lg80px
    🐢
    --icon_size_xl128px
    🐢
    --icon_size_xl2196px
    🐢
    --icon_size_xl3316px
    🐢
    --icon_size_xl4512px
    🐢

    h1

    h2

    h3

    h4

    h5
    h6

    --font_size_xs: 0.989rem;

    --font_size_sm: 1.258rem;

    --font_size_md: 1.6rem;

    --font_size_lg: 2.035rem;

    --font_size_xl: 2.589rem;

    --font_size_xl2: 3.293rem;

    --font_size_xl3: 4.189rem;

    pink

    xl4 xl5 xl6 xl7 xl8 xl9

    Dialog

    HueInput

    hue: 180

    Breadcrumbs

    •/sketch/library

    Breadcrumbs with slot content 🏠

    🏠/sketch/library

    Breadcrumbs with
    path="/a/b/c"
    selectedPath="/a/b"
    basePath="/sketch/library"     and slot "separator" content . and default slot content 🔡

    🔡
    .
    a
    .
    b
    .
    c

    Message

    this api is experimental (the button prop may be changed to an optional action callback)
    ✨
    :-)

    Message with icon="😑" and button={true}

    Message with status="error"

    ✋
    bad things went wrong

    Message with status="error"and and slot content {<div slot="icon" style:line-height="1"><div style:font-size="var(--font_size_xl3)">🔥</div>😊</div>

    Message with status="help"

    👉
    here's how to fix it

    Message with status="help"and icon="🔑" and button={true}

    PendingAnimation

    • • •

    with running={}

    • • •

    with slot

    and --font_size_xl6

    and --animation_duration set to --duration_6

    🐢 🐢 🐢

    with running={}
    and slots
    ⏳{index}<span style="font-size: var(--font_size_xl5)">{🐸}</span>

    ⏳ 0 🐸
    ⏳ 1 🐸
    ⏳ 2 🐸

    PendingButton

    PendingButton preserves the normal width of the button while animating

    Teleport

    TheDialog uses the Teleport to mount itself to a top-level DOM element, instead of the location that the Dialog component appears in code, solving various issues like unwanted style inheritance.

    The Teleport can be used to relocate other elements too, in the rare cases that's useful.

    Use only when necessary or fun.