v0.6.0 Alpha 1

Migrations: https://kahi-ui.nbn.dev/docs/migrations/0.5.x-to-0.6.x

Hi and thanks for waiting for the v0.6.0 release! I know feature updates has stalled completely for a while due to the major rearchitecture going on. But it's allowed me to include two major features that I'm sure most people will love! You know what "they" say, something something lessons learned the hard way...

Custom Builds

For more information, see the Custom Builds documentation.

It's been a long time since the very first public v0.2.0 release, and A LOT of features have been added in. Which with modern toolchains like Vite, Javascript can be easily tree shaken! What can't be tree shaken however, is the CSS distributables. As of this release, the Framework CSS distributable is a whopping 441+ KiB [MIN: 376+ kB] [MIN-BROTLI: 20+ KiB] [MIN-GZIP: 33+ KiB]. Which is A LOT of raw CSS. Even with the minified version being compressed for transfer.

One of the big features in this update is being able to download the source code of any release and disabling specific CSS features via custom builds. Using the build script, we can disable sources of bloat, like the global utility responitivitiy values. e.g. <* margin={["mobile:small"]}>

npm run build:framework -- --disable-globals-intrinsics-responsitivity

Which takes the Framework CSS distributable from 441+ KiB to 250+ KiB (MIN: 215+ kB) (MIN-BROTLI: 15+ KiB) (MIN-GZIP: 19+ KiB). That's about a ~56% reduction alone!

So with this feature you can highly tune your bundle size by excluding features you don't need. This does come with the drawback of needing to manually rebuild (or in a CI) the CSS each time you update Kahi UI. In the future, having a Vite plugin that can on-demand rebuild the SASS codebase will be looked at. And also whenever dart-sass is compatible, integrate a Custom Build and Custom Theme builder into the documentation site.

Custom Themes

For more information, see the Custom Themes documentation.

Previously the only documented way of customizing the theme of Kahi UI was using the per-Component CSS Custom Properties that were available and documented. However the overall global theme was not easily customizable or documented. Now with Custom Builds (see above), you can easily create your own themes.

Want to add a new palette color that instantly works? Open and edit the src/themes/default/_theme.scss file. And simply use the built-in palette generator and define a new constant.

@include constants.define(
  (
    "palettes": (
      "<PALETTE>": generators.palette(
          $dark: (
            // Base darkmode color used to generate shades, can be in any color
            "base": <COLOR>,
            // How much of the `dark` palette should be mixed into the base color per shade
            "stepping": <PERCENTAGE>,
          ),
          $light: (
            // Base lightmode color used to generate shades, can be in any color
            "base": <COLOR>,
            // How much of the `light` palette should be mixed into the base color per shade
            "stepping": <PERCENTAGE>,
          )
        ),
    ),
  )
);

e.g.

@include constants.define(
    (
        "palettes": (
            "brand": generators.palette(
                    $dark: (
                        "base": hsl(200, 25%, 47.5%),
                        "stepping": 4%,
                    ),
                    $light: (
                        "base": hsl(200, 30%, 47.5%),
                        "stepping": 4%,
                    )
                ),
        ),
    )
);

Alternatively, you can manually specify shades.

@include constants.define(
    (
        "palettes": (
            "brand": (
                "dark": (
                    "base": hsl(200deg, 25%, 47.5%),
                    "foreground": "light",
                    "lightest": hsl(201deg, 24%, 40%),
                    "lighter": hsl(200deg, 24%, 42%),
                    "light": hsl(200deg, 24%, 43%),
                    "normal": hsl(200deg, 24%, 44%),
                    "bold": hsl(200deg, 24%, 46%),
                    "bolder": hsl(200deg, 25%, 47.5%),
                    "boldest": hsl(199deg, 23%, 49%),
                ),
                "light": (
                    "base": hsl(200deg, 30%, 47.5%),
                    "foreground": "light",
                    "lightest": hsl(199deg, 26%, 57%),
                    "lighter": hsl(200deg, 26%, 55%),
                    "light": hsl(200deg, 26%, 53%),
                    "normal": hsl(199deg, 27%, 51%),
                    "bold": hsl(200deg, 27%, 49%),
                    "bolder": hsl(200deg, 30%, 47.5%),
                    "boldest": hsl(200deg, 29%, 46%),
                ),
            ),
        ),
    )
);

So check out the documentation and explore the rest of the themeing to make your Application really pop!

CHANGELOG

ALL CHANGES: v0.5.7...v0.6.0

Reworked the internal stylesheet, which includes the final visual refresh before v1.
Refined / Consolidated the public APIs of all the Actions / Components / Stores (see below), which should all be considered semi-stable now for v1.
(BREAKING) Themeing is now a separate stylesheet, which should be imported after your Framework import.

import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";

Added the following Components / Component Features
- *
  - <* elevation> — Added lower / higher elevation tiers.
  - <* palette> — Added neutral / informative semantic palettes.
    - neutral — Typically used to represent a non-destructive action or a secondary action whenever another palette is used.
    - informative — Typically signals that the Component is related to the current content, but is otherwise out of context.
  - <* sizing> — Added nano / massive size tiers to any Component that can scale.
  - <* size> — Is now a shorthand property for expressing width + height.
    - e.g. <* size="viewport-66"> is equivalent to <* width="viewport-66" height="viewport-66">
  - <* width/height/size="nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Sets dimensions based on the current theme's block sizing variables.
    - You can also prefix any of the size tiers with icon- to access the theme's icon sizing variables instead.
    - e.g. <* size="icon-small">
  - <* width/height/size="viewport-{mobile/tablet/desktop/widescreen}"> — Sets dimensions based on the current theme's Viewport breakpoints.
- Disclosure
  - Tab
    - <Tab.Anchor disabled={boolean}> — Disables clicks.
- Display
  - Badge
    - <Badge is="a/button" href={string}> — Alters the Badge to render an underline on hover.
    - <Badge radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
  - Kbd — Renders text in a manner that resembles a keycap from a keyboard, to represent a key binding. e.g. CTRL+C which typically means "Copy"
- Embedded
  - Figure
    - <Figure radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Alters the border radius rendered.
- Feedback
  - Ellipsis
    - <Ellipsis animation="bounce/pulse/ping"> — Alters the internal <Animation animation> used.
    - <Ellipsis iterations={number}> — Sets how many copies of the passed default slot is rendered to DOM. Defaults to 3.
  - Progress
    - <Progress radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Alters the border radius of the progress bar.
- Interactables
  - Button
    - <Button radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
    - <Button is="a/label" disabled={boolean}> — Disables clicks.
  - Form
    - <Form.Legend is="legend/span"> — Renders a form heading.
    - <Form.FieldSet> — Renders the child content within a spaced border box.
  - NumberInput
    - <NumberInput radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
    - <NumberInput max={number | string} min={number | string}> — Masks the user input from entering numbers not within the specified range.
  - TextInput
    - <TextInput radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
- Layouts
  - Article — Adds styling to classes HTML tags used to render typical Markdown output.
    - <a> — Renders similarly to <Anchor> along with a palette color configured by theme.
    - <blockquote> / <cite> — Renders similarly to <Blockquote.Container> / <Blockquote.Cite>, with inner children spacing and bottom margin.
    - <code> / <pre><code> — Renders similarly to <Code>.
    - <hr> — Renders similarly to <Divider>.
    - <h1>~<h6> — Renders similarly to <Heading is="{TAG}"> along with bottom margin.
    - <ol> / <ul> — Renders similarly to <List is="{TAG}"> along with bottom margin + paragraph spacing.
    - <p> — Renders similarly to <Text> along with bottom margin.
    - <small> — Renders similarly to <Text is="small">.
  - Container
    - <Container is="article"> — Renders as an <article> semantic element.
  - Grid
    - <Grid.Container variation="relative"> — Adjusts spacing to be relative to inherited font size.
  - Group
    - <Group variation="stacked" spacing="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" spacing_x spacing_y> — Alters how close together the child elements are stacked on top of each other.
  - Mosaic
    - <Mosaic.Container variation="relative"> — Adjusts spacing and sizing to be relative to inherited font size.
    - <Mosaic.Item> — Adjusts the layout of a singular Mosaic item.
      - <Mosaic.Item span={number} span_x={number} span_y={number}> — Adjusts the column / row span of the item.
  - Stack
    - <Stack.Container variation="relative"> — Adjusts spacing to be relative to inherited font size.
    - <Stack.Item> — Adjusts the layout of a singular Stack item.
      - <Stack.Item variation="stretch"> — Grows the item to fill any unused space within the <Stack.Container>.
- Navigation
  - Anchor
    - <Anchor disabled={boolean}> — Disables clicks and alters the appearance.
  - Breadcrumb
    - <Breadcrumb.Button> — Renders as the same appearance of <Breadcrumb.Anchor>, that does not navigate the Browser.
    - <Breadcrumb.(Anchor/Button/Container) palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette.
  - Menu
    - <Menu.Container palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette of all children.
    - <Menu.Anchor disabled={boolean}> — Disables clicks and alters the appearance.
- Overlays
  - Backdrop
    - <Backdrop palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette.
  - Clickable
    - <Clickable.Anchor disabled={boolean}> — Disables clicks and alters the appearance.
  - Popover
    - <Popover.Container variation="tooltip"> — Activates the <Popover.Section> content when sibling content is focused / hovered.
- Surfaces
  - Box
    - <Box radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
- Utilities
  - Animation — Applies a repeating animation to the child elements.
    - <Animation on:animationend={AnimationEvent} on:animationstart={AnimationEvent}> — Passthrough of the Browser animationend / animationstart events.
    - <Animation is="div/span"> — Alters the rendered element.
    - <Animation animation="bounce/ping/pulse"> — Alters which animation is rendered.
    - <Animation delay={number | string}> — Adjusts how long until the animation starts playing by a percentage multiplier of the base duration.
    - <Animation duration={number | string}> — Adjusts the duration of the animation by a percentage multiplier.
    - <Animation iterations={number | string}> — Alters how many times the animation loops before stopping.
    - <Animation variation="pause/play"> — Controls whether the animation is playing or not.
  - Transition
    - <Transition is="span"> — Renders as an inline <span> element.
Added the following Stores / Store Features
- htmlmode
  
  htmldark(): Readable<boolean> / htmllight(): Readable<boolean> — Returns true if <html data-mode="dark"> or <html data-mode="light"> are valid respectively.
- thememode
  - lightmode(): Readable<boolean> — Returns true if (prefers-color-scheme: light) is valid and <html data-mode> is not set, or, if <html data-mode="light"> is valid.
Fixed the following Components / Component Features
- Widgets
  - *Picker / *Stepper
    - Fixed datetime Components not working on FireFox 96+.
Removed the following Components / Component Features
- Display
  - Badge
    - (BREAKING) <Badge animation> — Removed in favor of the new generalized Animation Component.
- Embedded
  - Figure
    - (BREAKING) <Figure size> — Removed in favor of new global width / height / size properties.
    - (BREAKING) <Figure size variation="icon"> - Removed in favor of the new global width / height / size properties with icon- prefix.
- Feedback
  - Dot
    - (BREAKING) <Dot animation> — Removed in favor of the new generalized Animation Component.
  - Spinner
    - (BREAKING) <Spinner> — Removed in favor of <Progress shape="circle">'s new indeterminate appearance.
  - Wave
    - (BREAKING) <Wave> — Removed in favor of the updated <Ellipsis>, which can replicate the affect.
      - e.g. <Ellipsis animation="bounce" iterations="5"><Dot></Ellipsis>
- Layouts
  - Container
    - (BREAKING) <Container viewport> — Removed in favor of new <* width="viewport-{mobile/tablet/desktop/widescreen}"> global property.
- Navigation
  - Menu
    - (BREAKING) <svelte:fragment slot="sub-menu"> — With the new DOM structure, the <Menu.Section> Components can just be composed as sibling elements.
- Typography
  - Text
    - (BREAKING) <Text is="kbd"> — Due to not acting strictly as a text modifier, it migrated to becoming its own Kbd Component.
      - e.g. <Text is="kbd">CTRL+C</Text> -> <Kbd>CTRL+C</Kbd>
- Widgets
  - *Picker / *Stepper
    - (BREAKING) <* calendar> — Due to breaking bug in the Temporal API polyfill, this property has been removed and will be revisited at a later time.
    - (BREAKING) <* highlight timestamp value> — Due to a breaking bug in the Temporal API polyfill and to align with Web Browsers, this property now only accepts ISO 8601 timestamps which don't specify calendars. Working only with the ISO 8601 calendar.
Updated the following Components / Component Features
- *
  - (BREAKING) All Components now use CSS classes to apply stylings instead of selecting semantic elements, e.g <Card.Footer> is now selected via .card--footer instead of .card > footer.
    - (IMPORTANT) You should never be relying on element selectors or the built-in classes regardless for custom styling anyway, it's considered internal unstable API. Always use classes!
    - e.g. <Card.Footer class="my-custom-footer">
- Feedback
  - Progress
    - <Progress shape="circle" value={undefined}> — Updated the indeterminate appearance to look unique from the progress bar's indeterminate's appearance and to also better serve as a generic spinner.
    - (BREAKING) <Progress size> — Consolidated into <Progress sizing>.
- Interactables
  - Button
    - (BREAKING) <Button href for value> — Updated to require explicit <Button is="a/label/input"> property to be more consistent with other Component API.
      - e.g. <Button href="..."> -> <Button is="a" href="...">
    - (BREAKING) <Button size> — Consolidated into <Button sizing>.
  - Check
    - (BREAKING) <Check size> — Consolidated into <Check sizing>.
  - Radio
    - (BREAKING) <Radio size> — Consolidated into <Radio sizing>.
  - NumberInput
    - (BREAKING) <NumberInput align> — Consolidated into <NumberInput alignment_x>.
    - (BREAKING) <NumberInput characters> — Consolidated into <NumberInput span_x>.
    - (BREAKING) <NumberInput size> — Consolidated into <NumberInput sizing>.
  - Switch
    - (BREAKING) <Switch size> — Consolidated into <Switch sizing>.
  - TextInput
    - (BREAKING) <TextInput align> — Consolidated into <TextInput alignment_x>.
    - (BREAKING) <TextInput characters lines> — Consolidated into <TextInput span_x span_y>.
    - (BREAKING) <TextInput max_length> — Consolidated into <TextInput max>.
    - (BREAKING) <TextInput min_length> — Consolidated into <TextInput min>.
    - (BREAKING) <TextInput size> — Consolidated into <TextInput sizing>.
- Layouts
  - Mosaic
    - (BREAKING) <Mosaic> — Renamed <Mosaic> Component to <Mosaic.Container> to facilitate <Mosaic.Item>.
  - Stack
    - (BREAKING) <Stack> — Renamed <Stack> Component to <Stack.Container> to facilitate <Stack.Item>.
- Navigation
  - Menu
    - (BREAKING) Updated DOM structure to be made up of composable <div> elements internally, no longer using <ul> / <li> elements.
    - (BREAKING) <Menu.Divider> — Was merged into <Menu.Heading> due to being duplicate code.
      - <Menu.Divider /> -> <Menu.Heading />
      - <Menu.Divider>...</Menu.Divider> -> <Menu.Heading variation="divider">...</Menu.Heading>
    - (BREAKING) <Menu.SubMenu> — Renamed <Menu.SubMenu> to <Menu.Section> to be more consistent with other Component API and new DOM structure for Menu.
- Overlays
  - Overlay
    - (BREAKING) <Overlay.Button size> — Consolidated into <Overlay.Button sizing>.
  - Popover
    - (BREAKING) <Popover.Button size> — Consolidated into <Popover.Button sizing>.
- Typography
  - Heading
    - (BREAKING) <Heading align> — Consolidated into <Heading alignment_x>.
  - Text
    - (BREAKING) <Text align> — Consolidated into <Text alignment_x>.
    - (BREAKING) <Text size> — Consolidated into <Text sizing>.
- Widgets
  - DayStepper
    - (BREAKING) <DayStepper step> — Consolidated into <DayStepper steps>.
  - MonthStepper
    - (BREAKING) <MonthStepper step> — Consolidated into <MonthStepper steps>.
  - Pagination
    - (BREAKING) <Pagination href> — Updated to require explicit <Pagination is="a"> property to be more consistent with other Component API.
      - e.g. <Pagination href="..."> -> <Pagination is="a" href="...">
  - TimePicker
    - (BREAKING) <TimePicker disabled={string[]}> — Was updated to accept string[] instead of string.
    - (BREAKING) <TimePicker highlight={string[]}> — Was updated to accept string[] instead of string.
  - YearStepper
    - (BREAKING) <YearStepper step> — Consolidated into <YearStepper steps>.
Updated the following Stores / Store Features
- htmlmode
  - (BREAKING) htmlpalette — Renamed to htmlmode to reflect <html data-palette> attribute was renamed to <html data-mode>.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v0.6.0 - Alpha 1

v0.6.0 Alpha 1

Custom Builds

Custom Themes

CHANGELOG