@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/lib/composables/useSlider.ts

@@ -84,11 +84,16 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         autoplayRef.current = null;
       }
       setAutoplayRunning(false);
-      return;
+      return undefined;
     }
 
     const autoplayParams = typeof autoplay === 'boolean' ? { delay: 3000 } : autoplay;
-    const { delay = 3000, pauseOnMouseEnter = false, disableOnInteraction = false, reverseDirection = false } = autoplayParams;
+    const {
+      delay = 3000,
+      pauseOnMouseEnter = false,
+      disableOnInteraction = false,
+      reverseDirection = false,
+    } = autoplayParams;
 
     // Clear any existing interval
     if (autoplayRef.current) {
@@ -100,7 +105,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       // We need to use a functional update to get the latest values
       setRealIndex(prevRealIndex => {
         if (isTransitioning) return prevRealIndex;
-        
+
         // Stop autoplay on interaction if disableOnInteraction is true
         if (disableOnInteraction && autoplayRef.current) {
           clearInterval(autoplayRef.current);
@@ -114,11 +119,15 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         } else {
           nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
         }
-        
+
         // Trigger the slide change
         if (reverseDirection) {
           // For reverse direction, we would go to previous slide
-          const prevIndex = loop ? (prevRealIndex === 0 ? slides.length - 1 : prevRealIndex - 1) : Math.max(prevRealIndex - 1, 0);
+          const prevIndex = loop
+            ? prevRealIndex === 0
+              ? slides.length - 1
+              : prevRealIndex - 1
+            : Math.max(prevRealIndex - 1, 0);
           setInternalIndex(loop ? slides.length + prevIndex : prevIndex);
           setIsTransitioning(true);
           setDragOffset(0);
@@ -127,7 +136,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
             setIsTransitioning(false);
             onSlideChange?.(prevIndex);
           }, speed);
-          
+
           return prevIndex;
         } else {
           // Normal direction
@@ -138,7 +147,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
           setTimeout(() => {
             setIsTransitioning(false);
             onSlideChange?.(nextIndex);
-            
+
             // Reposition after transition ends for looped sliders
             if (loop && nextIndex >= slides.length * 2) {
               repositioningRef.current = true;
@@ -148,12 +157,12 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
               }, 0);
             }
           }, speed);
-          
+
           return nextIndex;
         }
       });
     }, delay);
-    
+
     setAutoplayRunning(true);
 
     // Handle pause on mouse enter/leave if enabled
@@ -165,24 +174,24 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         setAutoplayRunning(false);
       }
     };
-    
+
     const handleMouseLeave = () => {
       // Restart autoplay
       if (autoplayRef.current) {
         clearInterval(autoplayRef.current);
       }
-      
+
       autoplayRef.current = setInterval(() => {
         setRealIndex(prevRealIndex => {
           if (isTransitioning) return prevRealIndex;
-          
+
           let nextIndex;
           if (loop) {
             nextIndex = (prevRealIndex + 1) % slides.length;
           } else {
             nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
           }
-          
+
           setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
           setIsTransitioning(true);
           setDragOffset(0);
@@ -190,7 +199,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
           setTimeout(() => {
             setIsTransitioning(false);
             onSlideChange?.(nextIndex);
-            
+
             if (loop) {
               // Reposition after transition ends
               if (nextIndex >= slides.length * 2) {
@@ -202,11 +211,11 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
               }
             }
           }, speed);
-          
+
           return nextIndex;
         });
       }, delay);
-      
+
       setAutoplayRunning(true);
     };
 
@@ -228,7 +237,16 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       }
       setAutoplayRunning(false);
     };
-  }, [autoplay, slides.length, loop, slidesToShow, isTransitioning, speed, onSlideChange, repositioningRef]);
+  }, [
+    autoplay,
+    slides.length,
+    loop,
+    slidesToShow,
+    isTransitioning,
+    speed,
+    onSlideChange,
+    repositioningRef,
+  ]);
 
   // Initialize
   useEffect(() => {
@@ -258,7 +276,12 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     if (isTransitioning) return;
 
     // Stop autoplay on interaction if disableOnInteraction is true
-    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+    if (
+      autoplay &&
+      typeof autoplay === 'object' &&
+      autoplay.disableOnInteraction &&
+      autoplayRef.current
+    ) {
       clearInterval(autoplayRef.current);
       autoplayRef.current = null;
       setAutoplayRunning(false);
@@ -309,14 +332,19 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
-    autoplay
+    autoplay,
   ]);
 
   const slidePrev = useCallback(() => {
     if (isTransitioning) return;
 
     // Stop autoplay on interaction if disableOnInteraction is true
-    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+    if (
+      autoplay &&
+      typeof autoplay === 'object' &&
+      autoplay.disableOnInteraction &&
+      autoplayRef.current
+    ) {
       clearInterval(autoplayRef.current);
       autoplayRef.current = null;
       setAutoplayRunning(false);
@@ -366,7 +394,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
-    autoplay
+    autoplay,
   ]);
 
   const goToSlide = useCallback(
@@ -374,7 +402,12 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       if (isTransitioning || index === realIndex) return;
 
       // Stop autoplay on interaction if disableOnInteraction is true
-      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      if (
+        autoplay &&
+        typeof autoplay === 'object' &&
+        autoplay.disableOnInteraction &&
+        autoplayRef.current
+      ) {
         clearInterval(autoplayRef.current);
         autoplayRef.current = null;
         setAutoplayRunning(false);
@@ -399,7 +432,12 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       if (!allowTouchMove) return;
 
       // Stop autoplay on interaction if disableOnInteraction is true
-      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      if (
+        autoplay &&
+        typeof autoplay === 'object' &&
+        autoplay.disableOnInteraction &&
+        autoplayRef.current
+      ) {
         clearInterval(autoplayRef.current);
         autoplayRef.current = null;
         setAutoplayRunning(false);
@@ -523,4 +561,4 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     loopedSlides,
     repositioningRef,
   };
-}
+}

package/src/lib/composables/useVideoPlayer.ts

@@ -63,9 +63,11 @@ export function useVideoPlayer({
         onPlay?.();
       } catch (error) {
         console.error('Error playing video:', error);
+        onError?.(error as Event);
+        setIsPlaying(false);
       }
     }
-  }, [videoRef, onPlay]);
+  }, [videoRef, onPlay, onError]);
 
   const pause = useCallback(() => {
     if (videoRef.current) {
@@ -165,14 +167,18 @@ export function useVideoPlayer({
         const currentTime = videoRef.current.currentTime;
         const wasPlaying = !videoRef.current.paused;
 
-        videoRef.current.src = newQuality.src;
-        videoRef.current.currentTime = currentTime;
+        // Validate and sanitize the source URL
+        const sanitizedSrc = String(newQuality.src).replace(/[<>"']/g, '');
+        if (sanitizedSrc && (sanitizedSrc.startsWith('http://') || sanitizedSrc.startsWith('https://') || sanitizedSrc.startsWith('blob:') || sanitizedSrc.startsWith('data:'))) {
+          videoRef.current.src = sanitizedSrc;
+          videoRef.current.currentTime = currentTime;
 
-        if (wasPlaying) {
-          videoRef.current.play();
-        }
+          if (wasPlaying) {
+            videoRef.current.play();
+          }
 
-        setCurrentQuality(newQuality);
+          setCurrentQuality(newQuality);
+        }
       }
     },
     [videoRef, quality]
@@ -292,70 +298,61 @@ export function useVideoPlayer({
   }, [onFullscreenChange]);
 
   // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!containerRef.current?.contains(document.activeElement)) return;
-
-      switch (e.code) {
-        case 'Space':
-          e.preventDefault();
-          togglePlay();
-          break;
-        case 'ArrowLeft':
-          e.preventDefault();
-          seek(currentTime - 10);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          seek(currentTime + 10);
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          setVolume(Math.min(1, volume + 0.1));
-          break;
-        case 'ArrowDown':
-          e.preventDefault();
-          setVolume(Math.max(0, volume - 0.1));
-          break;
-        case 'KeyM':
-          e.preventDefault();
-          toggleMute();
-          break;
-        case 'KeyF':
-          e.preventDefault();
-          toggleFullscreen();
-          break;
-      }
-    };
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (!containerRef.current?.contains(document.activeElement)) return;
+
+    switch (e.code) {
+      case 'Space':
+        e.preventDefault();
+        togglePlay();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        seek(currentTime - 10);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        seek(currentTime + 10);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setVolume(Math.min(1, volume + 0.1));
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setVolume(Math.max(0, volume - 0.1));
+        break;
+      case 'KeyM':
+        e.preventDefault();
+        toggleMute();
+        break;
+      case 'KeyF':
+        e.preventDefault();
+        toggleFullscreen();
+        break;
+    }
+  }, [togglePlay, seek, currentTime, setVolume, volume, toggleMute, toggleFullscreen, containerRef]);
 
+  useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [
-    togglePlay,
-    seek,
-    currentTime,
-    setVolume,
-    volume,
-    toggleMute,
-    toggleFullscreen,
-    containerRef,
-  ]);
+  }, [handleKeyDown]);
 
   // Mouse movement for controls
+  const handleMouseMove = useCallback(() => resetControlsTimeout(), [resetControlsTimeout]);
+  const handleMouseLeave = useCallback(() => {
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      setShowControls(false);
+    }
+  }, [isPlaying]);
+
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return undefined;
 
-    const handleMouseMove = () => resetControlsTimeout();
-    const handleMouseLeave = () => {
-      if (controlsTimeoutRef.current) {
-        clearTimeout(controlsTimeoutRef.current);
-      }
-      if (isPlaying) {
-        setShowControls(false);
-      }
-    };
-
     container.addEventListener('mousemove', handleMouseMove);
     container.addEventListener('mouseleave', handleMouseLeave);
 
@@ -366,7 +363,7 @@ export function useVideoPlayer({
         clearTimeout(controlsTimeoutRef.current);
       }
     };
-  }, [containerRef, resetControlsTimeout, isPlaying]);
+  }, [containerRef, handleMouseMove, handleMouseLeave]);
 
   return {
     isPlaying,

package/src/lib/constants/components.ts

@@ -1214,6 +1214,7 @@ export const CHART = {
   EXPORT_GROUP_CLASS: 'c-chart__export-group',
   EXPORT_DROPDOWN_CLASS: 'c-chart__export-dropdown',
   EXPORT_OPTION_CLASS: 'c-chart__export-option',
+  SETTINGS_MENU_CLASS: 'c-chart__settings-menu',
   TOOLBAR_GROUP_CLASS: 'c-chart__toolbar-group',
   TOOLBAR_SEPARATOR_CLASS: 'c-chart__toolbar-separator',
   TOOLBAR_LABEL_CLASS: 'c-chart__toolbar-label',
@@ -1528,6 +1529,9 @@ export const FOOTER = {
     CENTERED: 'c-footer--centered',
     MINIMAL: 'c-footer--minimal',
     STACKED: 'c-footer--stacked',
+    FLEXIBLE: 'c-footer--flexible',
+    SIDEBAR: 'c-footer--sidebar',
+    WIDE: 'c-footer--wide',
     // Size variants
     SM: 'c-footer--sm',
     MD: 'c-footer--md',
@@ -1556,35 +1560,35 @@ export const FOOTER = {
  */
 export const ATOMIX_GLASS = {
   BASE_CLASS: 'c-atomix-glass',
-  WARP_CLASS: 'c-atomix-glass__warp',
+  CONTAINER_CLASS: 'c-atomix-glass__container',
+  INNER_CLASS: 'c-atomix-glass__inner',
+  FILTER_CLASS: 'c-atomix-glass__filter',
+  FILTER_OVERLAY_CLASS: 'c-atomix-glass__filter-overlay',
+  FILTER_SHADOW_CLASS: 'c-atomix-glass__filter-shadow',
   CONTENT_CLASS: 'c-atomix-glass__content',
-  BORDER_CLASS: 'c-atomix-glass__border',
-  OVER_LIGHT_CLASS: 'c-atomix-glass__over-light',
-  HOVER_EFFECT_CLASS: 'c-atomix-glass__hover-effect',
-  ACTIVE_EFFECT_CLASS: 'c-atomix-glass__active-effect',
-  GLOW_EFFECT_CLASS: 'c-atomix-glass__glow-effect',
+  BORDER_1_CLASS: 'c-atomix-glass__border-1',
+  BORDER_2_CLASS: 'c-atomix-glass__border-2',
+  HOVER_1_CLASS: 'c-atomix-glass__hover-1',
+  HOVER_2_CLASS: 'c-atomix-glass__hover-2',
+  HOVER_3_CLASS: 'c-atomix-glass__hover-3',
+  BASE_LAYER_CLASS: 'c-atomix-glass__base',
+  OVERLAY_LAYER_CLASS: 'c-atomix-glass__overlay',
+  OVERLAY_HIGHLIGHT_CLASS: 'c-atomix-glass__overlay-highlight',
+  BACKGROUND_LAYER_CLASS: 'c-atomix-glass__background-layer',
+  BACKGROUND_LAYER_DARK_CLASS: 'c-atomix-glass__background-layer--dark',
+  BACKGROUND_LAYER_BLACK_CLASS: 'c-atomix-glass__background-layer--black',
+  BACKGROUND_LAYER_OVER_LIGHT_CLASS: 'c-atomix-glass__background-layer--over-light',
+  BACKGROUND_LAYER_HIDDEN_CLASS: 'c-atomix-glass__background-layer--hidden',
   VARIANT_PREFIX: 'c-atomix-glass--',
   MODE_PREFIX: 'c-atomix-glass--',
   CLASSES: {
     BASE: 'c-atomix-glass',
-    WARP: 'c-atomix-glass__warp',
+    CONTAINER: 'c-atomix-glass__container',
+    INNER: 'c-atomix-glass__inner',
+    FILTER: 'c-atomix-glass__filter',
     CONTENT: 'c-atomix-glass__content',
-    BORDER: 'c-atomix-glass__border',
-    BORDER_OVERLAY: 'c-atomix-glass__border--overlay',
-    OVER_LIGHT: 'c-atomix-glass__over-light',
-    OVER_LIGHT_ACTIVE: 'c-atomix-glass__over-light--active',
-    OVER_LIGHT_OVERLAY: 'c-atomix-glass__over-light--overlay',
-    OVER_LIGHT_OVERLAY_ACTIVE: 'c-atomix-glass__over-light--overlay-active',
-    HOVER_EFFECT: 'c-atomix-glass__hover-effect',
-    HOVER_EFFECT_ACTIVE: 'c-atomix-glass__hover-effect--active',
-    ACTIVE_EFFECT: 'c-atomix-glass__active-effect',
-    ACTIVE_EFFECT_ACTIVE: 'c-atomix-glass__active-effect--active',
-    GLOW_EFFECT: 'c-atomix-glass__glow-effect',
-    GLOW_EFFECT_HOVER: 'c-atomix-glass__glow-effect--hover',
-    GLOW_EFFECT_ACTIVE: 'c-atomix-glass__glow-effect--active',
-    // Modifiers
-    CLICKABLE: 'c-atomix-glass--clickable',
-    ACTIVE: 'c-atomix-glass--active',
+    ACTIVE: 'active',
+    OVER_LIGHT: 'c-atomix-glass__container--over-light',
     // Mode variants
     STANDARD: 'c-atomix-glass--standard',
     POLAR: 'c-atomix-glass--polar',
@@ -1592,15 +1596,126 @@ export const ATOMIX_GLASS = {
     SHADER: 'c-atomix-glass--shader',
   },
   DEFAULTS: {
-    DISPLACEMENT_SCALE: 70,
-    BLUR_AMOUNT: 0.0625,
+    DISPLACEMENT_SCALE: 20,
+    BLUR_AMOUNT: 1,
     SATURATION: 140,
-    ABERRATION_INTENSITY: 2,
-    ELASTICITY: 0.15,
-    CORNER_RADIUS: 999,
-    PADDING: '24px 32px',
-    MODE: 'standard',
-    OVER_LIGHT: false,
-    SIZE: 'md',
+    ABERRATION_INTENSITY: 2.5,
+    ELASTICITY: 0.05,
+    CORNER_RADIUS: 16, // Default border-radius matching design system
+    PADDING: '0 0',
+    MODE: 'standard' as const,
+    OVER_LIGHT: 'auto' as const,
+    ENABLE_OVER_LIGHT_LAYERS: true,
+  },
+  CONSTANTS: {
+    ACTIVATION_ZONE: 200,
+    MIN_BLUR: 0.1,
+    MOUSE_INFLUENCE_DIVISOR: 100,
+    EDGE_FADE_PIXELS: 2,
+    DEFAULT_CORNER_RADIUS: 16, // Fallback value matching design system
+    MAX_SIZE: 4096, // Maximum width/height for glass size
+
+    // Gradient calculation constants
+    GRADIENT: {
+      BASE_ANGLE: 135, // Base angle for border gradients (degrees)
+      ANGLE_MULTIPLIER: 1.2, // Multiplier for mouse influence on angle
+      BORDER_STOP_1: {
+        MIN: 10, // Minimum percentage for border stop 1
+        BASE: 33, // Base percentage for border stop 1
+        MULTIPLIER: 0.3, // Multiplier for mouse Y influence
+      },
+      BORDER_STOP_2: {
+        MAX: 90, // Maximum percentage for border stop 2
+        BASE: 66, // Base percentage for border stop 2
+        MULTIPLIER: 0.4, // Multiplier for mouse Y influence
+      },
+      BORDER_OPACITY: {
+        BASE_1: 0.12, // Base opacity for border gradient 1
+        BASE_2: 0.4, // Base opacity for border gradient 2
+        BASE_3: 0.32, // Base opacity for border gradient 3
+        BASE_4: 0.6, // Base opacity for border gradient 4
+        MULTIPLIER_LOW: 0.008, // Low multiplier for mouse influence on opacity
+        MULTIPLIER_HIGH: 0.012, // High multiplier for mouse influence on opacity
+      },
+      CENTER_POSITION: 50, // Center position percentage (50%)
+      HOVER_POSITION: {
+        DIVISOR_1: 2, // Divisor for hover 1 position calculation
+        DIVISOR_2: 1.5, // Divisor for hover 2 position calculation
+        MULTIPLIER_3: 1, // Direct multiplier for hover 3 (no division)
+      },
+      BASE_LAYER_MULTIPLIER: 0.5, // Multiplier for base layer position
+    },
+
+    // Gradient opacity values for hover effects
+    GRADIENT_OPACITY: {
+      HOVER_1: {
+        BLACK_START: 0.3, // Start opacity for black hover 1
+        BLACK_MID: 0.1, // Mid opacity for black hover 1
+        BLACK_STOP: 30, // Stop percentage for black hover 1
+        BLACK_END: 60, // End percentage for black hover 1
+        WHITE_START: 0.5, // Start opacity for white hover 1
+        WHITE_STOP: 50, // Stop percentage for white hover 1
+      },
+      HOVER_2: {
+        BLACK_START: 0.4, // Start opacity for black hover 2
+        BLACK_MID: 0.15, // Mid opacity for black hover 2
+        BLACK_STOP: 40, // Stop percentage for black hover 2
+        BLACK_END: 80, // End percentage for black hover 2
+        WHITE_START: 1, // Start opacity for white hover 2
+        WHITE_STOP: 80, // Stop percentage for white hover 2
+      },
+      HOVER_3: {
+        BLACK_START: 0.5, // Start opacity for black hover 3
+        BLACK_MID: 0.2, // Mid opacity for black hover 3
+        BLACK_STOP: 50, // Stop percentage for black hover 3
+        BLACK_END: 100, // End percentage for black hover 3
+        WHITE_START: 1, // Start opacity for white hover 3
+        WHITE_STOP: 100, // Stop percentage for white hover 3
+      },
+    },
+
+    // Base and overlay gradient constants
+    BASE_GRADIENT: {
+      ANGLE: 135, // Gradient angle in degrees
+      BLACK_START_BASE: 0.15, // Base start opacity for black
+      BLACK_START_MULTIPLIER: 0.003, // Multiplier for mouse X influence on start
+      BLACK_MID_BASE: 0.1, // Base mid opacity for black
+      BLACK_MID_MULTIPLIER: 0.002, // Multiplier for mouse Y influence on mid
+      BLACK_MID_STOP: 50, // Mid stop percentage
+      BLACK_END_BASE: 0.18, // Base end opacity for black
+      BLACK_END_MULTIPLIER: 0.004, // Multiplier for mouse X influence on end
+      WHITE_OPACITY: 0.1, // White opacity for non-overlight mode
+    },
+
+    OVERLAY_GRADIENT: {
+      BLACK_START_BASE: 0.12, // Base start opacity for black overlay
+      BLACK_START_MULTIPLIER: 0.003, // Multiplier for mouse X influence on start
+      BLACK_MID: 0.06, // Mid opacity for black overlay
+      BLACK_MID_STOP: 40, // Mid stop percentage
+      BLACK_END_BASE: 0.15, // Base end opacity for black overlay
+      BLACK_END_MULTIPLIER: 0.003, // Multiplier for mouse Y influence on end
+      WHITE_OPACITY: 0.05, // White opacity for non-overlight mode
+    },
+
+    // Overlay highlight constants
+    OVERLAY_HIGHLIGHT: {
+      POSITION_X: 20, // X position percentage
+      POSITION_Y: 20, // Y position percentage
+      WHITE_OPACITY: 0.4, // White opacity in gradient
+      STOP: 60, // Stop percentage
+      OPACITY_MULTIPLIER: 0.7, // Multiplier for overlay highlight opacity
+    },
+
+    // Displacement and aberration multipliers
+    MULTIPLIERS: {
+      SHADER_DISPLACEMENT: 0.8, // Displacement scale multiplier for shader mode
+      OVER_LIGHT_DISPLACEMENT: 0.6, // Displacement scale multiplier for over-light mode
+      SHADER_ABERRATION: 0.7, // Aberration intensity multiplier for shader mode
+    },
+
+    // Saturation constants
+    SATURATION: {
+      HIGH_CONTRAST: 200, // Saturation value for high contrast mode
+    },
   },
 };