From 372bed7f630ba8a74be56de6dc884aa6309d621a Mon Sep 17 00:00:00 2001 From: Lars van Vianen Date: Fri, 5 Jan 2024 11:45:34 +0100 Subject: [PATCH] WIP --- dist/README.md | 219 ++++++++++++++++++++++++++++++++++++++++----- dist/package.json | 14 +-- package-lock.json | 42 +++++++-- package.json | 2 +- script/ts/index.ts | 2 +- 5 files changed, 239 insertions(+), 40 deletions(-) diff --git a/dist/README.md b/dist/README.md index e8839f7..9cd64df 100644 --- a/dist/README.md +++ b/dist/README.md @@ -20,6 +20,10 @@ ### Contents - [Introduction](#introduction) +- [Colours](#colours) +- [Features](#features) +- [Installation](#installation) +- [Examples](#examples) - [Colophon](#colophon)
@@ -46,29 +50,6 @@ hue.gl offers a comprehensive suite of tools and features that cater to a wide r Join us in exploring the vivid and perceptually-optimized world of hue.gl, where every color is more than just a hue - it's an experience. -## Features - -`hue.gl` features a comprehensive color scheme generator and management tool designed to create and handle color swatches effectively. It provides a range of functionalities including generating color schemes based on various parameters, encoding them into different formats like ASE (Adobe Swatch Exchange), and more. - -- Generate color schemes with configurable parameters. -- Support for multiple color models such as RGB, HSL, CMYK, etc. -- Export color schemes in different formats, including ASE. -- Intuitive and user-friendly interface for easy color scheme customization. - -## Installation - -### HTML Script Tag - -``` html - -``` - -### NPM Module - -``` bash -npm i hue.gl -``` - ## Colours Explore a glimpse of the vibrant and diverse color palette offered by `hue.gl`. Each color has been carefully crafted to provide a wide range of hues and shades, suitable for various design needs. @@ -105,6 +86,197 @@ Explore a glimpse of the vibrant and diverse color palette offered by `hue.gl`. +## Features + +`hue.gl` is not just a color palette – it's a comprehensive Perceptual Colour System, offering an array of features tailored for designers, artists, and anyone with a passion for color. `hue.gl` features a comprehensive color scheme generator and management tool designed to create and handle color swatches effectively. It provides a range of functionalities including generating color schemes based on various parameters, encoding them into different formats like ASE (Adobe Swatch Exchange), and more. + +Here's what sets hue.gl apart: + +### Perceptual Color Mapping + +- **Intuitive Color Perception:** Colors in hue.gl are mapped based on human visual perception, ensuring the hues you pick are naturally harmonious and visually effective. +- **Wide Gamut of Colors:** A vast array of colors spanning across different shades and tones, each meticulously calibrated for perceptual uniformity. + +### Advanced Color Scheme Generator + +- **Versatile Scheme Creation:** Generate color schemes with a variety of parameters, such as complementary, analogous, monochromatic, and more. +- **Multiple Color Models Support:** Seamlessly work with various color models including RGB, HSL, CMYK, and others, ensuring compatibility across different platforms and applications. + +### Export and Integration Flexibility + +- **Multiple Export Formats:** Export your color schemes in popular formats like ASE (Adobe Swatch Exchange), ensuring easy integration with design tools. +- **Integrates with Design Software:** Compatible with major design software, allowing you to bring hue.gl's colors directly into your creative workflow. + +### Accessibility and Readability Tools + +- **Contrast Checker:** Ensure your color combinations meet accessibility standards with the built-in contrast checker. +- **Readable Color Selection:** Dynamic functions to determine readable text colors over any background, enhancing user experience and accessibility. + +### Customizable for Your Needs + +- **SCSS and CSS Integration:** Easily integrate hue.gl colors into your web projects with SCSS functions and mixins, or use CSS variables for straightforward application. +- **Utility Classes and Mixins:** A comprehensive set of utility classes and mixins for text, background, and border colors, making HTML and CSS styling more efficient. + +### Open Source and Evolving + +- **Community-Driven Development:** As an open-source project, hue.gl is constantly evolving with contributions from a global community of developers and color enthusiasts. +- **Regular Updates and Improvements:** Stay up-to-date with regular updates that bring new features, color options, and enhancements. + +Embrace the full potential of colors with `hue.gl` – your comprehensive tool for perceptual color design, ensuring that your projects stand out with visually appealing and accessible color schemes. + +## Installation + +### HTML Script Tag + +``` html + +``` + +### NPM Module + +``` bash +npm i hue.gl +``` + +## Examples + +### Accessing Colors + +```scss +.element { + background-color: #c6727d; // Using the 'Salmon' color +} +``` + +```scss +.element { + background-color: $N0155; // Using the 'Salmon' color +} +``` + +```scss +.element { + background-color: hue(N0155); // Using the 'Salmon' color +} +``` + +Using the `hue-color` function to apply a specific color from the hue.gl color map: + +```scss +.element { + background-color: hue-color(N1201); // Using the 'Green' color +} +``` + +### Dynamic Text Color for Readability + +Applying dynamic text color for better readability based on the background color: + +```scss +.element { + background-color: hue-color(N2551); // Azure color + color: dynamic-text-color(N2551); // Text color for best contrast +} +``` + +### Complementary Colors + +Generating a complementary color for design harmony: + +```scss +.element { + background-color: hue-color(N3001); // Magenta color + border-color: complementary-color(N3001); // Complementary color to Magenta +} +``` + +### Opacity Variants + +Creating color variants with different opacities: + +```scss +.element { + background-color: hue-color-opacity(N1951, 0.5); // 50% opacity Teal color +} +``` + +### Color Shades and Tints + +Applying shades and tints for hover states, disabled states, or gradients: + +```scss +.element { + background-color: hue-shade(N0751, 15%); // Darker Lime color +} +.hover-element:hover { + background-color: hue-tint(N0751, 15%); // Lighter Lime color +} +``` + +### Accessible Text Color + +Ensuring text color contrasts well with its background: + +```scss +.element { + @include accessible-text-color(N2701); // Accessible text color based on Indigo background +} +``` + +### Gradient Backgrounds + +Creating a linear gradient background: + +```scss +.element { + @include gradient-bg(N2251, N2401); // Gradient from Sky to Blue +} +``` + +### Theming Components + +Applying themes to components like buttons: + +```scss +.button { + @include button-theme(N3601, N0001); // Red background with Grey text +} +``` + +### Blending Colors + +Blending two colors for a unique background: + +```scss +.element { + @include blend-colors(N0151, N3001, 50%); // Blend of Salmon and Magenta +} +``` + +### Utility Classes in HTML + +Using generated utility classes for quick styling: + +```html +
// Green text on Rose background + Sample Text +
+``` + +### Using CSS Variables + +Applying CSS variables in your HTML: + +```html +
+ Sample Text +
+``` + +--- + +These examples will provide your users with practical ways to implement the features of your SCSS toolkit, enhancing their understanding and ease of use. + ## Links - [Website](https://www.hue.gl) @@ -172,7 +344,6 @@ Explore a glimpse of the vibrant and diverse color palette offered by `hue.gl`. | `.gdiagramstyle` | OmniGraffle Diagram Style File | | `.pal` | Painter Custom Palettes File | - ## Other Standards `hue.gl` supports a variety of color standards. Below is a list of these standards along with their corresponding SCSS map files: diff --git a/dist/package.json b/dist/package.json index 8e8ab8e..01a9414 100644 --- a/dist/package.json +++ b/dist/package.json @@ -15,6 +15,12 @@ ], "license": "MIT", "homepage": "https://www.hue.gl/", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/scape-agency" + } + ], "type": "module", "main": "js/index", "types": "js/index", @@ -47,11 +53,5 @@ "repository": { "type": "git", "url": "git+https://github.com/scape-agency/hue.gl.git" - }, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/scape-agency" - } - ] + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ac951e0..8a49bd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "hue.gl", - "version": "0.0.7", + "version": "0.0.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "hue.gl", - "version": "0.0.7", + "version": "0.0.8", "funding": [ { "type": "github", @@ -43,7 +43,7 @@ "icon.gl": "^0.0.4", "loop.gl": "^0.0.1", "mini-css-extract-plugin": "^2.7.6", - "pack.gl": "^0.0.25", + "pack.gl": "^0.0.34", "page.gl": "^0.0.3", "postcss-loader": "^7.3.3", "postcss-preset-env": "^9.1.2", @@ -4104,6 +4104,17 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/@types/jsdom": { + "version": "21.1.6", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz", + "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/tough-cookie": "*", + "parse5": "^7.0.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -4230,6 +4241,12 @@ "winston": "^3.0.0" } }, + "node_modules/@types/tough-cookie": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", + "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", + "dev": true + }, "node_modules/@types/triple-beam": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz", @@ -11522,23 +11539,34 @@ } }, "node_modules/pack.gl": { - "version": "0.0.25", - "resolved": "https://registry.npmjs.org/pack.gl/-/pack.gl-0.0.25.tgz", - "integrity": "sha512-MuAUZBy/vGJuTMhn/8reAzDm3Jl0ZB+HCAq5JNxWBfwKB2TGzDHpVJlh4buPhmG4P8riDRHie1lBxb3va6GQOw==", + "version": "0.0.34", + "resolved": "https://registry.npmjs.org/pack.gl/-/pack.gl-0.0.34.tgz", + "integrity": "sha512-E03pIKA0rmTQTMmjTOeJqX0Jyo98wrCulEs8djBxPB/K28r8CNZQiIR3NAeJtRRFsYgO4yaFDDeOGSPbyDkDeQ==", "dev": true, "dependencies": { + "@babel/core": "^7.23.6", + "@babel/preset-env": "^7.23.6", + "@babel/preset-typescript": "^7.23.3", "@types/fs-extra": "^11.0.4", "@types/glob": "^8.1.0", + "@types/jsdom": "^21.1.6", + "@types/node": "^20.10.5", "@types/nunjucks": "^3.2.6", "@types/svg-sprite": "^0.0.38", - "autoprefixer": "^10.4.15", + "autoprefixer": "^10.4.16", + "cssnano": "^6.0.3", "del": "^7.1.0", + "eslint": "^8.41.0", + "eslint-config-prettier": "^9.0.0", "fantasticon": "^2.0.0", "fs-extra": "^11.2.0", "glob": "^10.3.10", "jsdom": "^23.0.1", "lodash": "^4.17.21", "nunjucks": "^3.2.4", + "postcss": "^8.4.32", + "postcss-preset-env": "^9.3.0", + "prettier": "^3.0.3", "sass": "^1.69.7", "sharp": "^0.33.1", "svg-sprite": "^2.0.2", diff --git a/package.json b/package.json index 110639d..c781ca2 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "icon.gl": "^0.0.4", "loop.gl": "^0.0.1", "mini-css-extract-plugin": "^2.7.6", - "pack.gl": "^0.0.25", + "pack.gl": "^0.0.34", "page.gl": "^0.0.3", "postcss-loader": "^7.3.3", "postcss-preset-env": "^9.1.2", diff --git a/script/ts/index.ts b/script/ts/index.ts index 49bc840..d827a91 100644 --- a/script/ts/index.ts +++ b/script/ts/index.ts @@ -91,7 +91,7 @@ async function main() { // -------------------------------------------------------------------- logger.header('Install .gl libraries'); - // await gl_installer(); + await gl_installer(); // Dirs Clean