v0.6.0 - Alpha 1

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

Read full changelog on the GitHub Release.