minolith 0.0.26 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minolith",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "design system by minominolyly",
   "main": "src/minolith.scss",
   "scripts": {

package/src/base/tabula.scss

@@ -5,4 +5,5 @@
   background-color: var(--#{variables.$prefix}color-default-back);
   font-family: var(--#{variables.$prefix}font-family-main);
   z-index: var(--#{variables.$prefix}z-index-tabula);
+  text-size-adjust: 100%;
 }

package/src/components/accordion.scss

@@ -30,6 +30,7 @@
     display: block;
     padding: 1rem;
     position: relative;
+    touch-action: manipulation;
     list-style: none;
     &::marker,
     &::-webkit-details-marker {

package/src/components/blockquote.scss

@@ -13,6 +13,7 @@
   @include mixins.element();
   position: relative;
   color: var(--#{variables.$prefix}color-default-blockquote-fore);
+  background-color: var(--#{variables.$prefix}color-default-blockquote-back);
   border-left-color: var(--#{variables.$prefix}color-default-blockquote-border);
   border-left-style: solid;
   border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
@@ -31,7 +32,7 @@
       top: 0;
       overflow-y: hidden;
       height: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
-      width: var(--#{variables.$prefix}blockquote-icon-font-size);
+      width: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
       left: 0.5rem;
       quotes: initial;
       content: open-quote;
@@ -49,7 +50,7 @@
       bottom: 0;
       overflow-y: hidden;
       height: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
-      width: var(--#{variables.$prefix}blockquote-icon-font-size);
+      width: calc(var(--#{variables.$prefix}blockquote-icon-font-size) / 2);
       right: 0.5rem;
       quotes: initial;
       content: close-quote;
@@ -64,6 +65,7 @@
     @each $color in variables.$colors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-back);
         border-left-color: var(
           --#{variables.$prefix}color-#{$colorName}-blockquote-border
         );

package/src/utilities/color.scss

@@ -3,6 +3,73 @@
 @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 != "" {
@@ -19,118 +86,110 @@
       }
       //#region forecolor
       .forecolor#{$derived}-#{$colorName}-#{$numStr} {
-        color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        @include forecolor($colorName, $numStr);
       }
       .forecolor#{$derived}-hover-#{$colorName}-#{$numStr} {
         &:hover {
-          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include forecolor($colorName, $numStr);
         }
       }
       .forecolor#{$derived}-#{$colorName}-focus-#{$numStr} {
         &:focus {
-          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include forecolor($colorName, $numStr);
         }
       }
       .forecolor#{$derived}-#{$colorName}-active-#{$numStr} {
         &:active {
-          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include forecolor($colorName, $numStr);
         }
       }
       .forecolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
         &[disabled],
         fieldset[disabled] {
-          color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include forecolor($colorName, $numStr);
         }
       }
       //#endregion forecolor
 
       //#region backcolor
       .backcolor#{$derived}-#{$colorName}-#{$numStr} {
-        background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        @include backcolor($colorName, $numStr);
       }
       .backcolor#{$derived}-hover-#{$colorName}-#{$numStr} {
         &:hover {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include backcolor($colorName, $numStr);
         }
       }
       .backcolor#{$derived}-#{$colorName}-focus-#{$numStr} {
         &:focus {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include backcolor($colorName, $numStr);
         }
       }
       .backcolor#{$derived}-#{$colorName}-active-#{$numStr} {
         &:active {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include backcolor($colorName, $numStr);
         }
       }
       .backcolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
         &[disabled],
         fieldset[disabled] {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include backcolor($colorName, $numStr);
         }
       }
       //#endregion backcolor
 
       //#region bordercolor
       .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
-        border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        @include bordercolor($colorName, $numStr);
       }
       .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
-        border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+        @include bordercolor($colorName, $numStr);
       }
       .bordercolor#{$derived}-hover-#{$colorName}-#{$numStr} {
         &:hover {
-          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include bordercolor($colorName, $numStr);
         }
       }
       .bordercolor#{$derived}-#{$colorName}-focus-#{$numStr} {
         &:focus {
-          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include bordercolor($colorName, $numStr);
         }
       }
       .bordercolor#{$derived}-#{$colorName}-active-#{$numStr} {
         &:active {
-          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include bordercolor($colorName, $numStr);
         }
       }
       .bordercolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
         &[disabled],
         fieldset[disabled] {
-          border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+          @include bordercolor($colorName, $numStr);
         }
       }
 
       @each $borderSide in variables.$borderSides {
         .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-#{$numStr} {
-          border-#{$borderSide}-color: var(
-            --#{variables.$prefix}color-#{$colorName}-#{$numStr}
-          ) !important;
+          @include bordercolor($colorName, $numStr, $borderSide);
         }
         .bordercolor#{$derived}-#{$borderSide}-hover-#{$colorName}-#{$numStr} {
           &:hover {
-            border-#{$borderSide}-color: var(
-              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
-            ) !important;
+            @include bordercolor($colorName, $numStr, $borderSide);
           }
         }
         .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-focus-#{$numStr} {
           &:focus {
-            border-#{$borderSide}-color: var(
-              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
-            ) !important;
+            @include bordercolor($colorName, $numStr, $borderSide);
           }
         }
         .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-active-#{$numStr} {
           &:active {
-            border-color: var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) !important;
+            @include bordercolor($colorName, $numStr, $borderSide);
           }
         }
         .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-disabled-#{$numStr} {
           &[disabled],
           fieldset[disabled] {
-            border-#{$borderSide}-color: var(
-              --#{variables.$prefix}color-#{$colorName}-#{$numStr}
-            ) !important;
+            @include bordercolor($colorName, $numStr, $borderSide);
           }
         }
       }
@@ -138,48 +197,125 @@
 
       //#region highlighter
       .highlighter#{$derived}-#{$colorName}-#{$numStr} {
-        background: linear-gradient(
-          transparent 66.66%,
-          var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-        ) !important;
+        @include highlighter($colorName, $numStr);
       }
       .highlighter#{$derived}-hover-#{$colorName}-#{$numStr} {
         &:hover {
-          background: linear-gradient(
-            transparent 66.66%,
-            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-          ) !important;
+          @include highlighter($colorName, $numStr);
         }
       }
       .highlighter#{$derived}-#{$colorName}-focus-#{$numStr} {
         &:focus {
-          background: linear-gradient(
-            transparent 66.66%,
-            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-          ) !important;
+          @include highlighter($colorName, $numStr);
         }
       }
       .highlighter#{$derived}-#{$colorName}-active-#{$numStr} {
         &:active {
-          background: linear-gradient(
-            transparent 66.66%,
-            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-          ) !important;
+          @include highlighter($colorName, $numStr);
         }
       }
       .highlighter#{$derived}-#{$colorName}-disabled-#{$numStr} {
         &[disabled],
         fieldset[disabled] {
-          background: linear-gradient(
-            transparent 66.66%,
-            var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-          ) !important;
+          @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();

package/src/utilities/sizing.scss

@@ -40,80 +40,73 @@
   height: auto !important;
 }
 
-.aspect-ratio-square {
-  aspect-ratio: 1 / 1;
+@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;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-paper-portrait {
+  @include aspect-ratio-base();
   aspect-ratio: 1 / 1.414;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-2-3 {
+  @include aspect-ratio-base();
   aspect-ratio: 2 / 3;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-3-2 {
+  @include aspect-ratio-base();
   aspect-ratio: 3 / 2;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-3-4 {
+  @include aspect-ratio-base();
   aspect-ratio: 3 / 4;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-4-3 {
+  @include aspect-ratio-base();
   aspect-ratio: 4 / 3;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-4-5 {
+  @include aspect-ratio-base();
   aspect-ratio: 4 / 5;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-5-4 {
+  @include aspect-ratio-base();
   aspect-ratio: 5 / 4;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-5-8 {
+  @include aspect-ratio-base();
   aspect-ratio: 5 / 8;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-8-5 {
+  @include aspect-ratio-base();
   aspect-ratio: 8 / 5;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-9-16 {
+  @include aspect-ratio-base();
   aspect-ratio: 9 / 16;
-  width: 100%;
-  height: auto;
 }
 
 .aspect-ratio-16-9 {
+  @include aspect-ratio-base();
   aspect-ratio: 16 / 9;
-  width: 100%;
-  height: auto;
 }

package/src/variables/color.scss

@@ -79,8 +79,9 @@ $color-light-lightness-badge-border: 70 !default;
 //#endregion color-light-lightness-badge
 
 //#region color-light-lightness-blockquote
-$color-light-lightness-blockquote-fore: 70 !default;
-$color-light-lightness-blockquote-border: 70 !default;
+$color-light-lightness-blockquote-fore: 50 !default;
+$color-light-lightness-blockquote-back: 90 !default;
+$color-light-lightness-blockquote-border: 50 !default;
 //#endregion color-light-lightness-blockquote
 
 //#region color-light-lightness-card
@@ -191,6 +192,7 @@ $color-dark-lightness-badge-border: 30 !default;
 
 //#region color-light-lightness-blockquote
 $color-dark-lightness-blockquote-fore: 70 !default;
+$color-dark-lightness-blockquote-back: 20 !default;
 $color-dark-lightness-blockquote-border: 70 !default;
 //#endregion color-light-lightness-blockquote
 
@@ -352,6 +354,7 @@ $colorShadesLight: (
       ),
       blockquote: (
         fore: functions.zeroPadding($color-light-lightness-blockquote-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-blockquote-back, 2),
         border: functions.zeroPadding($color-light-lightness-blockquote-border, 2),
       ),
       button: (
@@ -843,6 +846,7 @@ $colorShadesDark: (
       ),
       blockquote: (
         fore: functions.zeroPadding($color-dark-lightness-blockquote-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-blockquote-back, 2),
         border: functions.zeroPadding($color-dark-lightness-blockquote-border, 2),
       ),
       button: (

package/src/components/tree-view.scss

@@ -1,24 +0,0 @@
-.tree-view {
-  color: var(--#{variables.$prefix}color-default-tree-view-fore);
-  background-color: var(--#{variables.$prefix}color-default-tree-view-back);
-  border-color: var(--#{variables.$prefix}color-default-tree-view-border);
-  border-collapse: collapse;
-  display: block;
-  >.tree-view-node {
-    cursor: pointer;
-    display: block;
-    &::marker,
-    &::-webkit-details-marker {
-      display: none;
-    }
-    &::after {
-      @include icons.chevron() {
-        transform: rotate(90deg);
-        content: "";
-        left: 1rem;
-        position: absolute;
-        top: calc(50% - 0.25rem);
-      }
-    }
-  }
-}