1.1.0 • Published 9 days ago
@matteusan/sentro v1.1.0
Sentro
A low-level SCSS library for building and managing token-driven design systems.
Installation
# NPM
npm install @matteusan/sentro --save
# Yarn
yarn add @matteusan/sentro
Documentation
- The documentation for this project is located here.
Showcase
SCSS Input
- Tokenize your UI while creating an intuitive theming API for your design system.
@use 'path/to/@matteusan/sentro' with (
$prefix: 'sdb',
$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', sentro.token-get('secondary'));
color: sentro.key-create('button-ink', sentro.token-get('secondary-ink'));
border-color: sentro.key-create('button-border', sentro.token-get('secondary'));
border-radius: sentro.key-create('button-radius', sentro.token-get('radius-small'));
}
CSS Output
- Voila!
: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));
}
1.1.0
9 days ago
1.0.0
17 days ago
0.1.25
1 year ago
0.1.23
2 years ago
0.1.22
2 years ago
0.1.21
2 years ago
0.1.20
2 years ago
0.1.13
2 years ago
0.1.14
2 years ago
0.1.15
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.18
2 years ago
0.1.19
2 years ago
0.1.10
2 years ago
0.1.11
2 years ago
0.1.12
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.9
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago