noctemyth 0.0.36

package/src/css-variables/color.scss

@@ -0,0 +1,604 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+@mixin setColorVariables($color) {
+  $name: map.get($color, "name");
+  $hue: map.get($color, "hue");
+
+  $p: "0";
+  @for $i from 1 through 19 {
+    $p: "" + ($i * 5);
+    @if (string.length($p) == 1) {
+      $p: "0" + $p;
+    }
+    $lightness: variables.$color-lightness-50;
+    $chroma: variables.$color-chroma-colorful;
+
+    @if ($i < 10) {
+      $lightness-offset: (10 - $i) * variables.$color-lightness-offset-darker;
+      $lightness: variables.$color-lightness-50 + $lightness-offset;
+      @if ($lightness > 100) {
+        $lightness: 100;
+      } @else if ($i < 0) {
+        $lightness: 0;
+      }
+      $chroma-offset: (10 - $i) *
+        variables.$color-chroma-colorful-offset-darker;
+      $chroma: $chroma + $chroma-offset;
+    } @else if ($i > 10) {
+      $lightness-offset: ($i - 10) * variables.$color-lightness-offset-lighter;
+      $lightness: variables.$color-lightness-50 + $lightness-offset;
+      @if ($lightness > 100) {
+        $lightness: 100;
+      } @else if ($i < 0) {
+        $lightness: 0;
+      }
+      $chroma-offset: ($i - 10) *
+        variables.$color-chroma-colorful-offset-lighter;
+      $chroma: $chroma + $chroma-offset;
+    }
+
+    @if ($name == "default" or $name == "gray") {
+      $chroma: variables.$color-chroma-gray;
+    }
+
+    $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";
+  }
+
+  $pseudo: "";
+  @if ($pseudoName != "plain") {
+    $pseudo: "-#{$pseudoName}";
+  }
+
+  $component: "";
+  @if ($componentName != "") {
+    $component: "-#{$componentName}";
+  }
+
+  $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
+    );
+  }
+
+  $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
+    );
+  }
+
+  $border: map.get($colorShade, "border");
+  @if ($border != null) {
+    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: var(
+      --#{variables.$prefix}color-#{$srcColorName}-#{$border}
+    );
+  }
+
+  $placeholder: map.get($colorShade, "placeholder");
+  @if ($placeholder != null) {
+    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: var(
+      --#{variables.$prefix}color-#{$srcColorName}-#{$placeholder}
+    );
+  }
+
+  $shadow: map.get($colorShade, "shadow");
+  @if ($shadow != null) {
+    --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: var(
+      --#{variables.$prefix}color-#{$srcColorName}-#{$shadow}
+    );
+  }
+}
+
+@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
+    );
+
+    //#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");
+      }
+
+      $breadcrumbDivider: map.get($breadcrumbs, "breadcrumbDivider");
+      @if ($breadcrumbDivider != null) {
+        @include setColor(
+          $breadcrumbDivider,
+          "default",
+          $name,
+          "breadcrumb-divider"
+        );
+      }
+    }
+    //#endregion breadcrumbs
+
+    //#region button
+    $button: map.get($colorShade, "button");
+    @if ($button != null) {
+      @include setColor($button, "default", $name, "button");
+    }
+    //#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");
+      }
+
+      $cardFooter: map.get($card, "cardFooter");
+      @if ($cardFooter != null) {
+        @include setColor($cardFooter, "default", $name, "card-footer");
+      }
+    }
+    //#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"
+        );
+      }
+    }
+    //#endregion dialogue
+
+    //#region header
+    $header: map.get($colorShade, "header");
+    @if ($header != null) {
+      @include setColor($header, "default", $name, "header");
+    }
+    //#endregion header
+
+    //#region label
+    $label: map.get($colorShade, "label");
+    @if ($label != null) {
+      @include setColor($label, "default", $name, "label");
+    }
+    //#endregion label
+
+    //#region link
+    $link: map.get($colorShade, "link");
+    @if ($link != null) {
+      @include setColor($link, "default", $name, "link");
+    }
+    //#endregion link
+
+    //#region loader
+    $loader: map.get($colorShade, "loader");
+    @if ($loader != null) {
+      @include setColor($loader, "default", $name, "loader");
+    }
+    //#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");
+      }
+    }
+    //#endregion message
+
+    //#region progress
+    $progress: map.get($colorShade, "progress");
+    @if ($progress != null) {
+      @include setColor($progress, "default", $name, "progress");
+    }
+    //#endregion progress
+
+    //#endregion components
+
+    //#region backgrounds
+
+    //#region dot
+    $dot: map.get($colorShade, "dot");
+    @if ($dot != null) {
+      @include setColor($dot, "default", $name, "dot");
+    }
+    //#endregion dot
+
+    //#region gingham
+    $gingham: map.get($colorShade, "gingham");
+    @if ($gingham != null) {
+      @include setColor($gingham, "default", $name, "gingham");
+    }
+    //#endregion gingham
+
+    //#region rhombus
+    $rhombus: map.get($colorShade, "rhombus");
+    @if ($rhombus != null) {
+      @include setColor($rhombus, "default", $name, "rhombus");
+    }
+    //#endregion rhombus
+
+    //#region stripe
+    $stripe: map.get($colorShade, "stripe");
+    @if ($stripe != null) {
+      @include setColor($stripe, "default", $name, "stripe");
+    }
+    //#endregion stripe
+
+    //#region zigzag
+    $zigzag: map.get($colorShade, "zigzag");
+    @if ($zigzag != null) {
+      @include setColor($zigzag, "default", $name, "zigzag");
+    }
+    //#endregion zigzag
+
+    //#endregion backgrounds
+
+    @if (not variables.$is-skelton) {
+      @each $color in variables.$colors {
+        $colorName: map.get($color, "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");
+        }
+        //#endregion zigzag
+
+        //#endregion backgrounds
+      }
+    }
+  }
+}
+
+@mixin setColorLight() {
+  @include setColorShades(variables.$colorShadesLight);
+  color-scheme: light;
+}
+
+@mixin setColorDark() {
+  @include setColorShades(variables.$colorShadesDark);
+  color-scheme: dark;
+}
+
+:root {
+  @each $color in variables.$colors {
+    $name: map.get($color, "name");
+    @if ($name == "gray") {
+      @include setColorVariables($color);
+    } @else if (not variables.$is-skelton) {
+      @include setColorVariables($color);
+    }
+  }
+
+  @include setColorLight();
+}
+
+@include mixins.setCssVariableColorScheme("light") {
+  @include setColorLight();
+}
+
+@include mixins.setCssVariableColorScheme("dark") {
+  @include setColorDark();
+}

package/src/css-variables/components/breadcrumbs.scss

@@ -0,0 +1,5 @@
+@use "../../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}breadcrumb-divider: "#{variables.$breadcrumb-divider}";
+}

package/src/css-variables/components/button.scss

@@ -0,0 +1,6 @@
+@use "../../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}button-padding-x: #{variables.$button-padding-x};
+  --#{variables.$prefix}button-padding-y: #{variables.$button-padding-y};
+}

package/src/css-variables/components/dialogue.scss

@@ -0,0 +1,15 @@
+@use "../../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}dialogue-avatar-size-default: #{variables.$dialogue-avatar-size-default};
+  --#{variables.$prefix}dialogue-avatar-size-small: #{variables.$dialogue-avatar-size-small};
+  --#{variables.$prefix}dialogue-avatar-size-large: #{variables.$dialogue-avatar-size-large};
+  --#{variables.$prefix}dialogue-avatar-top-offset: #{variables.$dialogue-avatar-top-offset};
+  --#{variables.$prefix}dialogue-name-font-size: #{variables.$dialogue-name-font-size};
+  --#{variables.$prefix}dialogue-name-padding-x: #{variables.$dialogue-name-padding-x};
+  --#{variables.$prefix}dialogue-name-padding-y: #{variables.$dialogue-name-padding-y};
+  --#{variables.$prefix}dialogue-messege-arrow-width: #{variables.$dialogue-messege-arrow-width};
+  --#{variables.$prefix}dialogue-messege-arrow-height: #{variables.$dialogue-messege-arrow-height};
+  --#{variables.$prefix}dialogue-message-inner-padding-x: #{variables.$dialogue-message-inner-padding-x};
+  --#{variables.$prefix}dialogue-message-inner-padding-y: #{variables.$dialogue-message-inner-padding-y};
+}

package/src/css-variables/components/header.scss

@@ -0,0 +1,7 @@
+@use "../../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}header-backdrop-filter: #{variables.$header-backdrop-filter};
+  --#{variables.$prefix}header-z-index-is-sticky: #{variables.$header-z-index-is-sticky};
+  --#{variables.$prefix}header-z-index-is-fixed: #{variables.$header-z-index-is-fixed};
+}

package/src/css-variables/components/heading.scss

@@ -0,0 +1,5 @@
+@use "../../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}font-family-heading: var(--#{variables.$prefix}font-family-sans-serif);
+}

package/src/css-variables/components/index.scss

@@ -0,0 +1,5 @@
+@forward "./breadcrumbs.scss";
+@forward "./button.scss";
+@forward "./dialogue.scss";
+@forward "./header.scss";
+@forward "./heading.scss";

package/src/css-variables/index.scss

@@ -0,0 +1,7 @@
+
+@forward "./animation.scss";
+@forward "./border.scss";
+@forward "./color.scss";
+@forward "./components/index.scss";
+@forward "./miscellaneous.scss";
+@forward "./typography.scss";

package/src/css-variables/miscellaneous.scss

@@ -0,0 +1,8 @@
+@use "../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}z-index-tabula:  #{variables.$z-index-tabula};
+
+  --#{variables.$prefix}z-index-modal:  #{variables.$z-index-modal};
+  --#{variables.$prefix}z-index-modal-content:  #{variables.$z-index-modal-content};
+}

package/src/css-variables/typography.scss

@@ -0,0 +1,24 @@
+@use "../variables/index.scss" as variables;
+
+:root {
+  --#{variables.$prefix}font-family-serif: #{variables.$font-family-serif};
+  --#{variables.$prefix}font-family-sans-serif: #{variables.$font-family-sans-serif};
+  --#{variables.$prefix}font-family-monospace: #{variables.$font-family-monospace};
+  --#{variables.$prefix}font-family-main: var(--#{variables.$prefix}font-family-sans-serif);
+  --#{variables.$prefix}font-family-code: var(--#{variables.$prefix}font-family-monospace);
+  --#{variables.$prefix}font-size-xsmall: #{variables.$font-size-xsmall};
+  --#{variables.$prefix}font-size-small: #{variables.$font-size-small};
+  --#{variables.$prefix}font-size-normal: #{variables.$font-size-normal};
+  --#{variables.$prefix}font-size-medium: #{variables.$font-size-medium};
+  --#{variables.$prefix}font-size-large: #{variables.$font-size-large};
+  --#{variables.$prefix}font-size-xlarge: #{variables.$font-size-xlarge};
+  --#{variables.$prefix}font-size-xxlarge: #{variables.$font-size-xxlarge};
+  --#{variables.$prefix}font-size-xxxlarge: #{variables.$font-size-xxxlarge};
+  --#{variables.$prefix}font-size-xxxxlarge: #{variables.$font-size-xxxxlarge};
+  --#{variables.$prefix}font-size-xxxxxlarge: #{variables.$font-size-xxxxxlarge};
+  --#{variables.$prefix}font-weight-light: #{variables.$font-weight-light};
+  --#{variables.$prefix}font-weight-normal: #{variables.$font-weight-normal};
+  --#{variables.$prefix}font-weight-medium: #{variables.$font-weight-medium};
+  --#{variables.$prefix}font-weight-semibold: #{variables.$font-weight-semibold};
+  --#{variables.$prefix}font-weight-bold: #{variables.$font-weight-bold};
+}