minolith 0.0.0

package/src/css-variables/color.scss

@@ -0,0 +1,262 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+
+:root {
+  $white-oklch: #{variables.$color-lightness-white} #{variables.$color-chroma-gray} #{variables.$color-hue-gray};
+  --#{variables.$prefix}color-white-oklch: #{$white-oklch};
+  --#{variables.$prefix}color-white: oklch(#{$white-oklch});
+
+  $black-oklch: #{variables.$color-lightness-black} #{variables.$color-chroma-gray} #{variables.$color-hue-gray};
+  --#{variables.$prefix}color-black-oklch: #{$black-oklch};
+  --#{variables.$prefix}color-black: oklch(#{$black-oklch});
+
+  @each $color in variables.$colors {
+    $name: map.get($color, "name");
+    $hue: map.get($color, "hue");
+    $chroma: map.get($color, "chroma");
+    $p: "0" !default;
+    @for $i from 1 through 19  {
+      $p: "" + ($i * 5);
+      @if (string.length($p) == 1) {
+        $p: "0" + $p;
+      }
+      $lightness: variables.$color-lightness-50 !default;
+      @if ($i < 10) {
+        $lightness-offset: (10 - $i) * variables.$color-lightness-offset-darker;
+        $lightness: variables.$color-lightness-50 - $lightness-offset;
+      } @else if ($i > 10) {
+        $lightness-offset: ($i - 10) * variables.$color-lightness-offset-lighter;
+        $lightness: variables.$color-lightness-50 + $lightness-offset;
+      } @else if ($i == 10) {
+        $lightness: variables.$color-lightness-50;
+      }
+
+      $oklch: #{$lightness} #{$chroma} #{$hue};
+
+      --#{variables.$prefix}color-#{$name}-#{$p}-oklch: #{$oklch};
+      --#{variables.$prefix}color-#{$name}-#{$p}: oklch(#{$oklch});
+    }
+  }
+
+  color-scheme: light;
+}
+
+@mixin setColor($colorShade, $colorName, $pseudoName, $componentName: "") {
+  $srcColorName: $colorName !default;
+  $destColorName: $colorName !default;
+  @if ($colorName == "default") {
+    $srcColorName: "gray";
+  }
+
+  $pseudo: "" !default;
+  @if ($pseudoName != "plain") {
+    $pseudo: "-#{$pseudoName}"
+  }
+
+  $component: "" !default;
+  @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 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 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 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
+
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+
+      @include setColor($colorShade, $colorName, $name);
+
+      //#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 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 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
+    }
+  }
+}
+
+@mixin setColorLight() {
+  @include setColorShades(variables.$colorShadesLight);
+  color-scheme: light;
+}
+
+@mixin setColorDark() {
+  @include setColorShades(variables.$colorShadesDark);
+  color-scheme: dark;
+}
+
+:root {
+  @include setColorLight();
+}
+
+@include mixins.setCssVariableColorScheme("light") {
+  @include setColorLight();
+}
+
+@include mixins.setCssVariableColorScheme("dark") {
+  @include setColorDark();
+}

package/src/css-variables/index.scss

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

package/src/css-variables/miscellaneous.scss

@@ -0,0 +1,10 @@
+@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};
+
+  --#{variables.$prefix}z-index-header-is-sticky:  #{variables.$z-index-header-is-sticky};
+}

package/src/css-variables/typography.scss

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

package/src/functions/index.scss

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

package/src/functions/string.scss

@@ -0,0 +1,17 @@
+@function strReplace($str, $substr, $newsubstr, $all: false) {
+  $pos: str-index($str, $substr);
+
+  @while $pos != null {
+    $strlen: str-length($substr);
+    $start: str-slice($str, 0, $pos - 1);
+    $end: str-slice($str, $pos + $strlen);
+    $str: $start + $newsubstr + $end;
+
+    @if $all == true {
+      $pos: str-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(--color-default-fore);
+  border-radius: 25%;
+  border-style: solid;
+  border-width: 0 var(--border-width-medium) var(--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(--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(--color-default-fore);
+  @each $color in variables.$colors {
+    $colorName: map.get($color, "name");
+    &.is-#{$colorName} {
+      background: var(--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/container.scss

@@ -0,0 +1,19 @@
+
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+.container {
+  margin: 0 auto;
+  padding: 0 1rem;
+  position: relative;
+  width: auto;
+  @include mixins.screen("medium") {
+    max-width: variables.$breakpoint-medium;
+  }
+  @include mixins.screen("large") {
+    max-width: variables.$breakpoint-large;
+  }
+  @include mixins.screen("xlarge") {
+    max-width: variables.$breakpoint-xlarge;
+  }
+}

package/src/layouts/index.scss

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

package/src/minolith.scss

@@ -0,0 +1,10 @@
+/*! minolith | MIT License | github.com/minominolyly/minolith */
+
+@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";
+@forward "./utilities/index.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/index.scss

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