noctemyth 0.0.36

package/src/functions/index.scss

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

package/src/functions/string.scss

@@ -0,0 +1,31 @@
+@use "sass:string";
+
+@function zeroPadding($num, $length) {
+  $numString: #{$num};
+  $numLength: string.length($numString);
+
+  @while $numLength < $length {
+    $numString: "0" + $numString;
+    $numLength: string.length($numString);
+  }
+
+  @return $numString;
+}
+
+@function strReplace($str, $substr, $newsubstr, $all: false) {
+  $pos: string.index($str, $substr);
+
+  @while $pos != null {
+    $strlen: string.length($substr);
+    $start: string.slice($str, 0, $pos - 1);
+    $end: string.slice($str, $pos + $strlen);
+    $str: $start + $newsubstr + $end;
+
+    @if $all == true {
+      $pos: string.index($str, $substr);
+    } @else {
+      $pos: null;
+    }
+  }
+  @return $str;
+}

package/src/icons/check.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+
+.check {
+  background-color: transparent;
+  border-color: var(--#{variables.$prefix}color-default-fore);
+  border-radius: 25%;
+  border-style: solid;
+  border-width: 0 var(--#{variables.$prefix}border-width-medium) var(--#{variables.$prefix}border-width-medium) 0;
+  content: "";
+  display: inline-block;
+  height: 1rem;
+  transform: rotate(45deg);
+  width: 0.5rem;
+  @each $color in variables.$colors {
+    $colorName: map.get($color, "name");
+    &.is-#{$colorName} {
+      border-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
+    }
+  }
+}

package/src/icons/chevron.scss

@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+
+$line-height: 0.2rem;
+
+@mixin chevron() {
+  display: inline-block;
+  width: 1rem;
+  aspect-ratio: 5/3;
+  clip-path: polygon(
+    0 0,
+    0 #{$line-height},
+    50% 100%,
+    100% #{$line-height},
+    100% 0,
+    50% calc(100% - #{$line-height})
+  );
+  background: var(--#{variables.$prefix}color-default-fore);
+  @each $color in variables.$colors {
+    $colorName: map.get($color, "name");
+    &.is-#{$colorName} {
+      background: var(--#{variables.$prefix}color-#{$colorName}-fore);
+    }
+  }
+  @content;
+}
+
+.chevron {
+  @include chevron();
+}

package/src/icons/index.scss

@@ -0,0 +1,2 @@
+@forward "./check.scss";
+@forward "./chevron.scss";

package/src/layouts/centering.scss

@@ -0,0 +1,13 @@
+/// ⚠️`.centering` has side-effect!
+.centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  & > * {
+    margin: auto;
+  }
+  &.is-fullheight {
+    height: 100%;
+  }
+}

package/src/layouts/columns.scss

@@ -0,0 +1,97 @@
+@use "sass:math";
+@use "../mixins/index.scss" as mixins;
+@use "../variables/index.scss" as variables;
+@use "../functions/index.scss" as functions;
+
+.columns {
+  --#{variables.$prefix}gutter-x: 0;
+  --#{variables.$prefix}gutter-y: 0;
+  @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)};
+    }
+    &.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)};
+    }
+  }
+
+  &.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;
+  }
+
+  .column {
+    @include mixins.element();
+    @include mixins.column();
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+    &.is-full {
+      flex: none;
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+  @for $num from 1 through variables.$columns-count {
+    .column-#{$num} {
+      @include mixins.element();
+      @include mixins.column();
+      flex-basis: math.percentage(math.div($num, variables.$columns-count));
+      max-width: math.percentage(math.div($num, variables.$columns-count));
+      width: math.percentage(math.div($num, variables.$columns-count));
+    }
+  }
+  .column,
+  [class^="column-"] {
+    @for $num from 1 through variables.$columns-count {
+      @include mixins.is-responsive("is", "-" + $num) {
+        flex-basis: math.percentage(math.div($num, variables.$columns-count));
+        max-width: math.percentage(math.div($num, variables.$columns-count));
+        width: math.percentage(math.div($num, variables.$columns-count));
+      }
+    }
+  }
+}

package/src/layouts/container.scss

@@ -0,0 +1,59 @@
+@use "../variables/index.scss" as variables;
+@use "../functions/index.scss" as functions;
+@use "../mixins/index.scss" as mixins;
+
+.container {
+  --#{variables.$prefix}gutter-x: 0;
+  --#{variables.$prefix}gutter-y: 0;
+  @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);
+  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)};
+    }
+  }
+
+  @include mixins.screen("medium") {
+    max-width: variables.$breakpoint-medium;
+    &.is-fluid {
+      max-width: unset;
+    }
+  }
+  @include mixins.screen("large") {
+    max-width: variables.$breakpoint-large;
+    &.is-fluid {
+      max-width: unset;
+    }
+  }
+  @include mixins.screen("xlarge") {
+    max-width: variables.$breakpoint-xlarge;
+    &.is-fluid {
+      max-width: unset;
+    }
+  }
+}

package/src/layouts/index.scss

@@ -0,0 +1,3 @@
+@forward "./centering.scss";
+@forward "./columns.scss";
+@forward "./container.scss";

package/src/mixins/animation.scss

@@ -0,0 +1,80 @@
+@use "../variables/index.scss" as variables;
+
+@mixin animation() {
+  animation-fill-mode: both;
+  animation-duration: var(--#{variables.$prefix}animation-speed-normal);
+
+  &.is-infinite {
+    animation-iteration-count: infinite;
+  }
+
+  &.is-heavy {
+    animation-duration: var(--#{variables.$prefix}animation-speed-heavy);
+  }
+
+  &.is-slower {
+    animation-duration: var(--#{variables.$prefix}animation-speed-slower);
+  }
+
+  &.is-slow {
+    animation-duration: var(--#{variables.$prefix}animation-speed-slow);
+  }
+
+  &.is-fast {
+    animation-duration: var(--#{variables.$prefix}animation-speed-fast);
+  }
+
+  &.is-faster {
+    animation-duration: var(--#{variables.$prefix}animation-speed-faster);
+  }
+
+  &.is-flash {
+    animation-duration: var(--#{variables.$prefix}animation-speed-flash);
+  }
+
+  //#region direction
+  &.is-alternate {
+    animation-direction: alternate;
+  }
+
+  &.is-reverse {
+    animation-direction: reverse;
+  }
+  //#endregion direction
+
+  //#region timing-function
+  &.is-linear {
+    animation-timing-function: cubic-bezier(0, 0, 1, 1);
+  }
+
+  &.is-ease {
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  &.is-ease-in {
+    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  }
+
+  &.is-ease-out {
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  }
+
+  &.is-ease-in-out {
+    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+  }
+  //#endregion timing-function
+
+  @for $sec from 1 through 10 {
+    &.is-delay-#{$sec} {
+      animation-delay: 1s * $sec;
+    }
+  }
+
+  @content;
+}
+
+@mixin reduce-motion() {
+  @media (print), (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}

package/src/mixins/color.scss

@@ -0,0 +1,33 @@
+@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

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

package/src/mixins/index.scss

@@ -0,0 +1,5 @@
+
+@forward "./animation.scss";
+@forward "./color.scss";
+@forward "./element.scss";
+@forward "./responsive.scss";

package/src/mixins/responsive.scss

@@ -0,0 +1,222 @@
+@use "../variables/index.scss" as variables;
+
+@mixin screen($size) {
+  @if ($size == "xsmall") {
+    $max-width: variables.$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;
+    @media screen and (min-width: $min-width) {
+      @content;
+    }
+  } @else {
+    $min-width: 0;
+    $max-width: 0;
+    @if ($size == "small") {
+      $min-width: variables.$breakpoint-small;
+      $max-width: variables.$breakpoint-medium -
+        variables.$responsive-breakpoint-max-width-offset;
+    } @else if ($size == "medium") {
+      $min-width: variables.$breakpoint-medium;
+      $max-width: variables.$breakpoint-large -
+        variables.$responsive-breakpoint-max-width-offset;
+    } @else if ($size == "large") {
+      $min-width: variables.$breakpoint-large;
+      $max-width: variables.$breakpoint-xlarge -
+        variables.$responsive-breakpoint-max-width-offset;
+    } @else {
+      @error "wrong size.";
+    }
+    @media screen and (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  }
+}
+
+@mixin is-responsive($prefix: "is", $suffix: "") {
+  @include screen("xsmall") {
+    &.#{$prefix}-xsmall#{$suffix},
+    &.#{$prefix}-small-or-less#{$suffix},
+    &.#{$prefix}-medium-or-less#{$suffix},
+    &.#{$prefix}-large-or-less#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("small") {
+    &.#{$prefix}-small-or-less#{$suffix},
+    &.#{$prefix}-small#{$suffix},
+    &.#{$prefix}-small-or-more#{$suffix},
+    &.#{$prefix}-medium-or-less#{$suffix},
+    &.#{$prefix}-large-or-less#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("medium") {
+    &.#{$prefix}-small-or-more#{$suffix},
+    &.#{$prefix}-medium-or-less#{$suffix},
+    &.#{$prefix}-medium#{$suffix},
+    &.#{$prefix}-medium-or-more#{$suffix},
+    &.#{$prefix}-large-or-less#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("large") {
+    &.#{$prefix}-small-or-more#{$suffix},
+    &.#{$prefix}-medium-or-more#{$suffix},
+    &.#{$prefix}-large-or-less#{$suffix},
+    &.#{$prefix}-large#{$suffix},
+    &.#{$prefix}-large-or-more#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("xlarge") {
+    &.#{$prefix}-small-or-more#{$suffix},
+    &.#{$prefix}-medium-or-more#{$suffix},
+    &.#{$prefix}-large-or-more#{$suffix},
+    &.#{$prefix}-xlarge#{$suffix} {
+      @content;
+    }
+  }
+}
+
+@mixin add-responsible-visible() {
+  @content;
+  &.is-xsmall {
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+
+  &.is-small-or-less {
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-small {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-small-or-more {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+  }
+
+  &.is-medium-or-less {
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-medium {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-medium-or-more {
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("xsmall") {
+      display: none !important;
+    }
+  }
+
+  &.is-large-or-less {
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-large {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-large-or-more {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+  }
+
+  &.is-xlarge {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+  }
+}
+
+@mixin column() {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  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);
+}

package/src/noctemyth-skelton.scss

@@ -0,0 +1,12 @@
+/*! noctemyth-skelton | MIT License | github.com/kaminoctem/noctemyth */
+
+@use "./variables/index.scss" as variables with (
+  $is-skelton: true,
+);
+
+@forward "./css-variables/index.scss";
+@forward "./base/index.scss";
+@forward "./icons/index.scss";
+@forward "./components/index.scss";
+@forward "./backgrounds/index.scss";
+@forward "./layouts/index.scss";

package/src/noctemyth-utilities.scss

@@ -0,0 +1,3 @@
+/*! noctemyth-utilities | MIT License | github.com/kaminoctem/noctemyth */
+
+@forward "./utilities/index.scss";

package/src/noctemyth.scss

@@ -0,0 +1,9 @@
+/*! noctemyth | MIT License | github.com/kaminoctem/noctemyth */
+
+@forward "./css-variables/index.scss";
+@forward "./base/index.scss";
+@forward "./animations/index.scss";
+@forward "./icons/index.scss";
+@forward "./components/index.scss";
+@forward "./backgrounds/index.scss";
+@forward "./layouts/index.scss";

package/src/utilities/border.scss

@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+
+@each $borderStyle in variables.$borderStyles {
+  .border-#{$borderStyle} {
+    border-style: #{$borderStyle};
+    border-width: var(--#{variables.$prefix}border-width-medium);
+  }
+  @each $borderSide in variables.$borderSides {
+    .border-#{$borderSide}-#{$borderStyle} {
+      border-#{$borderSide}-style: #{$borderStyle};
+      border-#{$borderSide}-width: var(
+        --#{variables.$prefix}border-width-medium
+      );
+    }
+  }
+}
+
+@each $borderWidth in variables.$borderWidths {
+  $name: map.get($borderWidth, "name");
+  .border-width-#{$name} {
+    border-width: var(--#{variables.$prefix}border-width-#{$name});
+  }
+  @each $borderSide in variables.$borderSides {
+    .border-#{$borderSide}-width-#{$name} {
+      border-#{$borderSide}-width: var(
+        --#{variables.$prefix}border-width-#{$name}
+      );
+    }
+  }
+}
+
+@each $borderRadius in variables.$borderRadiuses {
+  $name: map.get($borderRadius, "name");
+  .border-radius-#{$name} {
+    border-radius: var(--#{variables.$prefix}border-radius-#{$name});
+  }
+}
+
+.border-sepalated {
+  border-collapse: separate;
+}
+
+.border-collapted {
+  border-collapse: collapse;
+}