move.gl 0.0.1

package/scss/functions/scenes/_bubble.scss

@@ -0,0 +1,19 @@
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+    background: linear-gradient(135deg, #ffd2c1, #f9d0d3);
+}
+
+.scene {
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+}

package/scss/functions/scenes/_index.scss

@@ -0,0 +1,20 @@
+// 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.
+
+
+// Scenes
+// ============================================================================
+
+
+// @forward "bubble";

package/scss/keyframes/_beat.scss

@@ -0,0 +1,26 @@
+// ============================================================================
+// Beat
+// ============================================================================
+
+@keyframes animate_beat {
+    0%, 90% { transform: scale($animate-scale-base); }
+    45% { transform: scale($animate-scale-beat); }
+}
+
+@keyframes animate_beat_fade {
+    0%, 100% {
+        opacity: $animate-opacity-fade;
+        transform: scale($animate-scale-base);
+    }
+    50% {
+        opacity: 1;
+        transform: scale($animate-scale-beat-fade);
+    }
+}
+
+@keyframes animate_beat_double {
+    0%, 100% { transform: scale($animate-scale-base); }
+    25% { transform: scale($animate-scale-beat-double-small); }
+    50% { transform: scale($animate-scale-beat-double-large); }
+    75% { transform: scale($animate-scale-beat-double-small); }
+}

package/scss/maps/_mouse.scss

@@ -0,0 +1,96 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Cursors Maps Module
+/// ===========================================================================
+/// 
+/// @group Mouse
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+
+
+// ============================================================================
+// Maps
+// ============================================================================
+
+/// 
+/// Cursor Styles Map
+/// ---------------------------------------------------------------------------
+///
+/// A map defining standard cursor styles for easy reference and extensibility.
+/// Allows for uniform application of cursor styles across elements.
+///
+$cursor_styles: (
+
+    // General
+    "auto": auto,                   // Default cursor
+    "default": default,             // The platform-dependent default cursor. Typically an arrow.
+    "none": none,                   // No cursor is rendered.
+
+    // Links & Status
+    "context-menu": context-menu,   // Indicates a context menu is available
+    "help": help,                   // Can be used for elements that provide additional information
+    "pointer": pointer,             // Indicates a link. Typically an image of a pointing hand.
+    "progress": progress,           // Indicates progress
+    "wait": wait,                   // Indicates a waiting state, often used for loading
+
+    // Selection
+    "cell": cell,                   // Indicates a cell or selectable item
+    "crosshair": crosshair,         // Useful for precision elements, like in a drawing tool
+    "text": text,                   // The text can be selected. Typically the shape of an I-beam.
+    "vertical-text": vertical-text, // The vertical text can be selected. Typically the shape of a sideways I-beam.
+
+    // Drag & drop
+    "alias": alias,                 // Can indicate an alias of/shortcut to something
+    "copy": copy,                   // Indicates something can be copied
+    "move": move,                   // Something is to be moved.
+    "no-drop": no-drop,             // Indicates that dropping is not allowed
+    "not-allowed": not-allowed,     // Indicates an action is not allowed
+    "grab": grab,                   // Something can be grabbed (dragged to be moved).
+    "grabbing": grabbing,           // Something is being grabbed (dragged to be moved).
+
+    // Resizing & Scrolling
+    "all-scroll": all-scroll,       // Indicates scrolling in any direction
+    "col-resize": col-resize,       // Indicates that a column can be resized
+    "row-resize": row-resize,       // Indicates that a row can be resized
+    "n-resize": n-resize,           // thin long arrow pointing towards the top    Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
+    // In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
+    "e-resize": e-resize,           // thin long arrow pointing towards the right
+    "s-resize": s-resize,           // thin long arrow pointing down
+    "w-resize": w-resize,           // thin long arrow pointing towards the left
+    "ne-resize": ne-resize,         // thin long arrow pointing top-right
+    "nw-resize": nw-resize,         // thin long arrow pointing top-left
+    "se-resize": se-resize,         // thin long arrow pointing bottom-right
+    "sw-resize": sw-resize,
+    "ew-resize": ew-resize,         // thin long arrow pointing left and right    Bidirectional resize cursor.
+    "ns-resize": ns-resize,         // thin long arrow pointing up and down
+    "nesw-resize": nesw-resize,     // thin long arrow pointing both to the top-right and bottom-left
+    "nwse-resize": nwse-resize,
+
+    // Zooming
+    "zoom-in": zoom-in, // Indicates that something can be zoomed in
+    "zoom-out": zoom-out, // Indicates that something can be zoomed out
+
+    // Additions start here
+    "disabled": not-allowed,
+    "resize-vertical": ns-resize, // For vertical resizing
+    "resize-horizontal": ew-resize, // For horizontal resizing
+    "resize-diagonal-1": nwse-resize, // For diagonal resizing (top-left to bottom-right)
+    "resize-diagonal-2": nesw-resize, // For diagonal resizing (top-right to bottom-left)
+
+);

package/scss/mixins/_accessibility.scss

@@ -0,0 +1,70 @@
+
+
+
+// ============================================================================
+// Accessibility
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+/// Set the progress cursor for elements with `aria-busy="true"`.
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/// Set the pointer cursor for elements that control other elements, indicated
+/// by `aria-controls`.
+[aria-controls] {
+    cursor: pointer;
+}
+
+/// Set the default cursor for disabled or non-interactive elements, indicated
+/// by `aria-disabled="true"`.
+[aria-disabled='true'] {
+    cursor: default;
+}
+
+
+
+
+
+// Accessibility Enhancements
+// Using ARIA attributes to improve cursor semantics for better user experience
+// in assistive technologies and for users with disabilities.
+
+/// Mixin to apply cursor styles based on ARIA attributes.
+/// @param {String} $property - The ARIA property (without 'aria-' prefix).
+/// @param {String} $value - The value of the ARIA property.
+/// @param {String} $cursor - The cursor style to apply.
+///
+@mixin cursor_style($property, $value, $cursor) {
+    [#{'aria-' + $property}='#{ $value }'] {
+        cursor: $cursor;
+    }
+}
+
+/// Progress cursor for elements that are updating or being processed.
+/// Applied to `aria-busy="true"` elements.
+/// @group Accessibility
+@include cursor_style('busy', 'true', progress);
+
+/// Pointer cursor for interactive elements that control other elements.
+/// Applied to elements with the `aria-controls` attribute.
+/// @group Accessibility
+@include cursor_style('controls', '', pointer);
+
+/// Default cursor for elements that are disabled or non-interactive.
+/// Applied to `aria-disabled="true"` elements.
+/// @group Accessibility
+@include cursor_style('disabled', 'true', default);
+
+/// Not-allowed cursor for elements in an invalid state.
+/// Example use case: form inputs with `aria-invalid="true"`.
+/// @group Accessibility
+@include cursor_style('invalid', 'true', not-allowed);
+
+/// Help cursor for elements that provide additional information or guidance.
+/// Example use case: elements with `aria-haspopup="true"`.
+/// @group Accessibility
+@include cursor_style('haspopup', 'true', help);

package/scss/mixins/_boot.scss

@@ -0,0 +1,51 @@
+
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+/// Apply a fade-in animation to the `body` element using the `$boot-fadein-time` variable for the duration.
+/// This animation smoothly transitions the opacity of the `body` from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`.
+/// @group Animation
+/// 
+body {
+  -webkit-animation: fadein $boot-fadein-time;
+     -moz-animation: fadein $boot-fadein-time;
+      -ms-animation: fadein $boot-fadein-time;
+       -o-animation: fadein $boot-fadein-time;
+          animation: fadein $boot-fadein-time;
+}
+
+/// Keyframes for the `fadein` animation, transitioning opacity from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`.
+/// @group Animation
+@keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Webkit-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-webkit-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Mozilla-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-moz-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Microsoft-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-ms-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Opera-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-o-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}

package/scss/mixins/_hover.scss

@@ -0,0 +1,51 @@
+/// 
+/// Scales an element when hovered, with a smooth transition.
+/// 
+/// @name hover_scale
+/// @param {Number} $scale-factor - The scale factor on hover (default: 1.05).
+/// @param {Number|Unit} $duration - The duration of the scale transition (default: 0.3s).
+/// @example scss - Usage
+///   @include hover_scale(1.1, 0.4s);
+/// 
+@mixin hover_scale($scale-factor: 1.05, $duration: 0.3s) {
+    transition: transform #{$duration} ease-in-out;
+
+    &:hover {
+        transform: scale(#{$scale-factor});
+    }
+}
+
+/// 
+/// Applies a scaling effect to an element on hover.
+/// 
+/// @name hover_scale
+/// @param {Number} $scale - The scaling factor (default: 1.1).
+/// @param {Number|Unit} $duration - The duration of the transition (default: 0.3s).
+/// @example scss - Usage
+///   @include hover_scale(1.2, 0.5s);
+/// 
+@mixin hover_scale($scale: 1.1, $duration: 0.3s) {
+    transition: transform $duration ease-in-out;
+
+    &:hover {
+        transform: scale($scale);
+    }
+}
+
+/// 
+/// Applies a smooth transition effect on hover for specified properties.
+/// 
+/// @name hover_transition
+/// @param {List} $properties - List of properties to transition (default: all).
+/// @param {Number|Unit} $duration - Duration of the transition (default: 0.3s).
+/// @param {String} $timing-function - Timing function for the transition (default: ease).
+/// @example scss - Usage
+///   @include hover_transition(color, background-color, 0.5s, ease-in-out);
+/// 
+@mixin hover_transition($properties: all, $duration: 0.3s, $timing-function: ease) {
+    transition: #{$properties} #{$duration} #{$timing-function};
+    
+    &:hover {
+        @content;
+    }
+}

package/scss/mixins/_selection.scss

@@ -0,0 +1,321 @@
+
+
+
+// ============================================================================
+// Selection
+// ============================================================================
+
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+@mixin selection {
+    ::selection { @content; }    /*** Works on common browsers ***/
+    ::-moz-selection { @content; }   /*** Works on common browsers ***/
+    ::-o-selection { @content; }   /***For Other Browsers ***/
+    ::-webkit-selection { @content; }   /*** For Webkit ***/
+    ::-ms-selection { @content; }
+}
+
+@include selection {
+    background-color: $color_04;
+    color: $color_02;
+}
+
+
+::-moz-selection
+{
+    color: var(--ptf-color-white);
+    background-color: var(--ptf-accent-1);
+}
+
+::selection
+{
+    color: var(--ptf-color-white);
+    background-color: var(--ptf-accent-1);
+}
+
+::-moz-selection { background: #272727; color: #fff; }
+	 ::selection { background: #272727; color: #fff; }
+
+
+    
+
+
+
+
+// SCSS Mixin for Custom Text Selection
+// ----------------------------------------------------------------------------
+// conditionalThis mixin allows you to define custom colors for text selection,
+// including the background color of the selection and the color of the text
+// within the selection.
+
+@mixin custom-selection($bg-color: #b3d4fc, $text-color: #fff) {
+    &::selection {
+        background-color: $bg-color; // Color of the background
+        color: $text-color; // Color of the text
+    }
+    
+    // For compatibility with Mozilla Firefox
+    &::-moz-selection {
+        background-color: $bg-color; // Color of the background
+        color: $text-color; // Color of the text
+    }
+}
+
+// Usage Example
+// You can use this mixin to apply custom selection styles globally or to specific elements.
+
+// Global Custom Selection
+// ----------------------------------------------------------------------------
+// To apply a custom selection style globally, you can include the mixin
+// within the html or body selector.
+
+
+body {
+    @include custom-selection(#009688, #ffffff); // Teal background with white text
+}
+// Element-Specific Custom Selection
+// To apply custom selection styles to specific elements, include the mixin within the specific element's selector.
+
+
+p.custom-text-selection {
+    @include custom-selection(#ffeb3b, #000); // Yellow background with black text for paragraphs with the .custom-text-selection class
+}
+// Applying to Multiple Elements
+// You can also apply the mixin to multiple elements by grouping selectors.
+
+
+h1, h2, .highlight-text {
+  @include custom-selection(#673ab7, #fff); // Deep purple background with white text for all h1, h2, and .highlight-text class elements
+}
+
+
+// Conditional Text Selection Based on Parent or State
+// You can conditionally apply text selection styles based on a parent element or a specific state, such as a class being applied to a parent element. This is useful for applying different selection styles in different sections of a page or in different components.
+
+
+// Mixin for custom selection
+// ----------------------------------------------------------------------------
+@mixin custom-selection($bg-color, $text-color) {
+    &::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    &::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+// Applying conditional selection styles
+.dark-mode {
+    .text {
+        @include custom-selection(#666, #eee); // Dark mode selection
+
+        &:hover {
+            @include custom-selection(#555, #fff); // Darker selection on hover
+        }
+    }
+}
+
+.light-mode {
+    .text {
+            @include custom-selection(#ddd, #333); // Light mode selection
+
+        &:hover {
+            @include custom-selection(#ccc, #222); // Lighter selection on hover
+        }
+    }
+}
+
+
+// Theming Support with SCSS Maps
+// ----------------------------------------------------------------------------
+// Leverage SCSS maps and loops to apply selection styles based on a theme
+// system. This allows for easy theming and customization across your
+// application.
+
+$themes: (
+    "light": (
+        "selection-bg": #e0f7fa,
+        "selection-text": #00796b
+    ),
+    "dark": (
+        "selection-bg": #004d40,
+        "selection-text": #b2dfdb
+    )
+);
+
+@each $theme-name, $theme-properties in $themes {
+    .#{$theme-name}-theme {
+        @include custom-selection(map-get($theme-properties, "selection-bg"), map-get($theme-properties, "selection-text"));
+    }
+}
+
+
+// Dynamic Color Adjustments
+// ----------------------------------------------------------------------------
+// Utilize SCSS color functions to dynamically adjust selection colors based
+// on a base color. This can be useful for creating selection styles that
+// are always readable and maintain good contrast with the text.
+
+@mixin dynamic-selection($base-color) {
+    $adjusted-bg-color: lighten($base-color, 20%);
+    $adjusted-text-color: darken($base-color, 50%);
+
+    &::selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+    &::-moz-selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+}
+
+.element {
+    @include dynamic-selection(#007bff); // Adjusts selection colors based on the provided base color
+}
+
+
+// Applying to Specific Elements with a Mixin
+// ----------------------------------------------------------------------------
+// Create a mixin that accepts both colors and a list of elements to apply
+// the selection styles to. This approach reduces repetition and increases
+// maintainability.
+
+@mixin apply-selection-to-elements($elements, $bg-color, $text-color) {
+    @each $element in $elements {
+        #{$element}::selection {
+            background-color: $bg-color;
+            color: $text-color;
+        }
+        #{$element}::-moz-selection {
+            background-color: $bg-color;
+            color: $text-color;
+        }
+    }
+}
+
+@include apply-selection-to-elements(('p', 'h1', '.custom-class'), #ffcc80, #f44336);
+
+
+
+// Animated Text Selection Background
+// ----------------------------------------------------------------------------
+// You can create a subtle animation effect for the text selection background using keyframes. This can add a dynamic visual cue when text is selected.
+
+@mixin animated-selection($start-color, $end-color) {
+    @keyframes selectionBackground {
+        0% { background-color: $start-color; }
+        100% { background-color: $end-color; }
+    }
+
+    &::selection {
+        animation: selectionBackground 1s infinite alternate;
+        color: contrast($end-color);
+    }
+    &::-moz-selection {
+        animation: selectionBackground 1s infinite alternate;
+        color: contrast($end-color);
+    }
+}
+
+body {
+    @include animated-selection(lighten($primary-color, 40%), lighten($primary-color, 20%));
+}
+
+
+// Gradient Text Selection
+// ----------------------------------------------------------------------------
+// Applying a gradient to the text selection background can align with modern
+// design trends. Note that this effect might not be consistent across all
+// browsers due to rendering limitations.
+
+@mixin gradient-selection($color1, $color2) {
+    &::selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: mix($color1, $color2, 50%);
+    }
+    &::-moz-selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: mix($color1, $color2, 50%);
+    }
+}
+
+.element {
+  @include gradient-selection(#FFD54F, #D500F9);
+}
+
+
+// Using Global Variables for Theme Consistency
+// Defining global variables for your theme colors allows for consistent and maintainable style application across your project, including text selection.
+
+
+// Define global theme colors
+$theme-colors: (
+  primary: #6200ea,
+  secondary: #03dac6,
+  selection-bg: #B388FF,
+  selection-text: #6200ea,
+);
+
+@mixin theme-selection {
+    &::selection {
+        background-color: map-get($theme-colors, selection-bg);
+        color: map-get($theme-colors, selection-text);
+    }
+    &::-moz-selection {
+        background-color: map-get($theme-colors, selection-bg);
+        color: map-get($theme-colors, selection-text);
+    }
+}
+
+// Apply globally or to specific elements
+body, .custom-text {
+    @include theme-selection;
+}
+
+
+// Pseudo-Element Selection Styles
+// While the ::selection pseudo-element is primarily used for text, you
+// can get creative by applying similar styles to other pseudo-elements
+// for a cohesive look.
+.element {
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background: $primary-color;
+        bottom: -5px;
+        left: 0;
+    }
+
+    &:hover::after {
+        @include gradient-selection(#FFD54F, #D500F9); // Apply gradient to the pseudo-element on hover
+    }
+}
+
+// Scoped Selection Styles with Mixins
+// Creating a mixin to apply scoped selection styles can help manage different
+// selection themes within various parts of your application.
+
+
+@mixin scoped-selection($scope, $bg-color, $text-color) {
+    #{$scope}::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    #{$scope}::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+@include scoped-selection('.light-theme-text', #e0e0e0, #000);
+@include scoped-selection('.dark-theme-text', #333, #fff);