move.gl 0.0.1 → 0.0.2

package/dist/scss/variables/_controls.scss

@@ -0,0 +1,178 @@
+////
+///
+/// Controls & Interaction Variables Module
+/// =========================================================================
+///
+/// Centralized configuration for all user interaction variables including
+/// hover, touch, scroll, cursor, selection, and keyboard controls.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Hover Variables
+// ============================================================================
+
+/// Default hover transition duration
+$hover-duration: 0.3s !default;
+
+/// Default hover timing function
+$hover-timing: ease !default;
+
+/// Default hover transition duration (alternative)
+$hover-duration-default: 0.3s !default;
+
+/// Default hover timing function (alternative)
+$hover-timing-default: ease !default;
+
+/// Default hover scale factor
+$hover-scale-default: 1.05 !default;
+
+/// Default hover lift distance
+$hover-lift-default: -4px !default;
+
+
+// ============================================================================
+// Touch Variables
+// ============================================================================
+
+/// Minimum touch target size (WCAG recommendation)
+$touch-target-min: 44px !default;
+
+/// Large touch target size
+$touch-target-large: 48px !default;
+
+/// Touch feedback duration
+$touch-feedback-duration: 0.15s !default;
+
+
+// ============================================================================
+// Scroll Variables
+// ============================================================================
+
+/// Default scroll behavior
+$scroll-behavior-default: smooth !default;
+
+/// Default scroll padding
+$scroll-padding-default: 20px !default;
+
+/// Default snap alignment
+$scroll-snap-align-default: start !default;
+
+
+// ============================================================================
+// Cursor Variables
+// ============================================================================
+
+/// List of cursor types for utility class generation
+$cursors: ('pointer', 'text', 'wait', 'crosshair', 'not-allowed', 'zoom-in', 'grab', 'grabbing') !default;
+
+
+// ============================================================================
+// Selection Theme Variables
+// ============================================================================
+
+/// Selection theme definitions
+$themes: (
+    "light": (
+        "selection-bg": #e0f7fa,
+        "selection-text": #00796b
+    ),
+    "dark": (
+        "selection-bg": #004d40,
+        "selection-text": #b2dfdb
+    )
+) !default;
+
+/// Global theme colors including selection
+$theme-colors: (
+    primary: #6200ea,
+    secondary: #03dac6,
+    selection-bg: #B388FF,
+    selection-text: #6200ea,
+) !default;
+
+
+// ============================================================================
+// Keyboard Variables
+// ============================================================================
+
+/// Keyboard container background color
+$keyboard-bg: #2d2d44 !default;
+
+/// Keyboard container border radius
+$keyboard-radius: 12px !default;
+
+/// Keyboard container padding
+$keyboard-padding: 1rem !default;
+
+/// Gap between keyboard rows and keys
+$keyboard-gap: 6px !default;
+
+/// Minimum key width
+$key-min-width: 40px !default;
+
+/// Key height
+$key-height: 48px !default;
+
+/// Key border radius
+$key-radius: 6px !default;
+
+/// Key background color
+$key-bg: #3d3d5c !default;
+
+/// Key background color on hover
+$key-bg-hover: #4d4d6c !default;
+
+/// Key background color when active/pressed
+$key-bg-active: #667eea !default;
+
+/// Key text color
+$key-color: white !default;
+
+/// Key font size
+$key-font-size: 16px !default;
+
+/// Special key (shift, backspace, enter) width
+$key-special-width: 80px !default;
+
+/// Special key background color
+$key-special-bg: #4d4d6c !default;
+
+/// Space key maximum width
+$key-space-max-width: 300px !default;
+
+
+// ============================================================================
+// Screensaver Variables
+// ============================================================================
+
+/// Screensaver z-index (high value to overlay content)
+$screensaver-z-index: 9999 !default;
+
+/// Screensaver background color
+$screensaver-bg: rgba(0, 0, 0, 0.9) !default;
+
+/// Screensaver text color
+$screensaver-color: white !default;
+
+/// Screensaver fade transition duration
+$screensaver-fade: 0.5s !default;
+
+/// Screensaver icon size
+$screensaver-icon-size: 4rem !default;
+
+/// Screensaver title font size
+$screensaver-title-size: 2rem !default;
+
+/// Screensaver hint/subtitle font size
+$screensaver-hint-size: 1rem !default;
+
+/// Screensaver content animation duration
+$screensaver-animation-duration: 4s !default;

package/dist/scss/variables/_effects.scss

@@ -0,0 +1,87 @@
+////
+///
+/// Effects Variables Module
+/// ===========================================================================
+///
+/// Centralized configuration for all effect-related variables including
+/// focus, opacity, gradient, and shadow effects.
+///
+/// @group Effects
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:map";
+
+
+// ============================================================================
+// Focus Variables
+// ============================================================================
+
+/// Default focus outline color
+$focus-color-default: #3b82f6 !default;
+
+/// Purple focus color variant
+$focus-color-purple: #8b5cf6 !default;
+
+
+// ============================================================================
+// Opacity Variables
+// ============================================================================
+
+/// Default hover opacity
+$opacity-hover-default: 0.75 !default;
+
+/// Disabled state opacity
+$opacity-disabled: 0.5 !default;
+
+/// Muted/secondary opacity
+$opacity-muted: 0.6 !default;
+
+
+// ============================================================================
+// Gradient Variables
+// ============================================================================
+
+/// Default gradient start color
+$gradient-from-default: #3b82f6 !default;
+
+/// Default gradient end color
+$gradient-to-default: #8b5cf6 !default;
+
+
+// ============================================================================
+// Shadow Variables
+// ============================================================================
+
+/// Default shadow color
+$shadow-color-default: rgba(0, 0, 0, 0.2) !default;
+
+/// Shadow color for dark themes
+$shadow-color-dark: rgba(0, 0, 0, 0.4) !default;
+
+/// Shadow color for colored shadows
+$shadow-color-primary: rgba(59, 130, 246, 0.4) !default;
+
+/// Material Design elevation map (levels 0-24)
+$elevations: (
+    0:  none,
+    1:  (0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)),
+    2:  (0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23)),
+    3:  (0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23)),
+    4:  (0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22)),
+    5:  (0px 19px 38px rgba(0, 0, 0, 0.30), 0px 15px 12px rgba(0, 0, 0, 0.22)),
+    6:  (0px 3px 5px rgba(0, 0, 0, 0.2), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px rgba(0, 0, 0, 0.14)),
+    8:  (0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14)),
+    12: (0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14)),
+    16: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)),
+    24: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))
+) !default;

package/dist/scss/variables/_index.scss

@@ -0,0 +1,27 @@
+////
+///
+/// Variables Module
+/// =========================================================================
+///
+/// Central index for all variable modules in move.gl. Each file corresponds
+/// to a mixin folder, providing configurable defaults for that category.
+///
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Forward Variable Modules
+// ============================================================================
+
+@forward "animations";
+@forward "controls";
+@forward "effects";
+@forward "keyframes";
+@forward "loaders";
+@forward "transforms";
+@forward "transitions";

package/dist/scss/variables/_keyframes.scss

@@ -0,0 +1,28 @@
+////
+///
+/// Keyframes Variables Module
+/// ===========================================================================
+///
+/// Centralized configuration for keyframe animation default variables.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Keyframe Default Variables
+// ============================================================================
+
+/// Default animation duration
+$keyframe-duration-default: 1s !default;
+
+/// Default animation timing function
+$keyframe-timing-default: ease !default;
+
+/// Default animation iteration count
+$keyframe-iteration-default: 1 !default;

package/dist/scss/variables/_loaders.scss

@@ -0,0 +1,75 @@
+////
+///
+/// Loaders Variables Module
+/// ===========================================================================
+///
+/// Centralized configuration for all loader-related variables including
+/// spinners, dots, bars, circles, skeleton, and text loaders.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Base Loader Variables
+// ============================================================================
+
+/// Default loader size
+$loader-size: 48px !default;
+
+/// Default loader color
+$loader-color: #FFF !default;
+
+/// Default loader accent color
+$loader-accent: #FF3D00 !default;
+
+/// Default loader animation speed
+$loader-speed: 1s !default;
+
+/// Default loader border width
+$loader-border: 5px !default;
+
+
+// ============================================================================
+// Spinner Variables
+// ============================================================================
+
+/// Spinner width
+$spinner-width: 2rem !default;
+
+/// Spinner height
+$spinner-height: 2rem !default;
+
+/// Small spinner width
+$spinner-width-sm: 1rem !default;
+
+/// Small spinner height
+$spinner-height-sm: 1rem !default;
+
+/// Spinner border width
+$spinner-border-width: 0.25em !default;
+
+/// Small spinner border width
+$spinner-border-width-sm: 0.2em !default;
+
+/// Spinner animation speed
+$spinner-animation-speed: 0.75s !default;
+
+/// Spinner vertical alignment
+$spinner-vertical-align: -0.125em !default;
+
+
+// ============================================================================
+// Skeleton Variables
+// ============================================================================
+
+/// Skeleton background color
+$skeleton-bg: rgba(255, 255, 255, 0.1) !default;
+
+/// Skeleton highlight/shimmer color
+$skeleton-highlight: rgba(255, 255, 255, 0.2) !default;

package/dist/scss/variables/_transforms.scss

@@ -0,0 +1,85 @@
+////
+///
+/// Transforms Variables Module
+/// =========================================================================
+///
+/// Centralized configuration for CSS transform-related variables including
+/// rotation, scaling, translation, and skew defaults.
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Rotation Variables
+// ============================================================================
+
+/// Default rotation angle
+$rotate-default: 45deg !default;
+
+/// Full rotation angle
+$rotate-full: 360deg !default;
+
+/// Half rotation angle
+$rotate-half: 180deg !default;
+
+
+// ============================================================================
+// Scale Variables
+// ============================================================================
+
+/// Default scale factor
+$scale-default: 1.1 !default;
+
+/// Large scale factor
+$scale-large: 1.5 !default;
+
+/// Small scale factor
+$scale-small: 0.9 !default;
+
+/// Zero scale (for hide animations)
+$scale-zero: 0 !default;
+
+
+// ============================================================================
+// Translate Variables
+// ============================================================================
+
+/// Default translate distance
+$translate-default: 20px !default;
+
+/// Large translate distance
+$translate-large: 50px !default;
+
+/// Small translate distance
+$translate-small: 10px !default;
+
+
+// ============================================================================
+// Skew Variables
+// ============================================================================
+
+/// Default skew angle
+$skew-default: 10deg !default;
+
+/// Large skew angle
+$skew-large: 20deg !default;
+
+
+// ============================================================================
+// Perspective Variables
+// ============================================================================
+
+/// Default perspective distance
+$perspective-default: 1000px !default;
+
+/// Close perspective distance
+$perspective-close: 500px !default;
+
+/// Far perspective distance
+$perspective-far: 2000px !default;

package/dist/scss/variables/_transitions.scss

@@ -0,0 +1,80 @@
+////
+///
+/// Transitions Variables Module
+/// =========================================================================
+///
+/// Centralized configuration for CSS transition-related variables including
+/// durations, timing functions, and easing curves.
+///
+/// @group Transitions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Duration Variables
+// ============================================================================
+
+/// Fast transition duration
+$transition-fast: 0.15s !default;
+
+/// Default transition duration
+$transition-default: 0.3s !default;
+
+/// Slow transition duration
+$transition-slow: 0.5s !default;
+
+/// Very slow transition duration
+$transition-slower: 0.8s !default;
+
+
+// ============================================================================
+// Timing Function Variables
+// ============================================================================
+
+/// Default timing function
+$timing-default: ease !default;
+
+/// Linear timing function
+$timing-linear: linear !default;
+
+/// Ease-in timing function
+$timing-ease-in: ease-in !default;
+
+/// Ease-out timing function
+$timing-ease-out: ease-out !default;
+
+/// Ease-in-out timing function
+$timing-ease-in-out: ease-in-out !default;
+
+
+// ============================================================================
+// Custom Easing Curves
+// ============================================================================
+
+/// Bounce easing curve
+$easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+/// Smooth easing curve
+$easing-smooth: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+/// Snap easing curve
+$easing-snap: cubic-bezier(0.4, 0, 0.6, 1) !default;
+
+/// Elastic easing curve
+$easing-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6) !default;
+
+
+// ============================================================================
+// Property Defaults
+// ============================================================================
+
+/// Default transition property
+$transition-property-default: all !default;
+
+/// Common transition properties list
+$transition-properties: (opacity, transform, background-color, color, border-color, box-shadow) !default;