Upgrade Guide

This is the upgrade guide if you're going from 0.x to 1.x.

Installing

Run this command in your terminal:

npm install @matteusan/sentro --save

Instantiation

In your main SCSS stylesheet, use the @use at-rule to use the library.

@use 'node_modules/@matteusan/sentro';

Breaking Changes

Converters

Some of the converter functions have been removed and/or renamed.

The rem-to-px() function has been removed. And this will not be added back in the future.

The px-to-rem() function still exists, however upon using, it will throw a warning. This function will be removed in the future.

The aforementioned function has been replaced with the to-rem() function.

// Before
.foo {
  font-size: px-to-rem(16px);
}
 
// After
.foo {
  font-size: to-rem(16px);
}

Syntax Changes

Key Creation

When creating keys, you can now directly query a valid token using the key-create() function. Unlike before, you had to use the token-get() function (along with its namespace) (which can get pretty annoying to type at times), this shorter syntax is now available for you to use. No more carpal tunnel I guess?

// Before
.foo {
  color: sentro.key-create('foo-ink', sentro.token-get('primary-ink'));
}
 
// After
.foo {
  color: sentro.key-create('foo-ink', 'primary-ink');
}

Raw values in Keys

You can now query raw values in keys up to layer one.

@debug key-get-raw('foo-ink');
 
// Before
@debug var(--primary-ink);
 
// After
@debug #000000;

New separator setting

You can now set a custom separator for all aspects of the design system: (tokens, keys, and breakpoints).

@use 'node_modules/@matteusan/sentro' with (
  $separator: '.'
);
 
// Before
// You're just stuck with the default separator '-'.
@debug sentro.token-get('primary-400');
 
// After
// Now you can set a custom separator to query tokens like this.
@debug sentro.token-get('primary.400');

This greatly improves parity with the design system specifications, especially if your team prefers to use a different separator for token naming.