Token safety

By default, the key-create function and the key-bind mixin run on the token-switch function. Meaning these functions can accept tokens, but can also accept arbitrary values. If you want to enforce a style rule wherein you can only query tokens using said functions and mixins, you can directly pass in the token-get function instead of just the string, then passing the string in that function.

A useful pattern when creating this API looks like this:

// components/_sdc-component.scss
 
$fill: 'surface-400' !default;
$ink: 'surface-ink' !default;
$border: 'surface-400' !default;
 
.sdc-component {
  background-color: sentro.key-create('component-fill', sentro.token-get($fill));
  color: sentro.key-create('component-ink', sentro.token-get($ink));
  border: 1px solid sentro.key-create('component-border', sentro.token-get($border));
}

Whenever someone is using the design system, and the default theme variable is changed upon importing the component, the token-get function will ensure that the value is a token. If it's not, it will throw an error.

// main.scss
 
@use 'components/sdc-component' with (
  $fill: 'surface-200',
  $ink: #353535, // Not a valid token as it's an arbitrary value.
  $border: 'surface-200'
);
 
// This will throw an error...