@charset "UTF-8";

// @description
// * generate-colors-dark-mode mixin.
// * This mixin generates CSS custom properties for defining colors in the
// * :root element based on the provided color maps for both light and
// * dark modes. It allows you to create a consistent color scheme for
// * both modes and supports dynamic theme switching using HTML attributes.

// @access public

// @version 1.1.1

// @author Khaled Mohamed

// @license MIT

// @repository: https://github.com/Black-Axis/sass-pire

// @namespace general

// @module general/generate-colors-dark-mode

// @dependencies:
// * - meta.type-of (SASS function).
// * - list.length (function).
// * - has-same-keys (function).

// @param {Map} $light-colors-map
// * A map containing color names and their corresponding values for the
// * light mode. Each key-value pair represents a custom property for
// * a color. The key (color name) must be a string, and the value
// * must be a color.

// @param {Map} $dark-colors-map
// * A map containing color names and their corresponding values for the
// * dark mode. Each key-value pair represents a custom property for
// * a color. The key (color name) must be a string, and the
// * value must be a color.

// @param {Boolean} $generate-with-attr
// * An optional boolean flag indicating whether to generate additional
// * custom properties using HTML attribute selectors for light mode.
// * Defaults to false.

// @example 1
// * // Generated CSS custom properties for dark mode:
// * @include generate-colors-dark-mode(
// *   (
// *     "primary": #3498db,
// *     "secondary": #2ecc71,
// *     "accent": #e74c3c
// *   ),
// *   (
// *     "primary": #1a1a1a,
// *     "secondary": #2c2c2c,
// *     "accent": #3d3d3d
// *   ),
// *   true
// * );

// @output 1
// * :root {
// *   --primary-clr: #3498db;
// *   --secondary-clr: #2ecc71;
// *   --accent-clr: #e74c3c;
// * }

// * html[data-theme="dark"] {
// *   --primary-clr: #1a1a1a;
// *   --secondary-clr: #2c2c2c;
// *   --accent-clr: #3d3d3d;
// * }

// * Additional custom properties with HTML attribute selectors for
// * light mode:
// * html[data-theme="light"] {
// *   --primary-clr: #3498db;
// *   --secondary-clr: #2ecc71;
// *   --accent-clr: #e74c3c;
// * }

// @example 2
// * @include generate-colors-dark-mode(
// *   (
// *     "primary": #3498db,
// *     "secondary": #2ecc71,
// *     "accent": #e74c3c
// *   ),
// *   (
// *     "primary": #1a1a1a,
// *     "secondary": #2c2c2c,
// *     "accent": #3d3d3d
// *   ),
// *   false
// * );

// @output 2
// * :root {
// *   --primary-clr: #3498db;
// *   --secondary-clr: #2ecc71;
// *   --accent-clr: #e74c3c;
// * }

// * html[data-theme=dark] {
// *   --primary-clr: #1a1a1a;
// *   --secondary-clr: #2c2c2c;
// *   --accent-clr: #3d3d3d;
// * }

// @note 1
// * The mixin assumes that the light mode is the default, and dark mode
// * is applied with the `html[data-theme="dark"]` selector.
// * Adjust the HTML attribute selector if your dark mode implementation
// * uses a different attribute.

// @note 2
// * There are two mixins in this file.
// * The first is the (generate-colors-dark-mode) mixin and second is (gen-clrs-dark) mixin.
// * The second one is for only simplicity when using (generate-colors-dark-mode) mixin.
// * The core logic of (gen-clrs-dark) mixin is to call the first one.
// * You can use one of them as you want.

@use "sass:meta";
@use "sass:list";
@use "sass:map";
@use "../../functions/map/has-same-keys" as func;

@mixin generate-colors-dark-mode($light-colors-map: (), $dark-colors-map: (), $generate-with-attr: false) {
    @if meta.type-of($light-colors-map) != map {
        @error "You must pass a two map of colors to generate-colors-dark-mode mixin.";
    }

    @if list.length($light-colors-map) == 0 {
        @error "Please, Pass a map with values to generate-colors-dark-mode mixin.";
    }

    @if meta.type-of($dark-colors-map) != map {
        @error "You must pass a two map of colors to generate-colors-dark-mode mixin.";
    }

    @if list.length($dark-colors-map) == 0 {
        @error "Please, Pass a map with values to generate-colors-dark-mode mixin.";
    }

    @if meta.type-of($generate-with-attr) != bool {
        @error "You must pass the third argument of the generate-colors-dark-mode mixin with boolean value.";
    }

    @if func.has-same-keys($light-colors-map, $dark-colors-map) {
        :root {
            @each $clr, $val in $light-colors-map {
                @if meta.type-of($clr) != string {
                    @error "Please, Make the color name in the string type.";
                }

                @if meta.type-of($val) != color {
                    @error "Please, Make sure the value in the map has a color type.";
                }

                --#{to-lower-case($clr)}-clr: #{$val};
            }
        }

        @if $generate-with-attr {
            html[data-theme="light"] {
                @each $clr, $val in $light-colors-map {
                    @if meta.type-of($clr) != string {
                        @error "Please, Make the color name in the string type.";
                    }

                    @if meta.type-of($val) != color {
                        @error "Please, Make sure the value in the map has a color type.";
                    }

                    --#{to-lower-case($clr)}-clr: #{$val};
                }
            }
        }

        html[data-theme="dark"] {
            @each $clr, $val in $dark-colors-map {
                @if meta.type-of($clr) != string {
                    @error "Please, Make the color name in the string type.";
                }

                @if meta.type-of($val) != color {
                    @error "Please, Make sure the value in the map has a color type.";
                }

                --#{to-lower-case($clr)}-clr: #{$val};
            }
        }
    } @else {
        @error "Variable for light and dark mode must be in the same names";
    }
}

@mixin gen-clrs-dark($light-colors-map: (), $dark-colors-map: (), $generate-with-attr: false) {
    @include generate-colors-dark-mode($light-colors-map, $dark-colors-map, $generate-with-attr);
}