@matteusan/sentro
Advanced tools
Comparing version
{ | ||
"name": "@matteusan/sentro", | ||
"version": "0.1.25", | ||
"version": "1.0.0", | ||
"description": "A low-level SCSS library for building and managing token-driven design systems.", | ||
"main": "_index.scss", | ||
"main": "packages/sentro/_index.scss", | ||
"author": "Matteu", | ||
"license": "MIT", | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"keywords": [ | ||
@@ -19,2 +16,3 @@ "css", | ||
], | ||
"readme": "README.md", | ||
"repository": { | ||
@@ -27,3 +25,9 @@ "type": "git", | ||
}, | ||
"homepage": "https://github.com/MatteuSan/sentro#readme" | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"homepage": "https://github.com/MatteuSan/sentro#readme", | ||
"peerDependencies": { | ||
"sass": "^1.74.1" | ||
} | ||
} |
# Sentro | ||
 | ||
[](https://www.npmjs.com/package/@matteusan/sentro) | ||
 | ||
 | ||
A low-level SCSS library for building and managing token-driven design systems. | ||
## Installation | ||
```sh | ||
# NPM | ||
npm install @matteusan/sentro --save | ||
# Yarn | ||
yarn add @matteusan/sentro | ||
``` | ||
## Documentation | ||
- The documentation for this project is located [here](https://docs.matteusan.me/docs/sentro). | ||
- The documentation for this project is located [here](https://docs.matteusan.com/docs/sentro). | ||
## Showcase | ||
#### SCSS Input | ||
- Tokenize your UI while creating an intuitive theming API for your design system. | ||
```scss | ||
@use 'path/to/@matteusan/sentro' with ( | ||
$prefix: 'sdb', | ||
@use '@matteusan/sentro' with ( | ||
$prefix: 'sdc', | ||
$context: 'theme' | ||
@@ -65,5 +52,2 @@ ); | ||
#### CSS Output | ||
- Voila! | ||
```css | ||
@@ -85,7 +69,7 @@ :root { | ||
.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)); | ||
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)); | ||
} | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
0
-100%44763
-25.68%1
Infinity%15
-28.57%73
-17.98%