1.1.0 • Published 1 year 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
1 year ago
1.0.0
1 year ago
0.1.25
3 years ago
0.1.23
3 years ago
0.1.22
3 years ago
0.1.21
3 years ago
0.1.20
3 years ago
0.1.13
4 years ago
0.1.14
4 years ago
0.1.15
3 years ago
0.1.16
3 years ago
0.1.17
3 years ago
0.1.18
3 years ago
0.1.19
3 years ago
0.1.10
4 years ago
0.1.11
4 years ago
0.1.12
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.9
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago