v0.0.10

VERSION

@@ -1 +1 @@
-0.0.9
+0.0.10

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hue.gl",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "hue.gl is a colour palette developed by Scape Agency.",
   "keywords": [
     "hue.gl",

dist/py/hue.gl.py

@@ -15,7 +15,7 @@
 # =============================================================================
 #
 # hue.gl
-# 0.0.9
+# 0.0.10
 #
 # =============================================================================
 

dist/rcpx/hue.gl.rcpx

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE palette PUBLIC "-//Kreative//DTD ResplendentColor 1.0//EN" "http://www.kreativekorp.com/dtd/rcpx.dtd">
-<!-- hue.gl, version: 0.0.9 - https://www.hue.gl/ -->
+<!-- hue.gl, version: 0.0.10 - https://www.hue.gl/ -->
 <palette name="Open Color"
          orientation="square"
          hwidth="241" hheight= "85"

dist/scss/hue/_hue.gl-hcl-map.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/hue/_hue.gl-hcl-var.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/hue/_hue.gl-hex-map.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/hue/_hue.gl-hex-var.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/hue/_hue.gl-rgb-map.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/hue/_hue.gl-rgb-var.scss

@@ -15,7 +15,7 @@
 // ============================================================================
 //
 // hue.gl
-// 0.0.9
+// 0.0.10
 //
 // ============================================================================
 

dist/scss/utils/_base.scss

@@ -23,6 +23,7 @@
 // ----------------------------------------------------------------------------
 // This function will retrieve a color value based on a given color name. 
 // It's useful when you want to access a color from the $hue map.
+// ----------------------------------------------------------------------------
 
 @function hue_color($color_name) {
     @if map-has-key($hue, $color_name) {
@@ -38,9 +39,21 @@
 // CSS Variables Generator
 // ----------------------------------------------------------------------------
 // A mixin to generate CSS variables from your SCSS map.
+// ----------------------------------------------------------------------------
 
 :root {
     @each $color_name, $color-value in $hue {
     --color-#{$color_name}: #{$color-value};
     }
 }
+
+
+// Random Color Generator
+// ----------------------------------------------------------------------------
+// Generates a random color within a specified hue and luminance range.
+// ----------------------------------------------------------------------------
+
+@function hue_random_color($hue_min: 0, $hue_max: 360, $luminance: 50%) {
+    $hue: random($hue_max - $hue_min) + $hue_min;
+    @return hsl($hue, 100%, $luminance);
+}

dist/scss/utils/_blend.scss

@@ -18,9 +18,26 @@
 // ============================================================================
 
 
-// Gradient Mixin
+
+// Gradient Color
+// Generates a gradient from one color to another.
 // ----------------------------------------------------------------------------
+
+@function hue_gradient($start_color_name, $end_color_name) {
+    $start_color: hue_color($start_color_name);
+    $end_color: hue_color($end_color_name);
+
+    @if type-of($start_color) != 'color' or type-of($end_color) != 'color' {
+        @warn "One of the specified gradient colors could not be found.";
+        @return null;
+    }
+
+    @return linear-gradient($start_color, $end_color);
+}
+
+// Gradient Mixin
 // Create a mixin for generating gradients with your color palette.
+// ----------------------------------------------------------------------------
 
 @mixin gradient_bg($start_color_name, $end_color_name) {
     background: linear-gradient(
@@ -30,6 +47,23 @@
 }
 
 
+// Color Blending Function
+// Blends two colors together based on a specified weight.
+// ----------------------------------------------------------------------------
+
+@function hue_blend_colors($color_name1, $color_name2, $weight: 50%) {
+    $color1: hue_color($color_name1);
+    $color2: hue_color($color_name2);
+
+    @if type-of($color1) != 'color' or type-of($color2) != 'color' {
+        @warn "One or both specified colors could not be found.";
+        @return null;
+    }
+
+    @return mix($color1, $color2, $weight);
+}
+
+
 // Color Blending Mixin
 // ----------------------------------------------------------------------------
 // A mixin to blend two colors from your color map.
@@ -41,3 +75,52 @@
 }
 
 
+
+
+// Grayscale Color Variant
+// Converts a color to its grayscale equivalent.
+// ----------------------------------------------------------------------------
+
+@function hue_grayscale($color_name) {
+    $color: hue_color($color_name);
+
+    @if type-of($color) != 'color' {
+        @warn "The specified color `#{$color_name}` could not be found.";
+        @return null;
+    }
+
+    @return grayscale($color);
+}
+
+// Blend Colors
+// Mixes two colors together in a specified ratio.
+// ----------------------------------------------------------------------------
+
+@function hue_blend($color_name1, $color_name2, $weight: 50%) {
+    $color1: hue_color($color_name1);
+    $color2: hue_color($color_name2);
+
+    @if type-of($color1) != 'color' or type-of($color2) != 'color' {
+        @warn "One of the specified colors could not be found.";
+        @return null;
+    }
+
+    @return mix($color1, $color2, $weight);
+}
+
+
+
+// Background Gradient with Direction
+// Generates a background gradient with a specified direction.
+
+// @function hue_background_gradient($start_color_name, $end_color_name, $direction: to bottom) {
+//     $start_color: hue_color($start_color_name);
+//     $end_color: hue_color($end_color_name);
+
+//     @if type-of($start_color) != 'color' or type-of($end_color) != 'color' {
+//         @warn "One or both specified colors could not be found.";
+//         @return null;
+//     }
+
+//     @return background-image: linear-gradient($direction, $start_color, $end_color);
+// }

dist/scss/utils/_contrast.scss

@@ -33,16 +33,35 @@
 
 
 // Contrast Checker
-// ----------------------------------------------------------------------------
 // A function to calculate the contrast ratio between two colors, which is
 // useful for accessibility considerations.
+// ----------------------------------------------------------------------------
 
 @function color_contrast_checker($color1-name, $color2-name) {
     $color1: hue-color($color1-name);
     $color2: hue-color($color2-name);
     @return contrast-ratio($color1, $color2);
 }
 
+// Color Contrast Ratio
+// Calculates the contrast ratio between two colors, useful for accessibility
+//  checks.
+// ----------------------------------------------------------------------------
+
+@function hue_contrast_ratio($color_name1, $color_name2) {
+    $color1: hue_color($color_name1);
+    $color2: hue_color($color_name2);
+
+    @if type-of($color1) != 'color' or type-of($color2) != 'color' {
+        @warn "One or both specified colors could not be found.";
+        @return null;
+    }
+
+    // Implement contrast ratio formula
+    // Placeholder for actual calculation
+    @return 'Contrast Ratio Calculation Placeholder';
+}
+
 
 // Dynamic Text Color
 // ----------------------------------------------------------------------------
@@ -59,6 +78,26 @@
 }
 
 
+
+// Contrast Text Color
+// Generates a contrasting text color (black or white) based on the background color.
+// ----------------------------------------------------------------------------
+
+@function hue_contrast_text_color($background_color_name) {
+    $background_color: hue_color($background_color_name);
+
+    @if type-of($background_color) != 'color' {
+        @warn "The specified color `#{$background_color_name}` could not be found.";
+        @return null;
+    }
+
+    @if lightness($background_color) > 60% {
+        @return black;
+    } @else {
+        @return white;
+    }
+}
+
 // Accessibility Mixin
 // ----------------------------------------------------------------------------
 // A mixin to ensure text color contrasts well with its background for
@@ -67,4 +106,25 @@
 @mixin accessible_text_color($background_color_name) {
     $background-color: hue_color($background_color_name);
     color: color_contrast_checker($background-color);
-}
+}
+
+
+// Readable Overlay Text Color
+// ----------------------------------------------------------------------------
+// Determines a readable color (light or dark) for text overlays on any
+// background.
+
+@function hue_readable_overlay($background_color_name) {
+    $background_color: hue_color($background_color_name);
+
+    @if type-of($background_color) != 'color' {
+        @warn "The specified color `#{$background_color_name}` could not be found.";
+        @return null;
+    }
+
+    @if lightness($background_color) > 50% {
+        @return rgba(black, 0.7);
+    } @else {
+        @return rgba(white, 0.7);
+    }
+}

dist/scss/utils/_filter.scss

@@ -0,0 +1,37 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+
+
+// Color Filter Function
+// Applies a filter effect to a color (e.g., sepia, brightness).
+
+@function hue_apply_filter($color_name, $filter: 'sepia') {
+    $color: hue_color($color_name);
+
+    @if type-of($color) != 'color' {
+        @warn "The specified color `#{$color_name}` could not be found.";
+        @return null;
+    }
+
+    @if $filter == 'sepia' {
+        @return sepia($color);
+    } @else if $filter == 'brightness' {
+        @return brightness($color, 150%);
+    } else {
+        @warn "The specified filter `#{$filter}` is not supported.";
+        @return $color;
+    }
+}

dist/scss/utils/_helpers.scss

@@ -75,3 +75,34 @@
     }
 
 }
+
+
+// Semi-Transparent Border Color
+// Generates a semi-transparent version of a color, suitable for borders.
+// ----------------------------------------------------------------------------
+
+@function hue_border_color($color_name, $opacity: 0.5) {
+    $color: hue_color($color_name);
+
+    @if type-of($color) != 'color' {
+        @warn "The specified color `#{$color_name}` could not be found.";
+        @return null;
+    }
+
+    @return rgba($color, $opacity);
+}
+
+
+// Box Shadow Generator
+// Creates a box shadow with adjustable properties.
+
+// @function hue_box_shadow($color_name, $opacity: 0.5, $x: 0px, $y: 2px, $blur: 4px) {
+//     $color: hue_color($color_name);
+
+//     @if type-of($color) != 'color' {
+//         @warn "The specified color `#{$color_name}` could not be found.";
+//         @return null;
+//     }
+
+//     @return box-shadow: $x $y $blur rgba($color, $opacity);
+// }