From 1867c9976e139fddeb2e0f26416c03724ef24c97 Mon Sep 17 00:00:00 2001 From: Lars van Vianen Date: Wed, 10 Jan 2024 02:00:22 +0100 Subject: [PATCH] v0.0.10 --- VERSION | 2 +- dist/package.json | 2 +- dist/py/hue.gl.py | 2 +- dist/rcpx/hue.gl.rcpx | 2 +- dist/scss/hue/_hue.gl-hcl-map.scss | 2 +- dist/scss/hue/_hue.gl-hcl-var.scss | 2 +- dist/scss/hue/_hue.gl-hex-map.scss | 2 +- dist/scss/hue/_hue.gl-hex-var.scss | 2 +- dist/scss/hue/_hue.gl-rgb-map.scss | 2 +- dist/scss/hue/_hue.gl-rgb-var.scss | 2 +- dist/scss/utils/_base.scss | 13 +++ dist/scss/utils/_blend.scss | 85 +++++++++++++++++- dist/scss/utils/_contrast.scss | 64 ++++++++++++- dist/scss/utils/_filter.scss | 37 ++++++++ dist/scss/utils/_helpers.scss | 31 +++++++ dist/scss/utils/_pattern.scss | 40 +++++++++ dist/scss/utils/_scheme.scss | 140 ++++++++++++++++++++++++++++- dist/scss/utils/_variants.scss | 135 ++++++++++++++++++++++++++-- dist/scss/utils/utils.scss | 1 + dist/styl/hue.gl.styl | 2 +- dist/tex/hue.gl.tex | 2 +- dist/ts/hue.gl.d.ts | 2 +- package.json | 2 +- src/scss/hue/_hue.gl-hcl-map.scss | 2 +- src/scss/hue/_hue.gl-hcl-var.scss | 2 +- src/scss/hue/_hue.gl-hex-map.scss | 2 +- src/scss/hue/_hue.gl-hex-var.scss | 2 +- src/scss/hue/_hue.gl-rgb-map.scss | 2 +- src/scss/hue/_hue.gl-rgb-var.scss | 2 +- src/scss/utils/_base.scss | 13 +++ src/scss/utils/_blend.scss | 85 +++++++++++++++++- src/scss/utils/_contrast.scss | 64 ++++++++++++- src/scss/utils/_filter.scss | 37 ++++++++ src/scss/utils/_helpers.scss | 31 +++++++ src/scss/utils/_pattern.scss | 40 +++++++++ src/scss/utils/_scheme.scss | 140 ++++++++++++++++++++++++++++- src/scss/utils/_variants.scss | 135 ++++++++++++++++++++++++++-- src/scss/utils/utils.scss | 1 + 38 files changed, 1086 insertions(+), 46 deletions(-) create mode 100644 dist/scss/utils/_filter.scss create mode 100644 dist/scss/utils/_pattern.scss create mode 100644 src/scss/utils/_filter.scss create mode 100644 src/scss/utils/_pattern.scss diff --git a/VERSION b/VERSION index 429d94a..b0a1227 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.0.9 \ No newline at end of file +0.0.10 \ No newline at end of file diff --git a/dist/package.json b/dist/package.json index 9383db4..e283844 100644 --- a/dist/package.json +++ b/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", diff --git a/dist/py/hue.gl.py b/dist/py/hue.gl.py index ff014cf..c8a535b 100644 --- a/dist/py/hue.gl.py +++ b/dist/py/hue.gl.py @@ -15,7 +15,7 @@ # ============================================================================= # # hue.gl -# 0.0.9 +# 0.0.10 # # ============================================================================= diff --git a/dist/rcpx/hue.gl.rcpx b/dist/rcpx/hue.gl.rcpx index 3804f3f..f7f21e1 100644 --- a/dist/rcpx/hue.gl.rcpx +++ b/dist/rcpx/hue.gl.rcpx @@ -1,6 +1,6 @@ - + 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); -} \ No newline at end of file +} + + +// 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); + } +} diff --git a/dist/scss/utils/_filter.scss b/dist/scss/utils/_filter.scss new file mode 100644 index 0000000..e5fcddd --- /dev/null +++ b/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; + } +} diff --git a/dist/scss/utils/_helpers.scss b/dist/scss/utils/_helpers.scss index 5d499d0..e5b76f3 100644 --- a/dist/scss/utils/_helpers.scss +++ b/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); +// } diff --git a/dist/scss/utils/_pattern.scss b/dist/scss/utils/_pattern.scss new file mode 100644 index 0000000..be75617 --- /dev/null +++ b/dist/scss/utils/_pattern.scss @@ -0,0 +1,40 @@ +// 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. + + +// ============================================================================ +// Utilities | Pattern +// ============================================================================ + + +// Striped Background Generator +// Creates a striped background pattern with two colors. + +@function hue_striped_background($color_name1, $color_name2, $stripe_width: 10px) { + $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 repeating-linear-gradient( + 45deg, + $color1, + $color1 $stripe_width, + $color2 $stripe_width, + $color2 $stripe_width * 2 + ); +} diff --git a/dist/scss/utils/_scheme.scss b/dist/scss/utils/_scheme.scss index 23e32e2..4d1ca08 100644 --- a/dist/scss/utils/_scheme.scss +++ b/dist/scss/utils/_scheme.scss @@ -23,7 +23,139 @@ // A function to find the complementary color on the color wheel, useful for // creating color schemes. -@function complementary_color($color_name) { - $base-color: hue_color($color_name); - @return adjust-hue($base-color, 180deg); -} \ No newline at end of file + + +// Complementary Color +// Generates the complementary color for a given color. +// ---------------------------------------------------------------------------- + +@function hue_complementary($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 adjust-hue($color, 180deg); +} + + + +// Color Inversion Function +// Inverts a color for high-contrast themes or effects. +// ---------------------------------------------------------------------------- + +@function hue_invert($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 invert($color); +} + + +// Color Rotation Function +// Rotates the hue of a color by a given degree, useful for creating color +// variations. +// ---------------------------------------------------------------------------- + +@function hue_rotate($color_name, $degrees: 15deg) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return adjust-hue($color, $degrees); +} + + +// Monochromatic Color Scheme Generator +// Generates a list of monochromatic colors based on a base color. +// ---------------------------------------------------------------------------- + +@function hue_monochromatic_scheme($base_color_name, $variation: 5%, $amount: 4) { + $base_color: hue_color($base_color_name); + $color_scheme: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $amount { + $color_scheme: append($color_scheme, lighten($base_color, $variation * $i), comma); + } + + @return $color_scheme; +} + + +// Color Scale Generator +// Creates a scale of colors ranging from light to dark based on a base color. +// ---------------------------------------------------------------------------- + +@function hue_color_scale($base_color_name, $steps: 5) { + $base_color: hue_color($base_color_name); + $scale: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $scale: append($scale, lighten($base_color, 10% * $i), comma); + $scale: append($scale, darken($base_color, 10% * $i), comma); + } + + @return $scale; +} + + +// Hue Rotation Scale +// Generates a scale of hues by rotating the base color. + +@function hue_rotation_scale($base_color_name, $steps: 5, $rotation_amount: 20deg) { + $base_color: hue_color($base_color_name); + $rotation_scale: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $rotation_scale: append($rotation_scale, adjust-hue($base_color, $rotation_amount * $i), comma); + } + + @return $rotation_scale; +} + + + +// Opacity Scale Generator +// Generates a set of opacities for a given color. +// ---------------------------------------------------------------------------- + +@function hue_opacity_scale($color_name, $steps: 5, $max_opacity: 1) { + $color: hue_color($color_name); + $opacity_scale: (); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $opacity: $max_opacity - ($i - 1) * ($max_opacity / $steps); + $opacity_scale: append($opacity_scale, rgba($color, $opacity), comma); + } + + @return $opacity_scale; +} diff --git a/dist/scss/utils/_variants.scss b/dist/scss/utils/_variants.scss index 9c0874f..afdb18f 100644 --- a/dist/scss/utils/_variants.scss +++ b/dist/scss/utils/_variants.scss @@ -20,30 +20,153 @@ // Opacity Variants -// Create a function to generate color variants with different opacities. +// Generates color variants with different opacities based on the +// provided color name. // ---------------------------------------------------------------------------- @function hue_color_opacity($color_name, $opacity: 1) { $color: hue_color($color_name); - @if $color != null { - @return rgba($color, $opacity); - } @else { + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; @return null; } + + @return rgba($color, $opacity); } -// Color Shades and Tints +// Color Transparency Function +// Adjusts the transparency of a color to a specified alpha value. // ---------------------------------------------------------------------------- -// Create functions to lighten and darken colors. This is useful for hover + +@function hue_alpha($color_name, $alpha: 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, $alpha); +} + + + +// Color Shades and Tints +// Generates lighter and darker shades of a given color, useful for hover // states, disabled states, or gradients. +// ---------------------------------------------------------------------------- @function hue_shade($color_name, $amount: 10%) { $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + @return darken($color, $amount); } @function hue_tint($color_name, $amount: 10%) { $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + @return lighten($color, $amount); } + + +// Tint and Shade Function +// Generates tints (lighter versions) and shades (darker versions) of +// a given color. +// ---------------------------------------------------------------------------- + +@function hue_tint_shade($color_name, $amount: 10%, $is_tint: true) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @if $is_tint { + @return lighten($color, $amount); + } @else { + @return darken($color, $amount); + } +} + + +// Saturated Color Variant +// Increases the saturation of a given color by a specified amount. +// ---------------------------------------------------------------------------- + +@function hue_saturate($color_name, $amount: 20%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return saturate($color, $amount); +} + + +// Desaturated Color Variant +// Decreases the saturation of a given color by a specified amount. +// ---------------------------------------------------------------------------- + +@function hue_desaturate($color_name, $amount: 20%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return desaturate($color, $amount); +} + + +// Adjust Color Brightness +// ---------------------------------------------------------------------------- + +@function hue_adjust_brightness($color_name, $percentage: 10%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @if lightness($color) > 50% { + @return darken($color, $percentage); + } @else { + @return lighten($color, $percentage); + } +} + + +// Color To Grayscale Function +// Converts a color to its grayscale equivalent based on a specific method +// (e.g., average, luminosity). +// ---------------------------------------------------------------------------- + +@function hue_to_grayscale($color_name, $method: 'luminosity') { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + // Implement grayscale conversion based on the chosen method + // Placeholder for actual implementation + @return 'Grayscale Conversion Placeholder for ' + $method; +} diff --git a/dist/scss/utils/utils.scss b/dist/scss/utils/utils.scss index 6873acb..b075eba 100644 --- a/dist/scss/utils/utils.scss +++ b/dist/scss/utils/utils.scss @@ -22,4 +22,5 @@ @import "_variants.scss"; @import "_blend.scss"; @import "_scheme.scss"; +@import "_pattern.scss"; @import "_helpers.scss"; diff --git a/dist/styl/hue.gl.styl b/dist/styl/hue.gl.styl index 40e94a3..e28ed4f 100644 --- a/dist/styl/hue.gl.styl +++ b/dist/styl/hue.gl.styl @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/dist/tex/hue.gl.tex b/dist/tex/hue.gl.tex index ed155a6..bbd156d 100644 --- a/dist/tex/hue.gl.tex +++ b/dist/tex/hue.gl.tex @@ -15,7 +15,7 @@ % ============================================================================= % % hue.gl -% 0.0.9 +% 0.0.10 % % ============================================================================= diff --git a/dist/ts/hue.gl.d.ts b/dist/ts/hue.gl.d.ts index fed8316..86e0f21 100644 --- a/dist/ts/hue.gl.d.ts +++ b/dist/ts/hue.gl.d.ts @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/package.json b/package.json index 407c35d..381bea6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "hue.gl", "description": "hue.gl is a colour palette developed by Scape Agency.", - "version": "0.0.9", + "version": "0.0.10", "config": { "version_short": "0.0" }, diff --git a/src/scss/hue/_hue.gl-hcl-map.scss b/src/scss/hue/_hue.gl-hcl-map.scss index 1ada65f..1b08211 100644 --- a/src/scss/hue/_hue.gl-hcl-map.scss +++ b/src/scss/hue/_hue.gl-hcl-map.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/hue/_hue.gl-hcl-var.scss b/src/scss/hue/_hue.gl-hcl-var.scss index f1b82aa..ea51a3a 100644 --- a/src/scss/hue/_hue.gl-hcl-var.scss +++ b/src/scss/hue/_hue.gl-hcl-var.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/hue/_hue.gl-hex-map.scss b/src/scss/hue/_hue.gl-hex-map.scss index 322daac..a354ca8 100644 --- a/src/scss/hue/_hue.gl-hex-map.scss +++ b/src/scss/hue/_hue.gl-hex-map.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/hue/_hue.gl-hex-var.scss b/src/scss/hue/_hue.gl-hex-var.scss index 98048e7..ea746d6 100644 --- a/src/scss/hue/_hue.gl-hex-var.scss +++ b/src/scss/hue/_hue.gl-hex-var.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/hue/_hue.gl-rgb-map.scss b/src/scss/hue/_hue.gl-rgb-map.scss index 84dabc9..6bbd906 100644 --- a/src/scss/hue/_hue.gl-rgb-map.scss +++ b/src/scss/hue/_hue.gl-rgb-map.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/hue/_hue.gl-rgb-var.scss b/src/scss/hue/_hue.gl-rgb-var.scss index f1b82aa..ea51a3a 100644 --- a/src/scss/hue/_hue.gl-rgb-var.scss +++ b/src/scss/hue/_hue.gl-rgb-var.scss @@ -15,7 +15,7 @@ // ============================================================================ // // hue.gl -// 0.0.9 +// 0.0.10 // // ============================================================================ diff --git a/src/scss/utils/_base.scss b/src/scss/utils/_base.scss index 9f07488..f04d4e1 100644 --- a/src/scss/utils/_base.scss +++ b/src/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); +} diff --git a/src/scss/utils/_blend.scss b/src/scss/utils/_blend.scss index 0a3c4b9..f2d3d54 100644 --- a/src/scss/utils/_blend.scss +++ b/src/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); +// } diff --git a/src/scss/utils/_contrast.scss b/src/scss/utils/_contrast.scss index b2ba610..2cf3d02 100644 --- a/src/scss/utils/_contrast.scss +++ b/src/scss/utils/_contrast.scss @@ -33,9 +33,9 @@ // 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); @@ -43,6 +43,25 @@ @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); -} \ No newline at end of file +} + + +// 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); + } +} diff --git a/src/scss/utils/_filter.scss b/src/scss/utils/_filter.scss new file mode 100644 index 0000000..e5fcddd --- /dev/null +++ b/src/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; + } +} diff --git a/src/scss/utils/_helpers.scss b/src/scss/utils/_helpers.scss index 5d499d0..e5b76f3 100644 --- a/src/scss/utils/_helpers.scss +++ b/src/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); +// } diff --git a/src/scss/utils/_pattern.scss b/src/scss/utils/_pattern.scss new file mode 100644 index 0000000..be75617 --- /dev/null +++ b/src/scss/utils/_pattern.scss @@ -0,0 +1,40 @@ +// 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. + + +// ============================================================================ +// Utilities | Pattern +// ============================================================================ + + +// Striped Background Generator +// Creates a striped background pattern with two colors. + +@function hue_striped_background($color_name1, $color_name2, $stripe_width: 10px) { + $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 repeating-linear-gradient( + 45deg, + $color1, + $color1 $stripe_width, + $color2 $stripe_width, + $color2 $stripe_width * 2 + ); +} diff --git a/src/scss/utils/_scheme.scss b/src/scss/utils/_scheme.scss index 23e32e2..4d1ca08 100644 --- a/src/scss/utils/_scheme.scss +++ b/src/scss/utils/_scheme.scss @@ -23,7 +23,139 @@ // A function to find the complementary color on the color wheel, useful for // creating color schemes. -@function complementary_color($color_name) { - $base-color: hue_color($color_name); - @return adjust-hue($base-color, 180deg); -} \ No newline at end of file + + +// Complementary Color +// Generates the complementary color for a given color. +// ---------------------------------------------------------------------------- + +@function hue_complementary($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 adjust-hue($color, 180deg); +} + + + +// Color Inversion Function +// Inverts a color for high-contrast themes or effects. +// ---------------------------------------------------------------------------- + +@function hue_invert($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 invert($color); +} + + +// Color Rotation Function +// Rotates the hue of a color by a given degree, useful for creating color +// variations. +// ---------------------------------------------------------------------------- + +@function hue_rotate($color_name, $degrees: 15deg) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return adjust-hue($color, $degrees); +} + + +// Monochromatic Color Scheme Generator +// Generates a list of monochromatic colors based on a base color. +// ---------------------------------------------------------------------------- + +@function hue_monochromatic_scheme($base_color_name, $variation: 5%, $amount: 4) { + $base_color: hue_color($base_color_name); + $color_scheme: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $amount { + $color_scheme: append($color_scheme, lighten($base_color, $variation * $i), comma); + } + + @return $color_scheme; +} + + +// Color Scale Generator +// Creates a scale of colors ranging from light to dark based on a base color. +// ---------------------------------------------------------------------------- + +@function hue_color_scale($base_color_name, $steps: 5) { + $base_color: hue_color($base_color_name); + $scale: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $scale: append($scale, lighten($base_color, 10% * $i), comma); + $scale: append($scale, darken($base_color, 10% * $i), comma); + } + + @return $scale; +} + + +// Hue Rotation Scale +// Generates a scale of hues by rotating the base color. + +@function hue_rotation_scale($base_color_name, $steps: 5, $rotation_amount: 20deg) { + $base_color: hue_color($base_color_name); + $rotation_scale: (); + + @if type-of($base_color) != 'color' { + @warn "The specified base color `#{$base_color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $rotation_scale: append($rotation_scale, adjust-hue($base_color, $rotation_amount * $i), comma); + } + + @return $rotation_scale; +} + + + +// Opacity Scale Generator +// Generates a set of opacities for a given color. +// ---------------------------------------------------------------------------- + +@function hue_opacity_scale($color_name, $steps: 5, $max_opacity: 1) { + $color: hue_color($color_name); + $opacity_scale: (); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @for $i from 1 through $steps { + $opacity: $max_opacity - ($i - 1) * ($max_opacity / $steps); + $opacity_scale: append($opacity_scale, rgba($color, $opacity), comma); + } + + @return $opacity_scale; +} diff --git a/src/scss/utils/_variants.scss b/src/scss/utils/_variants.scss index 9c0874f..afdb18f 100644 --- a/src/scss/utils/_variants.scss +++ b/src/scss/utils/_variants.scss @@ -20,30 +20,153 @@ // Opacity Variants -// Create a function to generate color variants with different opacities. +// Generates color variants with different opacities based on the +// provided color name. // ---------------------------------------------------------------------------- @function hue_color_opacity($color_name, $opacity: 1) { $color: hue_color($color_name); - @if $color != null { - @return rgba($color, $opacity); - } @else { + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; @return null; } + + @return rgba($color, $opacity); } -// Color Shades and Tints +// Color Transparency Function +// Adjusts the transparency of a color to a specified alpha value. // ---------------------------------------------------------------------------- -// Create functions to lighten and darken colors. This is useful for hover + +@function hue_alpha($color_name, $alpha: 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, $alpha); +} + + + +// Color Shades and Tints +// Generates lighter and darker shades of a given color, useful for hover // states, disabled states, or gradients. +// ---------------------------------------------------------------------------- @function hue_shade($color_name, $amount: 10%) { $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + @return darken($color, $amount); } @function hue_tint($color_name, $amount: 10%) { $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + @return lighten($color, $amount); } + + +// Tint and Shade Function +// Generates tints (lighter versions) and shades (darker versions) of +// a given color. +// ---------------------------------------------------------------------------- + +@function hue_tint_shade($color_name, $amount: 10%, $is_tint: true) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @if $is_tint { + @return lighten($color, $amount); + } @else { + @return darken($color, $amount); + } +} + + +// Saturated Color Variant +// Increases the saturation of a given color by a specified amount. +// ---------------------------------------------------------------------------- + +@function hue_saturate($color_name, $amount: 20%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return saturate($color, $amount); +} + + +// Desaturated Color Variant +// Decreases the saturation of a given color by a specified amount. +// ---------------------------------------------------------------------------- + +@function hue_desaturate($color_name, $amount: 20%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @return desaturate($color, $amount); +} + + +// Adjust Color Brightness +// ---------------------------------------------------------------------------- + +@function hue_adjust_brightness($color_name, $percentage: 10%) { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + @if lightness($color) > 50% { + @return darken($color, $percentage); + } @else { + @return lighten($color, $percentage); + } +} + + +// Color To Grayscale Function +// Converts a color to its grayscale equivalent based on a specific method +// (e.g., average, luminosity). +// ---------------------------------------------------------------------------- + +@function hue_to_grayscale($color_name, $method: 'luminosity') { + $color: hue_color($color_name); + + @if type-of($color) != 'color' { + @warn "The specified color `#{$color_name}` could not be found."; + @return null; + } + + // Implement grayscale conversion based on the chosen method + // Placeholder for actual implementation + @return 'Grayscale Conversion Placeholder for ' + $method; +} diff --git a/src/scss/utils/utils.scss b/src/scss/utils/utils.scss index 6873acb..b075eba 100644 --- a/src/scss/utils/utils.scss +++ b/src/scss/utils/utils.scss @@ -22,4 +22,5 @@ @import "_variants.scss"; @import "_blend.scss"; @import "_scheme.scss"; +@import "_pattern.scss"; @import "_helpers.scss";