noctemyth 0.2.0 → 0.3.0

package/src/css-variables/color.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:string";
+@use "../functions/index.scss" as functions;
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
@@ -36,17 +37,20 @@
 
     $oklch: #{$lightness} #{$chroma} #{$hue};
 
-    --#{variables.$prefix}color-#{$name}-#{$p}-oklch: #{$oklch};
     --#{variables.$prefix}color-#{$name}-#{$p}: oklch(#{$oklch});
   }
 }
 
-@mixin setColor($colorShade, $colorName, $pseudoName, $componentName: "") {
-  $srcColorName: $colorName;
-  $destColorName: $colorName;
-  @if ($colorName == "default") {
-    $srcColorName: "gray";
-  }
+@mixin setColor(
+  $colorShade,
+  $lightnessOffset,
+  $srcColorName,
+  $destColorName,
+  $pseudoName,
+  $componentName: ""
+) {
+  $srcColorName: $srcColorName;
+  $destColorName: $destColorName;
 
   $pseudo: "";
   @if ($pseudoName != "plain") {
@@ -60,519 +64,619 @@
 
   $fore: map.get($colorShade, "fore");
   @if ($fore != null) {
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$fore}
-    );
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore-oklch: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$fore}-oklch
-    );
+    $light: map.get($fore, "light");
+    $dark: map.get($fore, "dark");
+    @if ($light != null and $dark != null) {
+      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
+      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: light-dark(
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+      );
+    }
   }
 
   $back: map.get($colorShade, "back");
   @if ($back != null) {
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$back}
-    );
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back-oklch: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$back}-oklch
-    );
+    $light: map.get($back, "light");
+    $dark: map.get($back, "dark");
+    @if ($light != null and $dark != null) {
+      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
+      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: light-dark(
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+      );
+    }
   }
 
   $border: map.get($colorShade, "border");
   @if ($border != null) {
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$border}
-    );
+    $light: map.get($border, "light");
+    $dark: map.get($border, "dark");
+    @if ($light != null and $dark != null) {
+      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
+      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: light-dark(
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+      );
+    }
   }
 
   $placeholder: map.get($colorShade, "placeholder");
   @if ($placeholder != null) {
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$placeholder}
-    );
+    $light: map.get($placeholder, "light");
+    $dark: map.get($placeholder, "dark");
+    @if ($light != null and $dark != null) {
+      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
+      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: light-dark(
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+      );
+    }
   }
 
   $shadow: map.get($colorShade, "shadow");
   @if ($shadow != null) {
-    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: var(
-      --#{variables.$prefix}color-#{$srcColorName}-#{$shadow}
-    );
+    $light: map.get($shadow, "light");
+    $dark: map.get($shadow, "dark");
+    @if ($light != null and $dark != null) {
+      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
+      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: light-dark(
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+        var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+      );
+    }
   }
 }
 
-@mixin setColorShades($colorShades) {
-  @each $colorShade in $colorShades {
-    $name: map.get($colorShade, "name");
-
-    @include setColor($colorShade, "default", $name);
-
-    --#{variables.$prefix}color-default-code-back: var(
-      --#{variables.$prefix}color-gray-10
+@mixin setColorShade(
+  $colorShade,
+  $lightnessOffset,
+  $srcColorName,
+  $destColorName,
+  $name
+) {
+  @include setColor(
+    $colorShade,
+    $lightnessOffset,
+    $srcColorName,
+    $destColorName,
+    $name
+  );
+
+  $selection: map.get($colorShade, "selection");
+  @if ($selection != null) {
+    @include setColor(
+      $selection,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "selection"
     );
+  }
 
-    //#region components
-
-    //#region accordion
-    $accordion: map.get($colorShade, "accordion");
-    @if ($accordion != null) {
-      @include setColor($accordion, "default", $name, "accordion");
-
-      $accordionSummary: map.get($accordion, "accordionSummary");
-      @if ($accordionSummary != null) {
-        @include setColor(
-          $accordionSummary,
-          "default",
-          $name,
-          "accordion-summary"
-        );
-      }
-
-      $accordionDetails: map.get($accordion, "accordionDetails");
-      @if ($accordionDetails != null) {
-        @include setColor(
-          $accordionDetails,
-          "default",
-          $name,
-          "accordion-details"
-        );
-      }
-    }
-    //#endregion accordion
-
-    //#region badge
-    $badge: map.get($colorShade, "badge");
-    @if ($badge != null) {
-      @include setColor($badge, "default", $name, "badge");
-    }
-    //#endregion badge
-
-    //#region blockquote
-    $blockquote: map.get($colorShade, "blockquote");
-    @if ($blockquote != null) {
-      @include setColor($blockquote, "default", $name, "blockquote");
-    }
-    //#endregion blockquote
-
-    //#region breadcrumbs
-    $breadcrumbs: map.get($colorShade, "breadcrumbs");
-    @if ($breadcrumbs != null) {
-      @include setColor($breadcrumbs, "default", $name, "breadcrumbs");
-
-      $breadcrumb: map.get($breadcrumbs, "breadcrumb");
-      @if ($breadcrumb != null) {
-        @include setColor($breadcrumb, "default", $name, "breadcrumb");
-      }
+  //#region components
+
+  //#region accordion
+  $accordion: map.get($colorShade, "accordion");
+  @if ($accordion != null) {
+    @include setColor(
+      $accordion,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "accordion"
+    );
 
-      $breadcrumbDivider: map.get($breadcrumbs, "breadcrumbDivider");
-      @if ($breadcrumbDivider != null) {
-        @include setColor(
-          $breadcrumbDivider,
-          "default",
-          $name,
-          "breadcrumb-divider"
-        );
-      }
+    $accordionSummary: map.get($accordion, "accordionSummary");
+    @if ($accordionSummary != null) {
+      @include setColor(
+        $accordionSummary,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "accordion-summary"
+      );
     }
-    //#endregion breadcrumbs
 
-    //#region button
-    $button: map.get($colorShade, "button");
-    @if ($button != null) {
-      @include setColor($button, "default", $name, "button");
+    $accordionDetails: map.get($accordion, "accordionDetails");
+    @if ($accordionDetails != null) {
+      @include setColor(
+        $accordionDetails,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "accordion-details"
+      );
     }
-    //#endregion button
-
-    //#region card
-    $card: map.get($colorShade, "card");
-    @if ($card != null) {
-      @include setColor($card, "default", $name, "card");
-
-      $cardHeader: map.get($card, "cardHeader");
-      @if ($cardHeader != null) {
-        @include setColor($cardHeader, "default", $name, "card-header");
-      }
-
-      $cardBody: map.get($card, "cardBody");
-      @if ($cardBody != null) {
-        @include setColor($cardBody, "default", $name, "card-body");
-      }
+  }
+  //#endregion accordion
+
+  //#region badge
+  $badge: map.get($colorShade, "badge");
+  @if ($badge != null) {
+    @include setColor(
+      $badge,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "badge"
+    );
+  }
+  //#endregion badge
+
+  //#region blockquote
+  $blockquote: map.get($colorShade, "blockquote");
+  @if ($blockquote != null) {
+    @include setColor(
+      $blockquote,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "blockquote"
+    );
+  }
+  //#endregion blockquote
+
+  //#region breadcrumbs
+  $breadcrumbs: map.get($colorShade, "breadcrumbs");
+  @if ($breadcrumbs != null) {
+    @include setColor(
+      $breadcrumbs,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "breadcrumbs"
+    );
 
-      $cardFooter: map.get($card, "cardFooter");
-      @if ($cardFooter != null) {
-        @include setColor($cardFooter, "default", $name, "card-footer");
-      }
+    $breadcrumb: map.get($breadcrumbs, "breadcrumb");
+    @if ($breadcrumb != null) {
+      @include setColor(
+        $breadcrumb,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "breadcrumb"
+      );
     }
-    //#endregion card
-
-    //#region dialogue
-    $dialogue: map.get($colorShade, "dialogue");
-    @if ($dialogue != null) {
-      @include setColor($dialogue, "default", $name, "dialogue");
-
-      $dialogueAvatar: map.get($dialogue, "dialogueAvatar");
-      @if ($dialogueAvatar != null) {
-        @include setColor($dialogueAvatar, "default", $name, "dialogue-avatar");
-      }
-
-      $dialogueName: map.get($dialogue, "dialogueName");
-      @if ($dialogueName != null) {
-        @include setColor($dialogueName, "default", $name, "dialogue-name");
-      }
-
-      $dialogueMessage: map.get($dialogue, "dialogueMessage");
-      @if ($dialogueMessage != null) {
-        @include setColor(
-          $dialogueMessage,
-          "default",
-          $name,
-          "dialogue-message"
-        );
-      }
+    $breadcrumbDivider: map.get($breadcrumbs, "breadcrumbDivider");
+    @if ($breadcrumbDivider != null) {
+      @include setColor(
+        $breadcrumbDivider,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "breadcrumb-divider"
+      );
     }
-    //#endregion dialogue
+  }
+  //#endregion breadcrumbs
+
+  //#region button
+  $button: map.get($colorShade, "button");
+  @if ($button != null) {
+    @include setColor(
+      $button,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "button"
+    );
+  }
+  //#endregion button
+
+  //#region card
+  $card: map.get($colorShade, "card");
+  @if ($card != null) {
+    @include setColor(
+      $card,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "card"
+    );
 
-    //#region header
-    $header: map.get($colorShade, "header");
-    @if ($header != null) {
-      @include setColor($header, "default", $name, "header");
+    $cardHeader: map.get($card, "cardHeader");
+    @if ($cardHeader != null) {
+      @include setColor(
+        $cardHeader,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "card-header"
+      );
     }
-    //#endregion header
 
-    //#region label
-    $label: map.get($colorShade, "label");
-    @if ($label != null) {
-      @include setColor($label, "default", $name, "label");
+    $cardBody: map.get($card, "cardBody");
+    @if ($cardBody != null) {
+      @include setColor(
+        $cardBody,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "card-body"
+      );
     }
-    //#endregion label
 
-    //#region link
-    $link: map.get($colorShade, "link");
-    @if ($link != null) {
-      @include setColor($link, "default", $name, "link");
+    $cardFooter: map.get($card, "cardFooter");
+    @if ($cardFooter != null) {
+      @include setColor(
+        $cardFooter,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "card-footer"
+      );
     }
-    //#endregion link
+  }
+  //#endregion card
+
+  //#region dialogue
+  $dialogue: map.get($colorShade, "dialogue");
+  @if ($dialogue != null) {
+    @include setColor(
+      $dialogue,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "dialogue"
+    );
 
-    //#region loader
-    $loader: map.get($colorShade, "loader");
-    @if ($loader != null) {
-      @include setColor($loader, "default", $name, "loader");
+    $dialogueAvatar: map.get($dialogue, "dialogueAvatar");
+    @if ($dialogueAvatar != null) {
+      @include setColor(
+        $dialogueAvatar,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "dialogue-avatar"
+      );
     }
-    //#endregion loader
-
-    //#region message
-    $message: map.get($colorShade, "message");
-    @if ($message != null) {
-      @include setColor($message, "default", $name, "message");
-
-      $messageHeader: map.get($message, "messageHeader");
-      @if ($messageHeader != null) {
-        @include setColor($messageHeader, "default", $name, "message-header");
-      }
 
-      $messageBody: map.get($message, "messageBody");
-      @if ($messageBody != null) {
-        @include setColor($messageBody, "default", $name, "message-body");
-      }
+    $dialogueName: map.get($dialogue, "dialogueName");
+    @if ($dialogueName != null) {
+      @include setColor(
+        $dialogueName,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "dialogue-name"
+      );
     }
-    //#endregion message
 
-    //#region progress
-    $progress: map.get($colorShade, "progress");
-    @if ($progress != null) {
-      @include setColor($progress, "default", $name, "progress");
+    $dialogueMessage: map.get($dialogue, "dialogueMessage");
+    @if ($dialogueMessage != null) {
+      @include setColor(
+        $dialogueMessage,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "dialogue-message"
+      );
     }
-    //#endregion progress
-
-    //#endregion components
-
-    //#region backgrounds
+  }
+  //#endregion dialogue
+
+  //#region footer
+  $footer: map.get($colorShade, "footer");
+  @if ($footer != null) {
+    @include setColor(
+      $footer,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "footer"
+    );
+  }
+  //#endregion footer
+
+  //#region header
+  $header: map.get($colorShade, "header");
+  @if ($header != null) {
+    @include setColor(
+      $header,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "header"
+    );
+  }
+  //#endregion header
+
+  //#region input
+  $input: map.get($colorShade, "input");
+  @if ($input != null) {
+    @include setColor(
+      $input,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "input"
+    );
+  }
+  //#endregion input
+
+  //#region label
+  $label: map.get($colorShade, "label");
+  @if ($label != null) {
+    @include setColor(
+      $label,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "label"
+    );
+  }
+  //#endregion label
+
+  //#region link
+  $link: map.get($colorShade, "link");
+  @if ($link != null) {
+    @include setColor(
+      $link,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "link"
+    );
+  }
+  //#endregion link
+
+  //#region loader
+  $loader: map.get($colorShade, "loader");
+  @if ($loader != null) {
+    @include setColor(
+      $loader,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "loader"
+    );
+  }
+  //#endregion loader
+
+  //#region main
+  $main: map.get($colorShade, "main");
+  @if ($main != null) {
+    @include setColor(
+      $main,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "main"
+    );
+  }
+  //#endregion main
+
+  //#region message
+  $message: map.get($colorShade, "message");
+  @if ($message != null) {
+    @include setColor(
+      $message,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "message"
+    );
 
-    //#region dot
-    $dot: map.get($colorShade, "dot");
-    @if ($dot != null) {
-      @include setColor($dot, "default", $name, "dot");
+    $messageHeader: map.get($message, "messageHeader");
+    @if ($messageHeader != null) {
+      @include setColor(
+        $messageHeader,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "message-header"
+      );
     }
-    //#endregion dot
 
-    //#region gingham
-    $gingham: map.get($colorShade, "gingham");
-    @if ($gingham != null) {
-      @include setColor($gingham, "default", $name, "gingham");
+    $messageBody: map.get($message, "messageBody");
+    @if ($messageBody != null) {
+      @include setColor(
+        $messageBody,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "message-body"
+      );
     }
-    //#endregion gingham
-
-    //#region rhombus
-    $rhombus: map.get($colorShade, "rhombus");
-    @if ($rhombus != null) {
-      @include setColor($rhombus, "default", $name, "rhombus");
+  }
+  //#endregion message
+
+  //#region nav
+  $nav: map.get($colorShade, "nav");
+  @if ($nav != null) {
+    @include setColor(
+      $nav,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "nav"
+    );
+    $navMenu: map.get($nav, "navMenu");
+    @if ($navMenu != null) {
+      @include setColor(
+        $navMenu,
+        $lightnessOffset,
+        $srcColorName,
+        $destColorName,
+        $name,
+        "nav-menu"
+      );
+      $navMenuItem: map.get($navMenu, "navMenuItem");
+      @if ($navMenuItem != null) {
+        @include setColor(
+          $navMenuItem,
+          $lightnessOffset,
+          $srcColorName,
+          $destColorName,
+          $name,
+          "nav-menu-item"
+        );
+      }
     }
-    //#endregion rhombus
+  }
+  //#endregion nav
+
+  //#region progress
+  $progress: map.get($colorShade, "progress");
+  @if ($progress != null) {
+    @include setColor(
+      $progress,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "progress"
+    );
+  }
+  //#endregion progress
+
+  //#endregion components
+
+  //#region backgrounds
+
+  //#region dot
+  $dot: map.get($colorShade, "dot");
+  @if ($dot != null) {
+    @include setColor(
+      $dot,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "dot"
+    );
+  }
+  //#endregion dot
+
+  //#region gingham
+  $gingham: map.get($colorShade, "gingham");
+  @if ($gingham != null) {
+    @include setColor(
+      $gingham,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "gingham"
+    );
+  }
+  //#endregion gingham
+
+  //#region rhombus
+  $rhombus: map.get($colorShade, "rhombus");
+  @if ($rhombus != null) {
+    @include setColor(
+      $rhombus,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "rhombus"
+    );
+  }
+  //#endregion rhombus
+
+  //#region stripe
+  $stripe: map.get($colorShade, "stripe");
+  @if ($stripe != null) {
+    @include setColor(
+      $stripe,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "stripe"
+    );
+  }
+  //#endregion stripe
+
+  //#region zigzag
+  $zigzag: map.get($colorShade, "zigzag");
+  @if ($zigzag != null) {
+    @include setColor(
+      $zigzag,
+      $lightnessOffset,
+      $srcColorName,
+      $destColorName,
+      $name,
+      "zigzag"
+    );
+  }
+  //#endregion zigzag
 
-    //#region stripe
-    $stripe: map.get($colorShade, "stripe");
-    @if ($stripe != null) {
-      @include setColor($stripe, "default", $name, "stripe");
-    }
-    //#endregion stripe
+  //#endregion backgrounds
+}
 
-    //#region zigzag
-    $zigzag: map.get($colorShade, "zigzag");
-    @if ($zigzag != null) {
-      @include setColor($zigzag, "default", $name, "zigzag");
-    }
-    //#endregion zigzag
+@mixin setColorShades($colorShades) {
+  @each $colorShade in $colorShades {
+    $name: map.get($colorShade, "name");
 
-    //#endregion backgrounds
+    @include setColorShade($colorShade, 0, "gray", "default", $name);
 
     @if (not variables.$is-skelton) {
       @each $color in variables.$colors {
         $colorName: map.get($color, "name");
+        @include setColorShade($colorShade, 0, $colorName, $colorName, $name);
+      }
 
-        @include setColor($colorShade, $colorName, $name);
-
-        //#region components
-
-        //#region accordion
-        $accordion: map.get($colorShade, "accordion");
-        @if ($accordion != null) {
-          @include setColor($accordion, $colorName, $name, "accordion");
-
-          $accordionSummary: map.get($accordion, "accordionSummary");
-          @if ($accordionSummary != null) {
-            @include setColor(
-              $accordionSummary,
-              $colorName,
-              $name,
-              "accordion-summary"
-            );
-          }
-
-          $accordionDetails: map.get($accordion, "accordionDetails");
-          @if ($accordionDetails != null) {
-            @include setColor(
-              $accordionDetails,
-              $colorName,
-              $name,
-              "accordion-details"
-            );
-          }
-        }
-        //#endregion accordion
-
-        //#region badge
-        $badge: map.get($colorShade, "badge");
-        @if ($badge != null) {
-          @include setColor($badge, $colorName, $name, "badge");
-        }
-        //#endregion badge
-
-        //#region blockquote
-        $blockquote: map.get($colorShade, "blockquote");
-        @if ($blockquote != null) {
-          @include setColor($blockquote, $colorName, $name, "blockquote");
-        }
-        //#endregion blockquote
-
-        //#region breadcrumbs
-        $breadcrumbs: map.get($colorShade, "breadcrumbs");
-        @if ($breadcrumbs != null) {
-          @include setColor($breadcrumbs, $colorName, $name, "breadcrumbs");
-
-          $breadcrumb: map.get($breadcrumbs, "breadcrumb");
-          @if ($breadcrumb != null) {
-            @include setColor($breadcrumb, $colorName, $name, "breadcrumb");
-          }
-          $breadcrumbDivider: map.get($breadcrumbs, "breadcrumbDivider");
-          @if ($breadcrumbDivider != null) {
-            @include setColor(
-              $breadcrumbDivider,
-              $colorName,
-              $name,
-              "breadcrumb-divider"
-            );
-          }
-        }
-        //#endregion breadcrumbs
-
-        //#region button
-        $button: map.get($colorShade, "button");
-        @if ($button != null) {
-          @include setColor($button, $colorName, $name, "button");
-        }
-        //#endregion button
-
-        //#region card
-        $card: map.get($colorShade, "card");
-        @if ($card != null) {
-          @include setColor($card, $colorName, $name, "card");
-
-          $cardHeader: map.get($card, "cardHeader");
-          @if ($cardHeader != null) {
-            @include setColor($cardHeader, $colorName, $name, "card-header");
-          }
-
-          $cardBody: map.get($card, "cardBody");
-          @if ($cardBody != null) {
-            @include setColor($cardBody, $colorName, $name, "card-body");
-          }
-
-          $cardFooter: map.get($card, "cardFooter");
-          @if ($cardFooter != null) {
-            @include setColor($cardFooter, $colorName, $name, "card-footer");
-          }
-        }
-        //#endregion card
-
-        //#region dialogue
-        $dialogue: map.get($colorShade, "dialogue");
-        @if ($dialogue != null) {
-          @include setColor($dialogue, $colorName, $name, "dialogue");
-
-          $dialogueAvatar: map.get($dialogue, "dialogueAvatar");
-          @if ($dialogueAvatar != null) {
-            @include setColor(
-              $dialogueAvatar,
-              $colorName,
-              $name,
-              "dialogue-avatar"
-            );
-          }
-
-          $dialogueName: map.get($dialogue, "dialogueName");
-          @if ($dialogueName != null) {
-            @include setColor(
-              $dialogueName,
-              $colorName,
-              $name,
-              "dialogue-name"
-            );
-          }
-
-          $dialogueMessage: map.get($dialogue, "dialogueMessage");
-          @if ($dialogueMessage != null) {
-            @include setColor(
-              $dialogueMessage,
-              $colorName,
-              $name,
-              "dialogue-message"
-            );
-          }
-        }
-        //#endregion dialogue
-
-        //#region header
-        $header: map.get($colorShade, "header");
-        @if ($header != null) {
-          @include setColor($header, $colorName, $name, "header");
-        }
-        //#endregion header
-
-        //#region label
-        $label: map.get($colorShade, "label");
-        @if ($label != null) {
-          @include setColor($label, $colorName, $name, "label");
-        }
-        //#endregion label
-
-        //#region link
-        $link: map.get($colorShade, "link");
-        @if ($link != null) {
-          @include setColor($link, $colorName, $name, "link");
-        }
-        //#endregion link
-
-        //#region loader
-        $loader: map.get($colorShade, "loader");
-        @if ($loader != null) {
-          @include setColor($loader, $colorName, $name, "loader");
-        }
-        //#endregion loader
-
-        //#region message
-        $message: map.get($colorShade, "message");
-        @if ($message != null) {
-          @include setColor($message, $colorName, $name, "message");
-
-          $messageHeader: map.get($message, "messageHeader");
-          @if ($messageHeader != null) {
-            @include setColor(
-              $messageHeader,
-              $colorName,
-              $name,
-              "message-header"
-            );
-          }
-
-          $messageBody: map.get($message, "messageBody");
-          @if ($messageBody != null) {
-            @include setColor($messageBody, $colorName, $name, "message-body");
-          }
-        }
-        //#endregion message
-
-        //#region progress
-        $progress: map.get($colorShade, "progress");
-        @if ($progress != null) {
-          @include setColor($link, $colorName, $name, "progress");
-        }
-        //#endregion progress
-
-        //#endregion components
-
-        //#region backgrounds
-
-        //#region dot
-        $dot: map.get($colorShade, "dot");
-        @if ($dot != null) {
-          @include setColor($dot, $colorName, $name, "dot");
-        }
-        //#endregion dot
-
-        //#region gingham
-        $gingham: map.get($colorShade, "gingham");
-        @if ($gingham != null) {
-          @include setColor($gingham, $colorName, $name, "gingham");
-        }
-        //#endregion gingham
-
-        //#region rhombus
-        $rhombus: map.get($colorShade, "rhombus");
-        @if ($rhombus != null) {
-          @include setColor($rhombus, $colorName, $name, "rhombus");
-        }
-        //#endregion rhombus
-
-        //#region stripe
-        $stripe: map.get($colorShade, "stripe");
-        @if ($stripe != null) {
-          @include setColor($stripe, $colorName, $name, "stripe");
-        }
-        //#endregion stripe
-
-        //#region zigzag
-        $zigzag: map.get($colorShade, "zigzag");
-        @if ($zigzag != null) {
-          @include setColor($zigzag, $colorName, $name, "zigzag");
+      @each $semanticColor in variables.$semanticColors {
+        $semanticColorName: map.get($semanticColor, "name");
+        $semanticColorColorName: map.get($semanticColor, "colorName");
+        $semanticColorLightnessOffset: map.get($semanticColor, "lightnessOffset");
+        $color: functions.getColorFromColors(
+          variables.$colors,
+          $semanticColorColorName
+        );
+        @if ($color != null) {
+          @include setColorShade(
+            $colorShade,
+            $semanticColorLightnessOffset,
+            $semanticColorColorName,
+            $semanticColorName,
+            $name
+          );
         }
-        //#endregion zigzag
-
-        //#endregion backgrounds
       }
     }
   }
 }
 
-@mixin setColorLight() {
-  @include setColorShades(variables.$colorShadesLight);
-  color-scheme: light;
-}
-
-@mixin setColorDark() {
-  @include setColorShades(variables.$colorShadesDark);
-  color-scheme: dark;
-}
-
-:root {
+:where(:root) {
   color-scheme: light dark;
   @each $color in variables.$colors {
     $name: map.get($color, "name");
@@ -582,12 +686,25 @@
       @include setColorVariables($color);
     }
   }
+  @include setColorShades(variables.$colorShades);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+  }
 }
 
-@include mixins.setCssVariableColorScheme("light") {
-  @include setColorLight();
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
 }
 
-@include mixins.setCssVariableColorScheme("dark") {
-  @include setColorDark();
+[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
+[data-color-scheme="dark"] {
+  color-scheme: dark;
 }