🚀 Inkline 3 is now officially released!

[alexgrozav]

🚀 Inkline 3 (https://inkline.io) is now officially released!

We’ve been working hard to make Inkline the go-to choice when building a Vue.js 3 Design System.

It’s some of the best UI, UX, and DX, all inside a beautiful free package.

[ChadKeating]

Are there migration guidelines or something to help upgrading?

[ChadKeating]

Also does inkline expose any mixins or helper functions to make it less tedious to create hsl color variables? Its really annoying to have to convert hex to hsl in the first place, is there maybe a hex to hsl conversion method for inklines variables?

[alexgrozav]

Hi @ChadKeating,

Unfortunately there's no official migration guideline. It basically depends on how in-depth you've customized Inkline 2. Some things to keep in mind:

• The i-checkbox-button-group, i-checkbox-button, i-radio-button-group, i-radio-button have been removed for now and require a custom implementation
• The i-datatable component is not yet migrated
• The i-select component is completely rewritten and has a different API
• The styling is done using CSS Variables instead of SCSS variables, however the class names have remained pretty much the same
• Colors are now using HSL
• The variant prop is now called simply color instead

[alexgrozav]

If you're using SCSS, it provides you with helpers to extract the hue, saturation and lightness of a hex color:

@use 'sass:color';

$my-color: #ff70ff;

:root {
    --color--primary--h: #{color.hue($my-color)};
    --color--primary--s: #{color.saturation($my-color)};
    --color--primary--l: #{color.lightness($my-color)};
}

[ChadKeating]

Thanks for the tips.
I extended your example a bit incase anyone else needs it, it coverts hex colors and id to the hsl format.

@use 'sass:color';

@mixin hexToInklineColorVars($id, $hex) {
  #{$id}--h: color.hue($hex);
  #{$id}--s: color.saturation($hex);
  #{$id}--l: color.lightness($hex);
}

:root {
  @include hexToInklineColorVars("--color--primary", #426b48);
  @include hexToInklineColorVars("--color--secondary", #36443a);
  ...
 }