noctemyth 0.2.0 → 1.0.0

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

@@ -8,8 +8,8 @@
   --#{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-arrow-width: #{variables.$dialogue-message-arrow-width};
+  --#{variables.$prefix}dialogue-message-arrow-height: #{variables.$dialogue-message-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

@@ -1,6 +1,7 @@
 @use "../../variables/index.scss" as variables;
 
 :root {
+  --#{variables.$prefix}header-min-height: #{variables.$header-min-height};
   --#{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/index.scss

@@ -3,5 +3,6 @@
 @forward "./border.scss";
 @forward "./color.scss";
 @forward "./components/index.scss";
+@forward "./layout.scss";
 @forward "./miscellaneous.scss";
 @forward "./typography.scss";

package/src/css-variables/layout.scss

@@ -0,0 +1,11 @@
+@use "../variables/index.scss" as variables;
+
+:where(:root) {
+  --#{variables.$prefix}responsive-breakpoint-xsmall: #{variables.$responsive-breakpoint-xsmall};
+  --#{variables.$prefix}responsive-breakpoint-small: #{variables.$responsive-breakpoint-small};
+  --#{variables.$prefix}responsive-breakpoint-medium: #{variables.$responsive-breakpoint-medium};
+  --#{variables.$prefix}responsive-breakpoint-large: #{variables.$responsive-breakpoint-large};
+  --#{variables.$prefix}responsive-breakpoint-xlarge: #{variables.$responsive-breakpoint-xlarge};
+
+  --#{variables.$prefix}responsive-breakpoint-max-width-offset: #{variables.$responsive-breakpoint-max-width-offset};
+}

package/src/css-variables/miscellaneous.scss

@@ -1,8 +1,8 @@
 @use "../variables/index.scss" as variables;
 
-:root {
-  --#{variables.$prefix}z-index-tabula:  #{variables.$z-index-tabula};
+:where(:root) {
+  --#{variables.$prefix}z-index-dub: #{variables.$z-index-dub};
 
-  --#{variables.$prefix}z-index-modal:  #{variables.$z-index-modal};
-  --#{variables.$prefix}z-index-modal-content:  #{variables.$z-index-modal-content};
+  --#{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

@@ -1,6 +1,6 @@
 @use "../variables/index.scss" as variables;
 
-:root {
+:where(: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};

package/src/functions/color.scss

@@ -0,0 +1,13 @@
+@use "sass:map";
+
+@function getColorFromColors($colors, $colorName) {
+  @each $color in $colors {
+    $name: map.get($color, "name");
+
+    @if ($name == $colorName) {
+      @return $color;
+    }
+  }
+
+  @return null;
+}

package/src/functions/index.scss

@@ -1 +1,2 @@
 @forward "./string.scss";
+@forward "./color.scss";

package/src/functions/string.scss

@@ -29,3 +29,15 @@
   }
   @return $str;
 }
+
+@function colorLightnessNumberToString($num) {
+  @if ($num <= 5) {
+    @return "05";
+  }
+
+  @if ($num >= 95) {
+    @return "95";
+  }
+
+  @return zeroPadding($num, 2);
+}

package/src/layouts/centering.scss

@@ -1,5 +1,5 @@
 /// ⚠️`.centering` has side-effect!
-.centering {
+:where(.centering) {
   display: flex;
   justify-content: center;
   align-items: center;

package/src/layouts/columns.scss

@@ -3,67 +3,71 @@
 @use "../variables/index.scss" as variables;
 @use "../functions/index.scss" as functions;
 
-.columns {
-  --#{variables.$prefix}gutter-x: 0rem;
-  --#{variables.$prefix}gutter-y: 0rem;
+:where(.columns) {
+  --#{variables.$prefix}columns-gutter-x: 0rem;
+  --#{variables.$prefix}columns-gutter-y: 0rem;
   @include mixins.element();
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: calc(var(--#{variables.$prefix}gutter-y) * -1);
-  margin-right: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
-  margin-left: calc(var(--#{variables.$prefix}gutter-x) * -0.5);
-  @for $p from 0 through 20 {
-    $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
-    &.has-gutter-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
-    }
-    &.has-gutter-x-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
+  margin-top: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
+  margin-bottom: calc(var(--#{variables.$prefix}columns-gutter-y) * -0.5);
+  margin-right: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
+  margin-left: calc(var(--#{variables.$prefix}columns-gutter-x) * -0.5);
+
+  @if (not variables.$is-skelton) {
+    @for $p from 0 through 20 {
+      $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
+      &.has-gutter-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      &.has-gutter-x-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+      }
+      &.has-gutter-y-#{$escapedQuarter}rem {
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-x: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}columns-gutter-y: #{($p * 0.25rem)};
+      }
     }
-    &.has-gutter-y-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+
+    &.is-direction-row {
+      flex-direction: row;
     }
-    @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+    &.is-direction-row-reverse {
+      flex-direction: row-reverse;
     }
-    @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
+    &.is-direction-column {
+      flex-direction: column;
     }
-    @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+    &.is-direction-column-reverse {
+      flex-direction: column-reverse;
     }
-  }
-
-  &.is-direction-row {
-    flex-direction: row;
-  }
-  &.is-direction-row-reverse {
-    flex-direction: row-reverse;
-  }
-  &.is-direction-column {
-    flex-direction: column;
-  }
-  &.is-direction-column-reverse {
-    flex-direction: column-reverse;
-  }
 
-  @include mixins.is-responsive("is", "-direction-row") {
-    flex-direction: row;
-  }
-  @include mixins.is-responsive("is", "-direction-row-reverse") {
-    flex-direction: row-reverse;
-  }
-  @include mixins.is-responsive("is", "-direction-column") {
-    flex-direction: column;
-  }
-  @include mixins.is-responsive("is", "-direction-column-reverse") {
-    flex-direction: column-reverse;
+    @include mixins.is-responsive("is", "-direction-row") {
+      flex-direction: row;
+    }
+    @include mixins.is-responsive("is", "-direction-row-reverse") {
+      flex-direction: row-reverse;
+    }
+    @include mixins.is-responsive("is", "-direction-column") {
+      flex-direction: column;
+    }
+    @include mixins.is-responsive("is", "-direction-column-reverse") {
+      flex-direction: column-reverse;
+    }
   }
 
-  .column {
+  :where(.column) {
     @include mixins.element();
     @include mixins.column();
     flex-grow: 1;
@@ -75,8 +79,9 @@
       width: 100%;
     }
   }
+
   @for $num from 1 through variables.$columns-count {
-    .column-#{$num} {
+    :where(.column-#{$num}) {
       @include mixins.element();
       @include mixins.column();
       flex-basis: math.percentage(math.div($num, variables.$columns-count));
@@ -84,7 +89,8 @@
       width: math.percentage(math.div($num, variables.$columns-count));
     }
   }
-  .column,
+
+  :where(.column),
   [class^="column-"] {
     @for $num from 1 through variables.$columns-count {
       @include mixins.is-responsive("is", "-" + $num) {

package/src/layouts/container.scss

@@ -2,56 +2,58 @@
 @use "../functions/index.scss" as functions;
 @use "../mixins/index.scss" as mixins;
 
-.container {
-  --#{variables.$prefix}gutter-x: 0rem;
-  --#{variables.$prefix}gutter-y: 0rem;
+:where(.container) {
+  --#{variables.$prefix}container-gutter-x: 0rem;
+  --#{variables.$prefix}container-gutter-y: 0rem;
   @include mixins.element();
-  padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
-  padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
-  padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
-  padding-left: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
+  padding-top: calc(var(--#{variables.$prefix}container-gutter-y) * 0.5);
+  padding-bottom: calc(var(--#{variables.$prefix}container-gutter-y) * 0.5);
+  padding-right: calc(var(--#{variables.$prefix}container-gutter-x) * 0.5);
+  padding-left: calc(var(--#{variables.$prefix}container-gutter-x) * 0.5);
   margin-right: auto;
   margin-left: auto;
   width: auto;
 
-  @for $p from 0 through 20 {
-    $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
-    &.has-gutter-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
-    }
-    &.has-gutter-x-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-    }
-    &.has-gutter-y-#{$escapedQuarter}rem {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
-    }
-    @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
-    }
-    @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-x: #{($p * 0.25rem)};
-    }
-    @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
-      --#{variables.$prefix}gutter-y: #{($p * 0.25rem)};
+  @if (not variables.$is-skelton) {
+    @for $p from 0 through 20 {
+      $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
+      &.has-gutter-#{$escapedQuarter}rem {
+        --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
+      }
+      &.has-gutter-x-#{$escapedQuarter}rem {
+        --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
+      }
+      &.has-gutter-y-#{$escapedQuarter}rem {
+        --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
+        --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-x", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}container-gutter-x: #{($p * 0.25rem)};
+      }
+      @include mixins.is-responsive("has-gutter-y", "-#{$escapedQuarter}rem") {
+        --#{variables.$prefix}container-gutter-y: #{($p * 0.25rem)};
+      }
     }
   }
 
   @include mixins.screen("medium") {
-    max-width: variables.$breakpoint-medium;
+    max-width: variables.$responsive-breakpoint-medium;
     &.is-fluid {
       max-width: unset;
     }
   }
   @include mixins.screen("large") {
-    max-width: variables.$breakpoint-large;
+    max-width: variables.$responsive-breakpoint-large;
     &.is-fluid {
       max-width: unset;
     }
   }
   @include mixins.screen("xlarge") {
-    max-width: variables.$breakpoint-xlarge;
+    max-width: variables.$responsive-breakpoint-xlarge;
     &.is-fluid {
       max-width: unset;
     }

package/src/mixins/color.scss

@@ -1,33 +1 @@
 @use "../variables/index.scss" as variables;
-
-@mixin setCssVariableColorScheme($colorScheme: "") {
-  @if $colorScheme == "light" or $colorScheme == "dark" {
-    @media (prefers-color-scheme: $colorScheme) {
-      :root {
-        @content;
-      }
-    }
-    [data-color-scheme="#{$colorScheme}"] {
-      @content;
-    }
-  } @else {
-    [data-color-scheme="#{$colorScheme}"] {
-      @content;
-    }
-  }
-}
-
-@mixin setColorScheme($colorScheme: "") {
-  @if $colorScheme == "light" or $colorScheme == "dark" {
-    @media (prefers-color-scheme: $colorScheme) {
-      @content;
-    }
-    [data-color-scheme="#{$colorScheme}"] {
-      @content;
-    }
-  } @else {
-    [data-color-scheme="#{$colorScheme}"] {
-      @content;
-    }
-  }
-}

package/src/mixins/element.scss

@@ -1,5 +1,5 @@
 @mixin element() {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+  margin: unset;
+  padding: unset;
 }

package/src/mixins/responsive.scss

@@ -2,13 +2,13 @@
 
 @mixin screen($size) {
   @if ($size == "xsmall") {
-    $max-width: variables.$breakpoint-small -
+    $max-width: variables.$responsive-breakpoint-small +
       variables.$responsive-breakpoint-max-width-offset;
     @media screen and (max-width: $max-width) {
       @content;
     }
   } @else if ($size == "xlarge") {
-    $min-width: variables.$breakpoint-xlarge;
+    $min-width: variables.$responsive-breakpoint-xlarge;
     @media screen and (min-width: $min-width) {
       @content;
     }
@@ -16,16 +16,16 @@
     $min-width: 0;
     $max-width: 0;
     @if ($size == "small") {
-      $min-width: variables.$breakpoint-small;
-      $max-width: variables.$breakpoint-medium -
+      $min-width: variables.$responsive-breakpoint-small;
+      $max-width: variables.$responsive-breakpoint-medium +
         variables.$responsive-breakpoint-max-width-offset;
     } @else if ($size == "medium") {
-      $min-width: variables.$breakpoint-medium;
-      $max-width: variables.$breakpoint-large -
+      $min-width: variables.$responsive-breakpoint-medium;
+      $max-width: variables.$responsive-breakpoint-large +
         variables.$responsive-breakpoint-max-width-offset;
     } @else if ($size == "large") {
-      $min-width: variables.$breakpoint-large;
-      $max-width: variables.$breakpoint-xlarge -
+      $min-width: variables.$responsive-breakpoint-large;
+      $max-width: variables.$responsive-breakpoint-xlarge +
         variables.$responsive-breakpoint-max-width-offset;
     } @else {
       @error "wrong size.";
@@ -216,7 +216,8 @@
   position: relative;
   width: 100%;
   max-width: 100%;
-  padding-top: calc(var(--#{variables.$prefix}gutter-y));
-  padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
-  padding-left: calc(var(--#{variables.$prefix}gutter-x) * 0.5);
+  padding-top: calc(var(--#{variables.$prefix}columns-gutter-y) * 0.5);
+  padding-bottom: calc(var(--#{variables.$prefix}columns-gutter-y) * 0.5);
+  padding-right: calc(var(--#{variables.$prefix}columns-gutter-x) * 0.5);
+  padding-left: calc(var(--#{variables.$prefix}columns-gutter-x) * 0.5);
 }

package/src/utilities/border.scss

@@ -5,6 +5,7 @@
   .border-#{$borderStyle} {
     border-style: #{$borderStyle};
     border-width: var(--#{variables.$prefix}border-width-medium);
+    border-color: var(--#{variables.$prefix}color-default-border);
   }
   @each $borderSide in variables.$borderSides {
     .border-#{$borderSide}-#{$borderStyle} {
@@ -12,6 +13,9 @@
       border-#{$borderSide}-width: var(
         --#{variables.$prefix}border-width-medium
       );
+      border-#{$borderSide}-color: var(
+        --#{variables.$prefix}color-default-border
+      );
     }
   }
 }