minolith 0.0.5 → 0.0.7

package/src/components/progress.scss

@@ -7,7 +7,8 @@
     border-radius: var(--#{variables.$prefix}border-radius-pill);
     border-style: solid;
     border-width: var(--#{variables.$prefix}border-width-medium);
-    color: var(--#{variables.$prefix}color-default-border);
+    background-color: var(--#{variables.$prefix}color-default-progress-back);
+    color: var(--#{variables.$prefix}color-default-progress-fore);
     height: 1rem;
     position: relative;
     &::before {
@@ -31,8 +32,8 @@
     @each $color in variables.$colors {
     $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
-        color: var(--#{variables.$prefix}color-#{$colorName}-border);
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-progress-back);
+        color: var(--#{variables.$prefix}color-#{$colorName}-progress-fore);
       }
     }
   }

package/src/css-variables/color.scss

@@ -16,22 +16,29 @@
   @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;
+      $lightness: variables.$color-lightness-50;
+      $chroma: variables.$color-chroma-colorful;
+
       @if ($i < 10) {
         $lightness-offset: (10 - $i) * variables.$color-lightness-offset-darker;
-        $lightness: variables.$color-lightness-50 - $lightness-offset;
+        $lightness: variables.$color-lightness-50 + $lightness-offset;
+        $chroma-offset: (10 - $i) * variables.$color-chroma-colorful-offset-darker;
+        $chroma: $chroma + $chroma-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;
+        $chroma-offset: ($i - 10) * variables.$color-chroma-colorful-offset-lighter;
+        $chroma: $chroma + $chroma-offset;
+      }
+
+      @if ($name == "default" or $name == "gray") {
+        $chroma: variables.$color-chroma-gray;
       }
 
       $oklch: #{$lightness} #{$chroma} #{$hue};
@@ -122,6 +129,13 @@
     }
     //#endregion accordion
 
+    //#region badge
+    $badge: map.get($colorShade, "badge");
+    @if ($badge != null) {
+      @include setColor($badge, "default", $name, "badge");
+    }
+    //#endregion badge
+
     //#region button
     $button: map.get($colorShade, "button");
     @if ($button != null) {
@@ -151,6 +165,34 @@
     }
     //#endregion card
 
+    //#region header
+    $header: map.get($colorShade, "header");
+    @if ($header != null) {
+      @include setColor($header, "default", $name, "header");
+    }
+    //#endregion header
+
+    //#region label
+    $label: map.get($colorShade, "label");
+    @if ($label != null) {
+      @include setColor($label, "default", $name, "label");
+    }
+    //#endregion label
+
+    //#region link
+    $link: map.get($colorShade, "link");
+    @if ($link != null) {
+      @include setColor($link, "default", $name, "link");
+    }
+    //#endregion link
+
+    //#region loader
+    $loader: map.get($colorShade, "loader");
+    @if ($loader != null) {
+      @include setColor($loader, "default", $name, "loader");
+    }
+    //#endregion loader
+
     //#region message
     $message: map.get($colorShade, "message");
     @if ($message != null) {
@@ -168,6 +210,13 @@
     }
     //#endregion message
 
+    //#region progress
+    $progress: map.get($colorShade, "progress");
+    @if ($progress != null) {
+      @include setColor($progress, "default", $name, "progress");
+    }
+    //#endregion progress
+
     @each $color in variables.$colors {
       $colorName: map.get($color, "name");
 
@@ -190,6 +239,13 @@
       }
       //#endregion accordion
 
+      //#region badge
+      $badge: map.get($colorShade, "badge");
+      @if ($badge != null) {
+        @include setColor($badge, $colorName, $name, "badge");
+      }
+      //#endregion badge
+
       //#region button
       $button: map.get($colorShade, "button");
       @if ($button != null) {
@@ -219,6 +275,34 @@
       }
       //#endregion card
 
+      //#region header
+      $header: map.get($colorShade, "header");
+      @if ($header != null) {
+        @include setColor($header, $colorName, $name, "header");
+      }
+      //#endregion header
+
+      //#region label
+      $label: map.get($colorShade, "label");
+      @if ($label != null) {
+        @include setColor($label, $colorName, $name, "label");
+      }
+      //#endregion label
+
+      //#region link
+      $link: map.get($colorShade, "link");
+      @if ($link != null) {
+        @include setColor($link, $colorName, $name, "link");
+      }
+      //#endregion link
+
+      //#region loader
+      $loader: map.get($colorShade, "loader");
+      @if ($loader != null) {
+        @include setColor($link, $colorName, $name, "loader");
+      }
+      //#endregion loader
+
       //#region message
       $message: map.get($colorShade, "message");
       @if ($message != null) {
@@ -235,6 +319,14 @@
         }
       }
       //#endregion message
+
+      //#region progress
+      $progress: map.get($colorShade, "progress");
+      @if ($progress != null) {
+        @include setColor($link, $colorName, $name, "progress");
+      }
+      //#endregion progress
+
     }
   }
 }

package/src/functions/string.scss

@@ -1,5 +1,17 @@
 @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);
 

package/src/icons/check.scss

@@ -3,10 +3,10 @@
 
 .check {
   background-color: transparent;
-  border-color: var(--color-default-fore);
+  border-color: var(--#{variables.$prefix}color-default-fore);
   border-radius: 25%;
   border-style: solid;
-  border-width: 0 var(--border-width-medium) var(--border-width-medium) 0;
+  border-width: 0 var(--#{variables.$prefix}border-width-medium) var(--#{variables.$prefix}border-width-medium) 0;
   content: "";
   display: inline-block;
   height: 1rem;
@@ -15,7 +15,7 @@
   @each $color in variables.$colors {
     $colorName: map.get($color, "name");
     &.is-#{$colorName} {
-      border-color: var(--color-#{$colorName}-fore);
+      border-color: var(--#{variables.$prefix}color-#{$colorName}-fore);
     }
   }
 }

package/src/icons/chevron.scss

@@ -15,11 +15,11 @@ $line-height: 0.2rem;
     100% 0,
     50% calc(100% - #{$line-height})
   );
-  background: var(--color-default-fore);
+  background: var(--#{variables.$prefix}color-default-fore);
   @each $color in variables.$colors {
     $colorName: map.get($color, "name");
     &.is-#{$colorName} {
-      background: var(--color-#{$colorName}-fore);
+      background: var(--#{variables.$prefix}color-#{$colorName}-fore);
     }
   }
   @content;

package/src/layouts/index.scss

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

package/src/mixins/responsive.scss

@@ -104,7 +104,7 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-tablet-or-less {
+  &.is-small-or-less {
     @include screen("medium") {
       display: none !important;
     }
@@ -115,7 +115,7 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-tablet {
+  &.is-small {
     @include screen("xsmall") {
       display: none !important;
     }
@@ -129,12 +129,12 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-tablet-or-more {
+  &.is-small-or-more {
     @include screen("xsmall") {
       display: none !important;
     }
   }
-  &.is-desktop-or-less {
+  &.is-medium-or-less {
     @include screen("large") {
       display: none !important;
     }
@@ -142,7 +142,7 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-desktop {
+  &.is-medium {
     @include screen("xsmall") {
       display: none !important;
     }
@@ -156,7 +156,37 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-desktop-or-more {
+  &.is-medium-or-more {
+    @include screen("small") {
+      display: none !important;
+    }
+    @include screen("xsmall") {
+      display: none !important;
+    }
+  }
+  &.is-large-or-less {
+    @include screen("large") {
+      display: none !important;
+    }
+    @include screen("xlarge") {
+      display: none !important;
+    }
+  }
+  &.is-large {
+    @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-large-or-more {
     @include screen("xsmall") {
       display: none !important;
     }
@@ -164,12 +194,12 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-widescreen-or-less {
+  &.is-large-or-less {
     @include screen("xlarge") {
       display: none !important;
     }
   }
-  &.is-widescreen {
+  &.is-large {
     @include screen("xsmall") {
       display: none !important;
     }
@@ -183,7 +213,7 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-widescreen-or-more {
+  &.is-large-or-more {
     @include screen("xsmall") {
       display: none !important;
     }
@@ -194,7 +224,7 @@ $offset: 0.02px;
       display: none !important;
     }
   }
-  &.is-fullhd {
+  &.is-xlarge {
     @include screen("xsmall") {
       display: none !important;
     }

package/src/utilities/sizing.scss

@@ -6,28 +6,62 @@
 
   .is-width-#{$escaped}rem,
   .width-#{$escaped}rem {
-    width: $p * 0.1rem;
+    width: $p * 0.1rem !important;
   }
   .is-height-#{$escaped}rem,
   .height-#{$escaped}rem {
-    height: $p * 0.1rem;
+    height: $p * 0.1rem !important;
   }
 }
 
-.is-width-100-percentage {
-  width: 100%;
+.is-width-100-percentage,
+.width-100-percentage {
+  width: 100% !important;
 }
 
-.is-height-100-percentage {
-  height: 100%;
+.is-width-75-percentage,
+.width-75-percentage {
+  width: 75% !important;
 }
 
-.is-width-auto {
-  width: auto;
+.is-width-50-percentage,
+.width-50-percentage {
+  width: 50% !important;
 }
 
-.is-height-auto {
-  height: auto;
+.is-width-25-percentage,
+.width-25-percentage {
+  width: 25% !important;
+}
+
+.is-width-auto,
+.width-auto {
+  width: auto !important;
+}
+
+.is-height-100-percentage,
+.height-100-percentage {
+  height: 100% !important;
+}
+
+.is-height-75-percentage,
+.height-75-percentage {
+  height: 75% !important;
+}
+
+.is-height-50-percentage,
+.height-50-percentage {
+  height: 50% !important;
+}
+
+.is-height-25-percentage,
+.height-25-percentage {
+  height: 25% !important;
+}
+
+.is-height-auto,
+.height-auto {
+  height: auto !important;
 }
 
 .is-aspect-ratio-square {

package/src/utilities/typography.scss

@@ -48,6 +48,10 @@
   font-family: var(--#{variables.$prefix}font-family-monospace);
 }
 
+.is-font-size-xsmall {
+  font-size: var(--#{variables.$prefix}font-size-xsmall) !important;
+}
+
 .is-font-size-small {
   font-size: var(--#{variables.$prefix}font-size-small) !important;
 }

package/src/variables/border.scss

@@ -5,9 +5,10 @@ $border-width-medium: 0.125rem !default;
 $border-width-thick: 0.25rem !default;
 $border-width-xthick: 0.5rem !default;
 
-$border-radius-small: 0.2rem !default;
-$border-radius-medium: 0.25rem !default;
-$border-radius-large: 0.5rem !default;
+$border-radius-small: 0.25rem !default;
+$border-radius-medium: 0.5rem !default;
+$border-radius-large: 0.75rem !default;
+$border-radius-xlarge: 1rem !default;
 $border-radius-circle: 50% !default;
 $border-radius-pill: 50rem !default;
 
@@ -45,6 +46,10 @@ $borderRadiuses: (
     "name": "large",
     "value": $border-radius-large,
   ),
+  (
+    "name": "xlarge",
+    "value": $border-radius-xlarge,
+  ),
   (
     "name": "circle",
     "value": $border-radius-circle,