noctemyth 0.0.36

package/src/utilities/color.scss

@@ -0,0 +1,327 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+@mixin forecolor($colorName, $numStr) {
+  @if ($colorName == "rainbow") {
+    background-clip: text !important;
+    background-image: linear-gradient(
+      135deg,
+      var(--#{variables.$prefix}color-red-#{$numStr}),
+      var(--#{variables.$prefix}color-orange-#{$numStr}),
+      var(--#{variables.$prefix}color-yellow-#{$numStr}),
+      var(--#{variables.$prefix}color-green-#{$numStr}),
+      var(--#{variables.$prefix}color-cyan-#{$numStr}),
+      var(--#{variables.$prefix}color-blue-#{$numStr}),
+      var(--#{variables.$prefix}color-violet-#{$numStr}),
+      var(--#{variables.$prefix}color-magenta-#{$numStr})
+    ) !important;
+    color: transparent !important;
+  } @else {
+    color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+  }
+}
+
+@mixin backcolor($colorName, $numStr) {
+  @if ($colorName == "rainbow") {
+    background-image: linear-gradient(
+      135deg,
+      var(--#{variables.$prefix}color-red-#{$numStr}),
+      var(--#{variables.$prefix}color-orange-#{$numStr}),
+      var(--#{variables.$prefix}color-yellow-#{$numStr}),
+      var(--#{variables.$prefix}color-green-#{$numStr}),
+      var(--#{variables.$prefix}color-cyan-#{$numStr}),
+      var(--#{variables.$prefix}color-blue-#{$numStr}),
+      var(--#{variables.$prefix}color-violet-#{$numStr}),
+      var(--#{variables.$prefix}color-magenta-#{$numStr})
+    ) !important;
+  } @else {
+    background-color: var(
+      --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+    ) !important;
+  }
+}
+
+@mixin bordercolor($colorName, $numStr, $borderSide: "") {
+  @if ($borderSide == "") {
+    @if ($colorName == "rainbow") {
+      // not available
+    } @else {
+      border-color: var(
+        --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+      ) !important;
+    }
+  } @else {
+    @if ($colorName == "rainbow") {
+      // not available
+    } @else {
+      border-#{$borderSide}-color: var(
+        --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+      ) !important;
+    }
+  }
+}
+
+@mixin highlighter($colorName, $numStr) {
+  background: linear-gradient(
+    transparent 66.66%,
+    var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+  ) !important;
+}
+
+@mixin colorUtilities($colorScheme: "") {
+  $derived: "";
+  @if $colorScheme != "" {
+    $derived: "-#{$colorScheme}";
+  }
+
+  @each $color in variables.$colors {
+    $colorName: map.get($color, "name");
+    $numStr: "00";
+    @for $p from 1 through 19 {
+      $numStr: "#{($p * 5)}";
+      @if (string.length($numStr) == 1) {
+        $numStr: "0" + $numStr;
+      }
+      //#region forecolor
+      .forecolor#{$derived}-#{$colorName}-#{$numStr} {
+        @include forecolor($colorName, $numStr);
+      }
+      .forecolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          @include forecolor($colorName, $numStr);
+        }
+      }
+      .forecolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          @include forecolor($colorName, $numStr);
+        }
+      }
+      .forecolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          @include forecolor($colorName, $numStr);
+        }
+      }
+      .forecolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          @include forecolor($colorName, $numStr);
+        }
+      }
+      //#endregion forecolor
+
+      //#region backcolor
+      .backcolor#{$derived}-#{$colorName}-#{$numStr} {
+        @include backcolor($colorName, $numStr);
+      }
+      .backcolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          @include backcolor($colorName, $numStr);
+        }
+      }
+      .backcolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          @include backcolor($colorName, $numStr);
+        }
+      }
+      .backcolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          @include backcolor($colorName, $numStr);
+        }
+      }
+      .backcolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          @include backcolor($colorName, $numStr);
+        }
+      }
+      //#endregion backcolor
+
+      //#region bordercolor
+      .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
+        @include bordercolor($colorName, $numStr);
+      }
+      .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
+        @include bordercolor($colorName, $numStr);
+      }
+      .bordercolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          @include bordercolor($colorName, $numStr);
+        }
+      }
+      .bordercolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          @include bordercolor($colorName, $numStr);
+        }
+      }
+      .bordercolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          @include bordercolor($colorName, $numStr);
+        }
+      }
+      .bordercolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          @include bordercolor($colorName, $numStr);
+        }
+      }
+
+      @each $borderSide in variables.$borderSides {
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-#{$numStr} {
+          @include bordercolor($colorName, $numStr, $borderSide);
+        }
+        .bordercolor#{$derived}-#{$borderSide}-hover-#{$colorName}-#{$numStr} {
+          &:hover {
+            @include bordercolor($colorName, $numStr, $borderSide);
+          }
+        }
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-focus-#{$numStr} {
+          &:focus {
+            @include bordercolor($colorName, $numStr, $borderSide);
+          }
+        }
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-active-#{$numStr} {
+          &:active {
+            @include bordercolor($colorName, $numStr, $borderSide);
+          }
+        }
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-disabled-#{$numStr} {
+          &[disabled],
+          fieldset[disabled] {
+            @include bordercolor($colorName, $numStr, $borderSide);
+          }
+        }
+      }
+      //#endregion bordercolor
+
+      //#region highlighter
+      .highlighter#{$derived}-#{$colorName}-#{$numStr} {
+        @include highlighter($colorName, $numStr);
+      }
+      .highlighter#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          @include highlighter($colorName, $numStr);
+        }
+      }
+      .highlighter#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          @include highlighter($colorName, $numStr);
+        }
+      }
+      .highlighter#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          @include highlighter($colorName, $numStr);
+        }
+      }
+      .highlighter#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          @include highlighter($colorName, $numStr);
+        }
+      }
+      //#endregion highlighter
+    }
+  }
+
+  //#region rainbow
+
+  $numStr: "00";
+  @for $p from 1 through 19 {
+    $numStr: "#{($p * 5)}";
+    @if (string.length($numStr) == 1) {
+      $numStr: "0" + $numStr;
+    }
+    //#region forecolor
+    .forecolor#{$derived}-rainbow-#{$numStr} {
+      @include forecolor("rainbow", $numStr);
+    }
+    .forecolor#{$derived}-hover-rainbow-#{$numStr} {
+      &:hover {
+        @include forecolor("rainbow", $numStr);
+      }
+    }
+    .forecolor#{$derived}-rainbow-focus-#{$numStr} {
+      &:focus {
+        @include forecolor("rainbow", $numStr);
+      }
+    }
+    .forecolor#{$derived}-rainbow-active-#{$numStr} {
+      &:active {
+        @include forecolor("rainbow", $numStr);
+      }
+    }
+    .forecolor#{$derived}-rainbow-disabled-#{$numStr} {
+      &[disabled],
+      fieldset[disabled] {
+        @include forecolor("rainbow", $numStr);
+      }
+    }
+    //#endregion forecolor
+
+    //#region backcolor
+    .backcolor#{$derived}-rainbow-#{$numStr} {
+      @include backcolor("rainbow", $numStr);
+    }
+    .backcolor#{$derived}-hover-rainbow-#{$numStr} {
+      &:hover {
+        @include backcolor("rainbow", $numStr);
+      }
+    }
+    .backcolor#{$derived}-rainbow-focus-#{$numStr} {
+      &:focus {
+        @include backcolor("rainbow", $numStr);
+      }
+    }
+    .backcolor#{$derived}-rainbow-active-#{$numStr} {
+      &:active {
+        @include backcolor("rainbow", $numStr);
+      }
+    }
+    .backcolor#{$derived}-rainbow-disabled-#{$numStr} {
+      &[disabled],
+      fieldset[disabled] {
+        @include backcolor("rainbow", $numStr);
+      }
+    }
+    //#endregion backcolor
+
+    // bordercolor is not available
+
+    // highlighter is not available
+    .highlighter#{$derived}-rainbow-#{$numStr} {
+      @include highlighter("rainbow", $numStr);
+    }
+    .highlighter#{$derived}-hover-rainbow-#{$numStr} {
+      &:hover {
+        @include highlighter("rainbow", $numStr);
+      }
+    }
+    .highlighter#{$derived}-rainbow-focus-#{$numStr} {
+      &:focus {
+        @include highlighter("rainbow", $numStr);
+      }
+    }
+    .highlighter#{$derived}-rainbow-active-#{$numStr} {
+      &:active {
+        @include highlighter("rainbow", $numStr);
+      }
+    }
+    .highlighter#{$derived}-rainbow-disabled-#{$numStr} {
+      &[disabled],
+      fieldset[disabled] {
+        @include highlighter("rainbow", $numStr);
+      }
+    }
+    //#endregion highlighter
+  }
+  //#endregion rainbow
+}
+
+@include colorUtilities();
+@include mixins.setColorScheme("light") {
+  @include colorUtilities("light");
+}
+@include mixins.setColorScheme("dark") {
+  @include colorUtilities("dark");
+}

package/src/utilities/decoration.scss

@@ -0,0 +1,16 @@
+@use "../variables/index.scss" as variables;
+
+.box-shadow {
+  box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-default-shadow);
+}
+
+.text-shadow {
+  text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+    -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+    2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+    -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+    2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+    0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+    -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+    0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
+}

package/src/utilities/index.scss

@@ -0,0 +1,7 @@
+@forward "./border.scss";
+@forward "./color.scss";
+@forward "./decoration.scss";
+@forward "./positioning.scss";
+@forward "./sizing.scss";
+@forward "./spacing.scss";
+@forward "./typography.scss";

package/src/utilities/positioning.scss

@@ -0,0 +1,90 @@
+@use "../functions/index.scss" as functions;
+
+.display-block {
+  display: block !important;
+}
+
+.display-inline {
+  display: inline !important;
+}
+
+.display-inline-block {
+  display: inline-block !important;
+}
+
+.display-flex {
+  display: flex !important;
+}
+
+.display-grid {
+  display: grid !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+.top-auto {
+  top: auto !important;
+}
+.right-auto {
+  right: auto !important;
+}
+.bottom-auto {
+  bottom: auto !important;
+}
+.left-auto {
+  left: auto !important;
+}
+
+.top-unset {
+  top: unset !important;
+}
+.right-unset {
+  right: unset !important;
+}
+.bottom-unset {
+  bottom: unset !important;
+}
+.left-unset {
+  left: unset !important;
+}
+
+@for $p from 0 through 4 {
+  .top-#{$p * 25}percent {
+    top: $p * 25% !important;
+  }
+  .right-#{$p * 25}percent {
+    right: $p * 25% !important;
+  }
+  .bottom-#{$p * 25}percent {
+    bottom: $p * 25% !important;
+  }
+  .left-#{$p * 25}percent {
+    left: $p * 25% !important;
+  }
+}
+
+.translate-middle-x {
+  transform: translateX(-50%) !important;
+}
+
+.translate-middle-y {
+  transform: translateY(-50%) !important;
+}
+
+.translate-middle {
+  transform: translate(-50%, -50%) !important;
+}

package/src/utilities/sizing.scss

@@ -0,0 +1,142 @@
+@use "../functions/index.scss" as functions;
+
+// @for $p from 0 through 20 {
+//   $escapedQuarter: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
+//   .width-#{$escapedQuarter}rem {
+//     width: $p * 0.25rem !important;
+//   }
+//   .height-#{$escapedQuarter}rem {
+//     height: $p * 0.25rem !important;
+//   }
+// }
+
+@for $p from 1 through 4 {
+  $escaped: functions.strReplace(#{($p * 25)}, ".", "\\.");
+  .width-#{$escaped}percent {
+    width: $p * 25% !important;
+  }
+  .height-#{$escaped}percent {
+    height: $p * 25% !important;
+  }
+  .max-width-#{$escaped}percent {
+    max-width: $p * 25% !important;
+  }
+  .max-height-#{$escaped}percent {
+    max-height: $p * 25% !important;
+  }
+  .min-width-#{$escaped}percent {
+    min-width: $p * 25% !important;
+  }
+  .min-height-#{$escaped}percent {
+    min-height: $p * 25% !important;
+  }
+}
+
+.width-auto {
+  width: auto !important;
+}
+
+.height-auto {
+  height: auto !important;
+}
+
+@mixin aspect-ratio-base() {
+  contain: strict;
+  width: 100%;
+  height: auto;
+}
+
+.aspect-ratio-square {
+  @include aspect-ratio-base();
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-ratio-paper-landscape {
+  @include aspect-ratio-base();
+  aspect-ratio: 1.414 / 1;
+}
+
+.aspect-ratio-paper-portrait {
+  @include aspect-ratio-base();
+  aspect-ratio: 1 / 1.414;
+}
+
+.aspect-ratio-trading-card-small-landscape {
+  @include aspect-ratio-base();
+  aspect-ratio: 86 / 59;
+}
+
+.aspect-ratio-trading-card-small-portrait {
+  @include aspect-ratio-base();
+  aspect-ratio: 59 / 86;
+}
+
+.aspect-ratio-trading-card-standard-landscape {
+  @include aspect-ratio-base();
+  aspect-ratio: 88 / 63;
+}
+
+.aspect-ratio-trading-card-standard-portrait {
+  @include aspect-ratio-base();
+  aspect-ratio: 63 / 88;
+}
+
+.aspect-ratio-trading-card-arcade-landscape {
+  @include aspect-ratio-base();
+  aspect-ratio: 81 / 58;
+}
+
+.aspect-ratio-trading-card-arcade-portrait {
+  @include aspect-ratio-base();
+  aspect-ratio: 58 / 81;
+}
+
+.aspect-ratio-2-3 {
+  @include aspect-ratio-base();
+  aspect-ratio: 2 / 3;
+}
+
+.aspect-ratio-3-2 {
+  @include aspect-ratio-base();
+  aspect-ratio: 3 / 2;
+}
+
+.aspect-ratio-3-4 {
+  @include aspect-ratio-base();
+  aspect-ratio: 3 / 4;
+}
+
+.aspect-ratio-4-3 {
+  @include aspect-ratio-base();
+  aspect-ratio: 4 / 3;
+}
+
+.aspect-ratio-4-5 {
+  @include aspect-ratio-base();
+  aspect-ratio: 4 / 5;
+}
+
+.aspect-ratio-5-4 {
+  @include aspect-ratio-base();
+  aspect-ratio: 5 / 4;
+}
+
+.aspect-ratio-5-8 {
+  @include aspect-ratio-base();
+  aspect-ratio: 5 / 8;
+}
+
+.aspect-ratio-8-5 {
+  @include aspect-ratio-base();
+  aspect-ratio: 8 / 5;
+}
+
+.aspect-ratio-9-16 {
+  @include aspect-ratio-base();
+  aspect-ratio: 9 / 16;
+}
+
+.aspect-ratio-16-9 {
+  @include aspect-ratio-base();
+  aspect-ratio: 16 / 9;
+}