var-colors 1.0.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2026 Mikhail Vasilev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# var-colors
+
+**var-colors** is a Sass-based utility designed to create color palettes in the **OKLCH** color space. It allows you to use a palette of preset colors and their shades, and also allows you to flexibly customize a custom palette option.
+
+## Features
+
+- 25 calibrated **preset colors**.
+- Up to **977 shades** of preset colors.
+- Saturation stabilization for **dynamic temization**.
+- **Flexible configuration** settings for preset and custom colors
+
+## Installation
+
+```bash
+npm install var-colors
+```
+
+## Import
+
+After installation, you can import the SCSS file into your project
+
+```bash
+@import var-colors
+```
+
+When imported, 154 shades of 8 colors will be created in the root rule. This is enough for 95% of projects. If the specified shades are not enough for you, you can use a flexible configuration system to create your own palette
+
+## Configuration
+
+The configuration allows you to set:
+
+- Your set of preset colors (out of 25 preset colors)
+- Lightness levels step from 25 to 500
+- Custom set of lightness levels
+- Saturation stabilization of preset colors shades
+- Selecting the gamut from "srgb", "display-p3", "rec2020"
+- Setting a prefix to avoid collisions with other libraries
+- And of course, customizing a set of custom colors
+
+You need to create a configuration file and import it before importing the utility.
+
+### Configuration file example
+
+```bash
+$colors: (
+  "grey",
+  "indigo",
+  "rose",
+);
+$levels-step: 100;
+$consistent-chroma: true;
+$gamut: "display-p3";
+$prefix: "mv";
+$custom-colors: (
+  "primary": (
+    hue: 295,
+    max-chroma: 0.3,
+    max-chroma-lightness: 0.54,
+  ),
+  "secondary": (
+    hue: "grey"
+  ),
+  "danger": (
+    hue: "red"
+  )
+)
+```
+
+### Import example
+
+```bash
+@import configuration.scss
+@import var-colors
+```

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "var-colors",
+  "version": "1.0.0",
+  "description": "Sass utility to generate scalable OKLCH color palettes with CSS Custom Properties.",
+  "keywords": [
+    "sass",
+    "scss",
+    "color",
+    "palette",
+    "oklch",
+    "design-system",
+    "css-variables"
+  ],
+  "homepage": "https://github.com/Archinsk/var-colors#readme",
+  "author": "Mikhail Vasilev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Archinsk/var-colors.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Archinsk/var-colors/issues"
+  },
+  "main": "scss/index.scss",
+  "peerDependencies": {
+    "sass": "^1.70.0"
+  },
+  "devDependencies": {
+    "sass": "^1.70.0"
+  }
+}

package/scss/_config.scss

@@ -0,0 +1,16 @@
+$colors: (
+  "grey",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "cyan",
+  "blue",
+  "violet"
+) !default;
+$levels: () !default;
+$levels-step: 50 !default;
+$consistent-chroma: false !default;
+$gamut: "srgb" !default;
+$prefix: null !default;
+$custom-colors: () !default;

package/scss/_constants.scss

@@ -0,0 +1,26 @@
+@use "sass:math";
+@use "sass:list";
+@use "sass:map";
+
+$root-rule: true !default;
+$default-max-chroma: 0.3;
+$default-max-chroma-lightness: 0.75;
+$min-levels-step: 25;
+$steps-total: math.div(1000, $min-levels-step);
+$darkest-levels-lightness-map: (
+  925: 0.2029,
+  950: 0.1757,
+  975: 0.1398,
+);
+$darkest-levels: map.keys($darkest-levels-lightness-map);
+$regular-levels: $steps-total - list.length($darkest-levels);
+$regular-levels-lightness-step: math.div(
+  1 - map.get($darkest-levels-lightness-map, 925),
+  $regular-levels
+);
+$base-palette: (
+  "white": oklch(1 0 none),
+  "black": oklch(0 0 none),
+);
+$valid-levels-steps: (25, 50, 100, 125, 200, 250, 500);
+$valid-gamuts: ("srgb", "display-p3", "rec2020");