minolith 1.3.5 → 1.4.0

package/package.json

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

package/src/base/accessibility.scss

@@ -0,0 +1,68 @@
+@use "../variables/index.scss" as variables;
+
+:where(:root) {
+  @if variables.$enable-smooth-scroll {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    background-attachment: scroll !important;
+    transition-delay: 0s !important;
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+
+// [id],
+// :focus {
+//   scroll-margin-block-start: var(--#{variables.$prefix}header-min-height);
+// }
+
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
+  touch-action: manipulation;
+}
+
+:where(
+  :any-link,
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  label[for],
+  select,
+  summary,
+  [role="tab"],
+  [role="button"]
+) {
+  cursor: pointer;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    background-attachment: scroll !important;
+    transition-delay: 0s !important;
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/base/index.scss

@@ -1,3 +1,5 @@
 @forward "./normalize.scss";
+@forward "./root.scss";
+@forward "./accessibility.scss";
 @forward "./tabula.scss";
 @forward "./element.scss";

package/src/base/normalize.scss

@@ -1,14 +1,5 @@
 @use "../variables/index.scss" as variables;
 
-:where(:root) {
-  scrollbar-gutter: stable;
-  @if variables.$enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*

package/src/base/root.scss

@@ -0,0 +1,25 @@
+@use "../variables/index.scss" as variables;
+
+// @supports not selector(::-webkit-scrollbar) {
+//   :where(:root) {
+//     scrollbar-color: var(--#{variables.$prefix}color-default-scrollbar-thumb)
+//       var(--#{variables.$prefix}color-default-scrollbar-track);
+//   }
+// }
+:where(:root) {
+  scrollbar-gutter: stable;
+
+  // ::-webkit-scrollbar {
+  //   background-color: transparent;
+  // }
+
+  // ::-webkit-scrollbar-thumb {
+  //   background-color: var(--#{variables.$prefix}color-default-scrollbar-thumb);
+  //   background-clip: content-box;
+  //   border-radius: 0.75rem;
+  // }
+
+  // ::-webkit-scrollbar-track {
+  //   background-color: var(--#{variables.$prefix}color-default-scrollbar-track);
+  // }
+}

package/src/base/tabula.scss

@@ -7,6 +7,12 @@
   --#{variables.$prefix}tabula-color-back: var(
     --#{variables.$prefix}color-default-back
   );
+  --#{variables.$prefix}tabula-color-scrollbar-thumb: var(
+    --#{variables.$prefix}color-default-scrollbar-thumb
+  );
+  --#{variables.$prefix}tabula-color-scrollbar-track: var(
+    --#{variables.$prefix}color-default-scrollbar-track
+  );
   --#{variables.$prefix}tabula-color-selection-fore: var(
     --#{variables.$prefix}color-default-selection-fore
   );
@@ -23,6 +29,8 @@
   letter-spacing: 0.025rem;
   text-autospace: normal;
   text-spacing-trim: trim-start;
+  // scrollbar-color: var(--#{variables.$prefix}tabula-color-scrollbar-thumb)
+  //   var(--#{variables.$prefix}tabula-color-scrollbar-track);
 
   &::selection {
     color: var(--#{variables.$prefix}tabula-color-selection-fore);

package/src/components/blockquote.scss

@@ -64,6 +64,7 @@
       max-width: 100%;
       color: var(--#{variables.$prefix}blockquote-color-fore);
       font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
+      line-height: 1;
     }
   }
   &.has-quote,
@@ -82,6 +83,7 @@
       max-width: 100%;
       color: var(--#{variables.$prefix}blockquote-color-fore);
       font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
+      line-height: 1;
     }
   }
 

package/src/components/card.scss

@@ -67,6 +67,7 @@
   @include mixins.element();
   display: block;
   background-color: var(--#{variables.$prefix}card-color-back);
+  // backdrop-filter: blur(1rem);
   border-radius: calc(
     var(--#{variables.$prefix}card-border-radius) +
       var(--#{variables.$prefix}card-border-width)

package/src/components/header.scss

@@ -21,6 +21,7 @@
   width: 100%;
   box-shadow: 0 0 0.5rem var(--#{variables.$prefix}header-color-shadow);
   backdrop-filter: var(--#{variables.$prefix}header-backdrop-filter);
+  min-height: var(--#{variables.$prefix}header-min-height);
 
   &.is-sticky {
     position: sticky;

package/src/css-variables/color.scss

@@ -14,28 +14,15 @@
     @if (string.length($p) == 1) {
       $p: "0" + $p;
     }
-    $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;
-      $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;
-      $chroma-offset: ($i - 10) *
-        variables.$color-chroma-colorful-offset-lighter;
-      $chroma: $chroma + $chroma-offset;
-    }
+    $chroma: var(--#{variables.$prefix}color-chroma-colorful-#{$p});
 
     @if ($name == "default" or $name == "gray") {
-      $chroma: variables.$color-chroma-gray;
+      $chroma: var(--#{variables.$prefix}color-chroma-gray);
     }
 
-    $oklch: #{$lightness} #{$chroma} #{$hue};
+    $oklch: var(--#{variables.$prefix}color-lightness-#{$p})
+      #{$chroma}
+      var(--#{variables.$prefix}color-hue-#{$name});
 
     --#{variables.$prefix}color-#{$name}-#{$p}: oklch(#{$oklch});
   }
@@ -67,8 +54,12 @@
     $light: map.get($fore, "light");
     $dark: map.get($fore, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-fore: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -81,8 +72,12 @@
     $light: map.get($back, "light");
     $dark: map.get($back, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-back: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -95,8 +90,12 @@
     $light: map.get($border, "light");
     $dark: map.get($border, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-border: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -109,8 +108,12 @@
     $light: map.get($placeholder, "light");
     $dark: map.get($placeholder, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-placeholder: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
@@ -123,14 +126,57 @@
     $light: map.get($shadow, "light");
     $dark: map.get($shadow, "dark");
     @if ($light != null and $dark != null) {
-      $lightStr: functions.colorLightnessNumberToString($light + $lightnessOffset);
-      $darkStr: functions.colorLightnessNumberToString($dark + $lightnessOffset);
+      $lightStr: functions.colorLightnessNumberToString(
+        $light + $lightnessOffset
+      );
+      $darkStr: functions.colorLightnessNumberToString(
+        $dark + $lightnessOffset
+      );
       --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-shadow: light-dark(
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
         var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
       );
     }
   }
+
+  $scrollbar: map.get($colorShade, "scrollbar");
+  @if ($scrollbar != null) {
+    $scrollbarThumb: map.get($scrollbar, "thumb");
+    @if ($scrollbarThumb != null) {
+      $light: map.get($scrollbarThumb, "light");
+      $dark: map.get($scrollbarThumb, "dark");
+      @if ($light != null and $dark != null) {
+        $lightStr: functions.colorLightnessNumberToString(
+          $light + $lightnessOffset
+        );
+        $darkStr: functions.colorLightnessNumberToString(
+          $dark + $lightnessOffset
+        );
+        --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-scrollbar-thumb: light-dark(
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+        );
+      }
+    }
+
+    $scrollbarTrack: map.get($scrollbar, "track");
+    @if ($scrollbarTrack != null) {
+      $light: map.get($scrollbarTrack, "light");
+      $dark: map.get($scrollbarTrack, "dark");
+      @if ($light != null and $dark != null) {
+        $lightStr: functions.colorLightnessNumberToString(
+          $light + $lightnessOffset
+        );
+        $darkStr: functions.colorLightnessNumberToString(
+          $dark + $lightnessOffset
+        );
+        --#{variables.$prefix}color-#{$destColorName}#{$component}#{$pseudo}-scrollbar-track: light-dark(
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$lightStr}),
+          var(--#{variables.$prefix}color-#{$srcColorName}-#{$darkStr})
+        );
+      }
+    }
+  }
 }
 
 @mixin setColorShade(
@@ -719,7 +765,10 @@
       @each $semanticColor in variables.$semanticColors {
         $semanticColorName: map.get($semanticColor, "name");
         $semanticColorColorName: map.get($semanticColor, "colorName");
-        $semanticColorLightnessOffset: map.get($semanticColor, "lightnessOffset");
+        $semanticColorLightnessOffset: map.get(
+          $semanticColor,
+          "lightnessOffset"
+        );
         $color: functions.getColorFromColors(
           variables.$colors,
           $semanticColorColorName
@@ -738,8 +787,68 @@
   }
 }
 
+@mixin setColorColorfulChromaCssVariables() {
+  $p: "0";
+  @for $i from 1 through 19 {
+    $p: "" + ($i * 5);
+    @if (string.length($p) == 1) {
+      $p: "0" + $p;
+    }
+    $chroma: variables.$color-chroma-colorful-50;
+
+    @if ($i < 10) {
+      $chroma-offset: (10 - $i) *
+        variables.$color-chroma-colorful-offset-darker;
+      $chroma: variables.$color-chroma-colorful-50 + $chroma-offset;
+    } @else if ($i > 10) {
+      $chroma-offset: (10 - $i) *
+        variables.$color-chroma-colorful-offset-lighter;
+      $chroma: variables.$color-chroma-colorful-50 + $chroma-offset;
+    }
+
+    --#{variables.$prefix}color-chroma-colorful-#{$p}: #{$chroma};
+  }
+}
+
+@mixin setColorLightnessCssVariables() {
+  $steps: 18;
+  $value-step: (variables.$color-lightness-95 - variables.$color-lightness-05) /
+    $steps;
+  @for $i from 0 through $steps {
+    $current-label: 5 + ($i * 5);
+
+    $formatted-label: if(
+      $current-label < 10,
+      "0#{$current-label}",
+      "#{$current-label}"
+    );
+
+    $current-value: variables.$color-lightness-05 + ($value-step * $i);
+
+    --#{variables.$prefix}color-lightness-#{$formatted-label}: #{$current-value};
+  }
+}
+
 :where(:root) {
   color-scheme: light dark;
+
+  --#{variables.$prefix}color-hue-gray: #{variables.$color-hue-gray};
+  --#{variables.$prefix}color-hue-red: #{variables.$color-hue-red};
+  --#{variables.$prefix}color-hue-coral: #{variables.$color-hue-coral};
+  --#{variables.$prefix}color-hue-orange: #{variables.$color-hue-orange};
+  --#{variables.$prefix}color-hue-yellow: #{variables.$color-hue-yellow};
+  --#{variables.$prefix}color-hue-lime: #{variables.$color-hue-lime};
+  --#{variables.$prefix}color-hue-green: #{variables.$color-hue-green};
+  --#{variables.$prefix}color-hue-cyan: #{variables.$color-hue-cyan};
+  --#{variables.$prefix}color-hue-blue: #{variables.$color-hue-blue};
+  --#{variables.$prefix}color-hue-violet: #{variables.$color-hue-violet};
+  --#{variables.$prefix}color-hue-magenta: #{variables.$color-hue-magenta};
+
+  @include setColorLightnessCssVariables();
+
+  --#{variables.$prefix}color-chroma-gray: #{variables.$color-chroma-gray};
+  @include setColorColorfulChromaCssVariables();
+
   @each $color in variables.$colors {
     $name: map.get($color, "name");
     @if ($name == "gray") {

package/src/css-variables/components/header.scss

@@ -1,6 +1,7 @@
 @use "../../variables/index.scss" as variables;
 
 :root {
+  --#{variables.$prefix}header-min-height: #{variables.$header-min-height};
   --#{variables.$prefix}header-backdrop-filter: #{variables.$header-backdrop-filter};
   --#{variables.$prefix}header-z-index-is-sticky: #{variables.$header-z-index-is-sticky};
   --#{variables.$prefix}header-z-index-is-fixed: #{variables.$header-z-index-is-fixed};

package/src/mixins/responsive.scss

@@ -2,7 +2,7 @@
 
 @mixin screen($size) {
   @if ($size == "xsmall") {
-    $max-width: variables.$responsive-breakpoint-small -
+    $max-width: variables.$responsive-breakpoint-small +
       variables.$responsive-breakpoint-max-width-offset;
     @media screen and (max-width: $max-width) {
       @content;
@@ -17,15 +17,15 @@
     $max-width: 0;
     @if ($size == "small") {
       $min-width: variables.$responsive-breakpoint-small;
-      $max-width: variables.$responsive-breakpoint-medium -
+      $max-width: variables.$responsive-breakpoint-medium +
         variables.$responsive-breakpoint-max-width-offset;
     } @else if ($size == "medium") {
       $min-width: variables.$responsive-breakpoint-medium;
-      $max-width: variables.$responsive-breakpoint-large -
+      $max-width: variables.$responsive-breakpoint-large +
         variables.$responsive-breakpoint-max-width-offset;
     } @else if ($size == "large") {
       $min-width: variables.$responsive-breakpoint-large;
-      $max-width: variables.$responsive-breakpoint-xlarge -
+      $max-width: variables.$responsive-breakpoint-xlarge +
         variables.$responsive-breakpoint-max-width-offset;
     } @else {
       @error "wrong size.";

package/src/utilities/border.scss

@@ -5,6 +5,7 @@
   .border-#{$borderStyle} {
     border-style: #{$borderStyle};
     border-width: var(--#{variables.$prefix}border-width-medium);
+    border-color: var(--#{variables.$prefix}color-default-border);
   }
   @each $borderSide in variables.$borderSides {
     .border-#{$borderSide}-#{$borderStyle} {
@@ -12,6 +13,9 @@
       border-#{$borderSide}-width: var(
         --#{variables.$prefix}border-width-medium
       );
+      border-#{$borderSide}-color: var(
+        --#{variables.$prefix}color-default-border
+      );
     }
   }
 }