WIP

src/scss/index.scss

@@ -1,3 +1,17 @@
+// 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.
+
 @charset "utf-8";
 
 /**
@@ -25,4 +39,4 @@ TABLE OF CONTENTS
 
 @import "hue/_hue.gl-hex-map.scss";
 @import "hue/_hue.gl-hex-var.scss";
-@import "_utils.scss";
+@import "utils/utils.scss";

src/scss/utils/_base.scss

@@ -0,0 +1,32 @@
+// 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 Getter Function
+// ----------------------------------------------------------------------------
+// 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) {
+        @return map-get($hue, $color_name);
+    } @else {
+        @warn "Unknown `#{$color_name}` in `$hue`.";
+        @return null;
+    }
+}

src/scss/utils/_contrast.scss

@@ -0,0 +1,57 @@
+// 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.
+
+
+
+
+
+// Contrast Function
+// ----------------------------------------------------------------------------
+// A function to determine if you need a light or dark text color
+// on a specific background for readability.
+
+@function color_contrast($background-color) {
+    @if (lightness($background-color) > 50%) {
+        @return black; // Dark text on light background
+    } @else {
+        @return white; // Light text on dark background
+    }
+}
+
+
+// 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);
+}
+
+
+// Dynamic Text Color
+// ----------------------------------------------------------------------------
+// A function to dynamically determine whether to use light or dark text
+// based on the background color for better readability.
+
+@function color_contrast_dynamic($background-color_name) {
+    $background-color: hue-color($background-color_name);
+    @if (hue-contrast($background-color, black) > 4.5) {
+        @return black;
+    } @else {
+        @return white;
+    }
+}

src/scss/_utils.scss → src/scss/utils/_utils.scss

@@ -18,63 +18,24 @@
 // Functions
 // ============================================================================
 
-// Color Getter Function: 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) {
-        @return map-get($hue, $color-name);
-    } @else {
-        @warn "Unknown `#{$color-name}` in `$hue`.";
-        @return null;
-    }
-}
-
-
-// Contrast Function (Optional): A function to determine if you need a light
-// or dark text color on a specific background for readability.
-
-@function contrast-color($background-color) {
-    @if (lightness($background-color) > 50%) {
-        @return black; // Dark text on light background
-    } @else {
-        @return white; // Light text on dark background
-    }
-}
-
-// Contrast Checker: A function to calculate the contrast ratio between two colors, which is useful for accessibility considerations.
-@function hue-contrast($color1-name, $color2-name) {
-    $color1: hue-color($color1-name);
-    $color2: hue-color($color2-name);
-    @return contrast-ratio($color1, $color2);
-  }
 
 
-//   Dynamic Text Color: A function to dynamically determine whether to use light or dark text based on the background color for better readability.
-  @function dynamic-text-color($background-color-name) {
-    $background-color: hue-color($background-color-name);
-    @if (hue-contrast($background-color, black) > 4.5) {
-      @return black;
-    } @else {
-      @return white;
-    }
-  }
 
 
 // Complementary Color Function
 // ----------------------------------------------------------------------------
 // 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);
+@function complementary-color($color_name) {
+    $base-color: hue_color($color_name);
     @return adjust-hue($base-color, 180deg);
   }
 
 // Opacity Variants: Create a function to generate color variants with different opacities.
 
-@function hue-color-opacity($color-name, $opacity: 1) {
-    $color: hue-color($color-name);
+@function hue_color-opacity($color_name, $opacity: 1) {
+    $color: hue_color($color_name);
     @if $color != null {
       @return rgba($color, $opacity);
     } @else {
@@ -83,13 +44,13 @@
   }
 
 //   Color Shades and Tints: Create functions to lighten and darken colors. This is useful for hover states, disabled states, or gradients.
-  @function hue-shade($color-name, $amount: 10%) {
-    $color: hue-color($color-name);
+  @function hue_shade($color_name, $amount: 10%) {
+    $color: hue_color($color_name);
     @return darken($color, $amount);
   }
 
-  @function hue-tint($color-name, $amount: 10%) {
-    $color: hue-color($color-name);
+  @function hue_tint($color_name, $amount: 10%) {
+    $color: hue_color($color_name);
     @return lighten($color, $amount);
   }
 
@@ -102,39 +63,39 @@
 // text and background colors throughout your stylesheets.
 // They make it easy to maintain consistency and make changes later if needed.
 
-@mixin text-color($color-name) {
-    color: hue-color($color-name);
+@mixin text-color($color_name) {
+    color: hue_color($color_name);
 }
 
-@mixin bg-color($color-name) {
-    background-color: hue-color($color-name);
+@mixin bg-color($color_name) {
+    background-color: hue_color($color_name);
 }
 
-@mixin border-color($color-name) {
-    border-color: hue-color($color-name);
+@mixin border-color($color_name) {
+    border-color: hue_color($color_name);
   }
 
 
 //   Accessibility Mixin: A mixin to ensure text color contrasts well with its background for accessibility.
-  @mixin accessible-text-color($background-color-name) {
-    $background-color: hue-color($background-color-name);
+  @mixin accessible-text-color($background-color_name) {
+    $background-color: hue_color($background-color_name);
     color: contrast-color($background-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(hue-color($start-color-name), hue-color($end-color-name));
+  @mixin gradient-bg($start-color_name, $end-color_name) {
+    background: linear-gradient(hue_color($start-color_name), hue_color($end-color_name));
   }
 
 //   Themed Components: Create a set of mixins for theming components. This can include buttons, links, etc.
-@mixin button-theme($bg-color-name, $text-color-name: null) {
-    @include bg-color($bg-color-name);
-    @if $text-color-name != null {
-      @include text-color($text-color-name);
+@mixin button-theme($bg-color_name, $text-color_name: null) {
+    @include bg-color($bg-color_name);
+    @if $text-color_name != null {
+      @include text-color($text-color_name);
     } @else {
-      @include accessible-text-color($bg-color-name);
+      @include accessible-text-color($bg-color_name);
     }
     // Add more button styles here
   }
@@ -143,8 +104,8 @@
 
 
   @mixin blend-colors($color1-name, $color2-name, $percentage: 50%) {
-    $color1: hue-color($color1-name);
-    $color2: hue-color($color2-name);
+    $color1: hue_color($color1-name);
+    $color2: hue_color($color2-name);
     background-color: mix($color1, $color2, $percentage);
   }
 
@@ -156,27 +117,27 @@
   // for each color in your map. It generates classes like .text-N0001,
   // .bg-N0001, etc., for quick and easy styling in HTML.
 
-  @each $color-name, $color-value in $hue {
+  @each $color_name, $color-value in $hue {
 
-    .text-#{$color-name} {
-        @include text-color($color-name);
+    .text-#{$color_name} {
+        @include text-color($color_name);
     }
 
-    .bg-#{$color-name} {
-      @include bg-color($color-name);
+    .bg-#{$color_name} {
+      @include bg-color($color_name);
     }
 
-    .border-#{$color-name} {
-        @include border-color($color-name);
+    .border-#{$color_name} {
+        @include border-color($color_name);
       }
 
 }
 
 // CSS Variables Generator: If you prefer using CSS variables, create a mixin to generate them from your SCSS map.
 
 :root {
-    @each $color-name, $color-value in $hue {
-      --color-#{$color-name}: #{$color-value};
+    @each $color_name, $color-value in $hue {
+      --color-#{$color_name}: #{$color-value};
     }
   }
 

src/scss/utils/utils.scss

@@ -0,0 +1,25 @@
+// 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.
+
+
+
+
+
+
+@import "_base.scss";
+
+
+@import "_contrast.scss";
+
+@import "_utils.scss";