minolith 0.0.0

package/src/mixins/responsive.scss

@@ -0,0 +1,220 @@
+@use "../variables/index.scss" as variables;
+
+$offset: 0.02px;
+
+@mixin screen($size) {
+  @if ($size == "xsmall") {
+    $max-width: variables.$breakpoint-small - $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: variables.$breakpoint-medium !default;
+    $max-width: variables.$breakpoint-large - $offset !default;
+    @if ($size == "medium") {
+    } @else if ($size == "small") {
+      $min-width: variables.$breakpoint-small;
+      $max-width: variables.$breakpoint-medium - $offset;
+    } @else if ($size == "large") {
+      $min-width: variables.$breakpoint-large;
+      $max-width: variables.$breakpoint-xlarge - $offset;
+    } @else {
+      @error "size wrong.";
+    }
+    @media screen and (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  }
+}
+
+@mixin is-responsive($suffix: "") {
+  @include screen("xsmall") {
+    &.is-xsmall#{$suffix},
+    &.is-xsmall-up#{$suffix},
+    &.is-small-down#{$suffix},
+    &.is-medium-down#{$suffix},
+    &.is-large-down#{$suffix},
+    &.is-xlarge-down#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("small") {
+    &.is-xsmall-up#{$suffix},
+    &.is-small-down#{$suffix},
+    &.is-small#{$suffix},
+    &.is-small-up#{$suffix},
+    &.is-medium-down#{$suffix},
+    &.is-large-down#{$suffix},
+    &.is-xlarge-down#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("medium") {
+    &.is-xsmall-up#{$suffix},
+    &.is-small-up#{$suffix},
+    &.is-medium-down#{$suffix},
+    &.is-medium#{$suffix},
+    &.is-medium-up#{$suffix},
+    &.is-large-down#{$suffix},
+    &.is-xlarge-down#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("large") {
+    &.is-xsmall-up#{$suffix},
+    &.is-small-up#{$suffix},
+    &.is-medium-up#{$suffix},
+    &.is-large-down#{$suffix},
+    &.is-large#{$suffix},
+    &.is-large-up#{$suffix},
+    &.is-xlarge-down#{$suffix} {
+      @content;
+    }
+  }
+  @include screen("xlarge") {
+    &.is-xsmall-up#{$suffix},
+    &.is-small-up#{$suffix},
+    &.is-medium-up#{$suffix},
+    &.is-large-up#{$suffix},
+    &.is-xlarge-down#{$suffix},
+    &.is-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-tablet-or-less {
+    @include screen("medium") {
+      display: none !important;
+    }
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-tablet {
+    @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-tablet-or-more {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+  }
+  &.is-desktop-or-less {
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-desktop {
+    @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-desktop-or-more {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+  }
+  &.is-widescreen-or-less {
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-widescreen {
+    @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-widescreen-or-more {
+    @include screen("xsmall") {
+      display: none !important;
+    }
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("medium") {
+      display: none !important;
+    }
+  }
+  &.is-fullhd {
+    @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-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  max-width: 100%;
+  position: relative;
+}

package/src/utilities/border.scss

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

package/src/utilities/color.scss

@@ -0,0 +1,217 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+@mixin colorUtilities($colorScheme: "") {
+  $derived: "";
+  @if $colorScheme != "" {
+    $derived: "-#{$colorScheme}";
+  }
+
+  @each $color in variables.$colors {
+    $colorName: map.get($color, "name");
+    $numStr: "00" !default;
+    @for $p from 1 through 19 {
+      $numStr: ($p * 5) + "";
+      @if (string.length($numStr) == 1) {
+        $numStr: "0" + $numStr;
+      }
+      //#region forecolor
+      .is-forecolor#{$derived}-#{$colorName}-#{$numStr},
+      .forecolor#{$derived}-#{$colorName}-#{$numStr} {
+        color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+      }
+      .is-forecolor#{$derived}-hover-#{$colorName}-#{$numStr},
+      .forecolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-forecolor#{$derived}-#{$colorName}-focus-#{$numStr},
+      .forecolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-forecolor#{$derived}-#{$colorName}-active-#{$numStr},
+      .forecolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-forecolor#{$derived}-#{$colorName}-disabled-#{$numStr},
+      .forecolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      //#endregion forecolor
+
+      //#region backcolor
+      .is-backcolor#{$derived}-#{$colorName}-#{$numStr},
+      .backcolor#{$derived}-#{$colorName}-#{$numStr} {
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+      }
+      .is-backcolor#{$derived}-hover-#{$colorName}-#{$numStr},
+      .backcolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-backcolor#{$derived}-#{$colorName}-focus-#{$numStr},
+      .backcolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-backcolor#{$derived}-#{$colorName}-active-#{$numStr},
+      .backcolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-backcolor#{$derived}-#{$colorName}-disabled-#{$numStr},
+      .backcolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      //#endregion backcolor
+
+      //#region bordercolor
+      .is-bordercolor#{$derived}-#{$colorName}-#{$numStr},
+      .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
+        border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+      }
+      .is-bordercolor#{$derived}-#{$colorName}-#{$numStr},
+      .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
+        border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+      }
+      .is-bordercolor#{$derived}-hover-#{$colorName}-#{$numStr},
+      .bordercolor#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-bordercolor#{$derived}-#{$colorName}-focus-#{$numStr},
+      .bordercolor#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-bordercolor#{$derived}-#{$colorName}-active-#{$numStr},
+      .bordercolor#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+      .is-bordercolor#{$derived}-#{$colorName}-disabled-#{$numStr},
+      .bordercolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        }
+      }
+
+      @each $borderSide in variables.$borderSides {
+        .is-bordercolor#{$derived}-#{$borderSide}-#{$colorName}-#{$numStr},
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-#{$numStr} {
+          border-#{$borderSide}-color: var(
+            --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+          ) !important;
+        }
+        .is-bordercolor#{$derived}-#{$borderSide}-hover-#{$colorName}-#{$numStr},
+        .bordercolor#{$derived}-#{$borderSide}-hover-#{$colorName}-#{$numStr} {
+          &:hover {
+            border-#{$borderSide}-color: var(
+              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+            ) !important;
+          }
+        }
+        .is-bordercolor#{$derived}-#{$borderSide}-#{$colorName}-focus-#{$numStr},
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-focus-#{$numStr} {
+          &:focus {
+            border-#{$borderSide}-color: var(
+              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+            ) !important;
+          }
+        }
+        .is-bordercolor#{$derived}-#{$borderSide}-#{$colorName}-active-#{$numStr},
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-active-#{$numStr} {
+          &:active {
+            border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          }
+        }
+        .is-bordercolor#{$derived}-#{$borderSide}-#{$colorName}-disabled-#{$numStr},
+        .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-disabled-#{$numStr} {
+          &[disabled],
+          fieldset[disabled] {
+            border-#{$borderSide}-color: var(
+              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
+            ) !important;
+          }
+        }
+      }
+      //#endregion bordercolor
+
+      //#region highlighter
+      .is-highlighter#{$derived}-#{$colorName}-#{$numStr},
+      .highlighter#{$derived}-#{$colorName}-#{$numStr} {
+        background: linear-gradient(
+          transparent 66.66%,
+          var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+        ) !important;
+      }
+      .is-highlighter#{$derived}-hover-#{$colorName}-#{$numStr},
+      .highlighter#{$derived}-hover-#{$colorName}-#{$numStr} {
+        &:hover {
+          background: linear-gradient(
+            transparent 66.66%,
+            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+          ) !important;
+        }
+      }
+      .is-highlighter#{$derived}-#{$colorName}-focus-#{$numStr},
+      .highlighter#{$derived}-#{$colorName}-focus-#{$numStr} {
+        &:focus {
+          background: linear-gradient(
+            transparent 66.66%,
+            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+          ) !important;
+        }
+      }
+      .is-highlighter#{$derived}-#{$colorName}-active-#{$numStr},
+      .highlighter#{$derived}-#{$colorName}-active-#{$numStr} {
+        &:active {
+          background: linear-gradient(
+            transparent 66.66%,
+            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+          ) !important;
+        }
+      }
+      .is-highlighter#{$derived}-#{$colorName}-disabled-#{$numStr},
+      .highlighter#{$derived}-#{$colorName}-disabled-#{$numStr} {
+        &[disabled],
+        fieldset[disabled] {
+          background: linear-gradient(
+            transparent 66.66%,
+            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+          ) !important;
+        }
+      }
+      //#endregion highlighter
+
+    }
+  }
+}
+
+@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;
+
+.has-box-shadow {
+  box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-default-shadow);
+}
+
+.has-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,44 @@
+.is-display-block,
+.display-block {
+  display: block !important;
+}
+
+.is-display-inline,
+.display-inline {
+  display: inline !important;
+}
+
+.is-position-absolute,
+.position-absolute {
+  position: absolute !important;
+}
+
+.is-position-fixed,
+.position-fixed {
+  position: fixed !important;
+}
+
+.is-position-relative,
+.position-relative {
+  position: relative !important;
+}
+
+.is-position-sticky,
+.position-sticky {
+  position: sticky !important;
+}
+
+@for $p from 1 through 100 {
+  .top-#{$p} {
+    top: $p * 1% !important;
+  }
+  .right-#{$p} {
+    right: $p * 1% !important;
+  }
+  .bottom-#{$p} {
+    bottom: $p * 1% !important;
+  }
+  .left-#{$p} {
+    left: $p * 1% !important;
+  }
+}

package/src/utilities/sizing.scss

@@ -0,0 +1,109 @@
+@use "sass:string";
+@use "../functions/index.scss" as functions;
+
+@for $p from 0 through 100 {
+  $escaped: functions.strReplace(#{($p * 0.1)}, ".", "\\.");
+
+  .is-width-#{$escaped}rem,
+  .width-#{$escaped}rem {
+    width: $p * 0.1rem;
+  }
+  .is-height-#{$escaped}rem,
+  .height-#{$escaped}rem {
+    height: $p * 0.1rem;
+  }
+}
+
+.is-width-100-percentage {
+  width: 100%;
+}
+
+.is-height-100-percentage {
+  height: 100%;
+}
+
+.is-width-auto {
+  width: auto;
+}
+
+.is-height-auto {
+  height: auto;
+}
+
+.is-aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-paper-landscape {
+  aspect-ratio: 1.414 / 1;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-paper-portrait {
+  aspect-ratio: 1 / 1.414;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-2-3 {
+  aspect-ratio: 2 / 3;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-3-2 {
+  aspect-ratio: 3 / 2;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-3-4 {
+  aspect-ratio: 3 / 4;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-4-3 {
+  aspect-ratio: 4 / 3;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-4-5 {
+  aspect-ratio: 4 / 5;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-5-4 {
+  aspect-ratio: 5 / 4;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-5-8 {
+  aspect-ratio: 5 / 8;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-8-5 {
+  aspect-ratio: 8 / 5;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-9-16 {
+  aspect-ratio: 9 / 16;
+  width: 100%;
+  height: auto;
+}
+
+.is-aspect-ratio-16-9 {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}