Sentro

A low-level SCSS library for building and managing token-driven design systems.

By utilizing a token-driven approach for your design system, it is easier than ever to enforce consistency, beauty, and delightful DX without sacrificing flexibility, and scalability.

Features

Token-driven

Sentro is made with design tokens in mind. It allows you to define your design tokens in a structured way and use them in your stylesheets. This makes it easier to enforce consistency and make changes across your design system. So that creating and managing design tokens is a breeze.

Lightweight

By design it is lightweight and has no dependencies. So you can drop it in the project and start using it right away while still having headroom for the bulk of your design system implementation.

The (almost) complete toolkit

Sentro provides you with the foundations that you need in order to start building your design system. It includes tools to create and manage design tokens that govern multiple layers (primitive, semantic (theme), and component tokens), error handling, breakpoints, component helpers, and more.

Example

SCSS Input

@use '@matteusan/sentro' with (
  $prefix: 'sdc',
  $context: 'theme'
);
 
:root {
  @include sentro.token-config(
    $primary: (
      'default': #122c53,
      'light': #536b99,
      'dark': #061021,
      'ink': #fff
    ),
    $secondary: (
      'default': #ffac00,
      'light': #ffd77e,
      'dark': #533800,
      'ink': #000
    ),
    $radius: (
      'small': 0.3rem,
      'medium': 0.5rem,
      'large': 0.7rem
    ),
  );
}
 
.my-button-theme {
  background: sentro.key-create('button-fill', 'secondary');
  color: sentro.key-create('button-ink', 'secondary-ink');
  border-color: sentro.key-create('button-border', 'secondary');
  border-radius: sentro.key-create('button-radius', 'radius-small');
}

CSS Output

:root {
  --sdb-theme-primary: #122c53;
  --sdb-theme-primary-light: #536b99;
  --sdb-theme-primary-dark: #061021;
  --sdb-theme-primary-ink: #fff;
  --sdb-theme-secondary: #ffac00;
  --sdb-theme-secondary-light: #ffd77e;
  --sdb-theme-secondary-dark: #533800;
  --sdb-theme-secondary-ink: #000;
  --sdb-theme-radius-small: 0.3rem;
  --sdb-theme-radius-medium: 0.5rem;
  --sdb-theme-radius-large: 0.7rem;
}
 
.my-button-theme {
    background: var(--sdb-button-fill, var(--sdb-theme-secondary));
    color: var(--sdb-button-ink, var(--sdb-theme-secondary-ink));
    border-color: var(--sdb-button-border, var(--sdb-theme-secondary));
    border-radius: var(--sdb-button-radius, var(--sdb-theme-radius-small));
}