Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/refzlund/scss-color-var
https://github.com/refzlund/scss-color-var
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/refzlund/scss-color-var
- Owner: Refzlund
- Created: 2023-01-31T10:50:43.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-08T00:30:52.000Z (about 1 year ago)
- Last Synced: 2024-12-09T19:36:28.410Z (about 1 month ago)
- Language: SCSS
- Homepage: https://www.npmjs.com/package/scss-color-var
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# scss-color-var
Manage and access colour variables in SCSS.
### Quick start
1. import files
```scss
@use `scss-color-var/cvar.scss`;
// Utility
// v(variable) becomes var(--variable)
// c(variable) becomes var(--color-variable)
@use 'scss-color-var/v.scss' as *;
```
2. define your colors
```scss
:root {
@include cvar.colors(
// a. Defining colors using rgba, hsla etc.
$text-body: hsl(0, 0%, 40%),
$primary: hsl(115, 78%, 30%),
// b. Creating relationships to other colors: (H, S, L, A)
$primary-background: (primary, primary, 90%),
$primary-text: (primary, primary, text-body),
// c. Use utility methods
$primary-text-faded: (primary-text, primary-text, primary-text, cvar.getA(primary-text, '-' 0.5)) // Relative
)
}
```
3. use them
```scss
// Libraries like Svelte can preprend certain imports @ compontent-based styling
@use 'scss-color-var/v.scss' as *;
@use `scss-color-var/cvar.scss`;
buttom.primary {
background-color: c(primary-background);
color: c(primary-text);
border: 1px solid cvar.l(background-color, +'.1') // adds .1 to lightness
--the-alpha: #{cvar.getAlpha(primary-text)};
}
```
That's it!
> [!NOTE]
> When assigning to variables, use `#{ }` as [SCSS documents here](https://sass-lang.com/documentation/breaking-changes/css-vars).
> Ex. `--hover-text: #{c(primary-hover)};`
### v
`@use 'scss-color-var/v.scss' as *;`
This file has two shortcuts for referencing variables and color variables:
| Function | Description | Example Input | Output |
| ------------------------ | ------------------------------------- | --------------- | ------------------------- |
| v($var, $fallback: null) | Shortcut for var(--, $fallback) | v(margin, 5px) | var(--margin, 5px) |
| c($var, $fallback: null) | Shortcut for var(--color-, $fallback) | c(primary-text) | var(--color-primary-text) |
### util
`@use 'scss-color-var/util.scss'`
This file provides utility functions. You are welcome to contribute more utility functions.
| Function | Description | Example Input | Output |
| ------------------------- | -------------------------------------- | --------------------------- | ------------------------------------------------- |
| util.lerp($from, $to, $t) | Lerps a value 0: $from, 1: $to, t: 0-1 | util.lerp(v(a), v(b), .445) | calc(var(--a) * (1.0 - .445) + (var(--b) * .445)) |
### cvar
`@use 'scss-color-var/cvar.scss`
Provides the main functions of this package.
#### cvar.colors(...$colors)
Defines color variables, prefixed with 'color'
```scss
@include cvar.colors(
$black: hsla(0, 0%, 0%, 1),
$shadeofgrey: (black, black, 50%, black)
)
// becomes
--color-black-h: 0;
--color-black-s: 0%;
--color-black-l: 0%;
--color-black-a: 1;
--color-black: hsla(
var(--color-black-h),
var(--color-black-s),
var(--color-black-l),
var(--color-black-a)
);
--color-shadeofgrey-h: var(--color-black-h);
--color-shadeofgrey-s: var(--color-black-s);
--color-shadeofgrey-l: 50%;
--color-shadeofgrey-a: var(--color-black-a);
--color-shadeofgrey: hsla(
var(--color-shadeofgrey-h),
var(--color-shadeofgrey-s),
var(--color-shadeofgrey-l),
var(--color-shadeofgrey-a)
);
```
#### Replaced values
`cvar.h($variable, $value)`
`cvar.s($variable, $value)`
`cvar.l($variable, $value)`
`cvar.a($variable, $value)`
All returns a color where the respective color parameter has been replaced with the $value.
```scss
cvar.a(primary, .5);
// becomes
hsla(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l),
.5
)
```
Relative colors
```scss
cvar.h(primary, '+' 45deg);
// becomes
hsla(
calc(var(--color-primary-h) + 45deg),
var(--color-primary-s),
var(--color-primary-l),
var(--color-primary-a)
)
```
#### Get variables
`cvar.getH($variable)`
`cvar.getS($variable)`
`cvar.getL($variable)`
`cvar.getA($variable)`
All returns the variable representing that colors color-parameter.
`cvar.getH(primary)` returns `var(--color-primary-h)`, etc.
Also works with relative colors:
`cvar.getS(primary, '+' 5%)` returns `calc(var(--color-primary-s) + 5%)`