minolith 0.0.21 → 0.0.23

package/package.json

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

package/src/backgrounds/dot.scss

@@ -0,0 +1,50 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+.dot {
+  --#{variables.$prefix}dot-size: 20%;
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}color-default-dot-back);
+  background-image: radial-gradient(
+      oklch(var(--#{variables.$prefix}color-default-dot-fore-oklch) / 0.5)
+        var(--#{variables.$prefix}dot-size),
+      transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
+    ),
+    radial-gradient(
+      oklch(var(--#{variables.$prefix}color-default-dot-fore-oklch) / 0.5)
+        var(--#{variables.$prefix}dot-size),
+      transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
+    );
+  background-position: 0 0, 1rem 1rem;
+  background-repeat: repeat;
+  background-size: 2rem 2rem;
+  &.is-coin {
+    --#{variables.$prefix}dot-size: 30%;
+  }
+  &.is-polka {
+    --#{variables.$prefix}dot-size: 20%;
+  }
+  &.is-pin {
+    --#{variables.$prefix}dot-size: 10%;
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-dot-back);
+        background-image: radial-gradient(
+            oklch(var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5)
+              var(--#{variables.$prefix}dot-size),
+            transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
+          ),
+          radial-gradient(
+            oklch(var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5)
+              var(--#{variables.$prefix}dot-size),
+            transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
+          );
+      }
+    }
+  }
+}

package/src/backgrounds/gingham.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .gingham {
+  @include mixins.element();
   background-size: auto auto;
   background-color: var(--#{variables.$prefix}color-default-gingham-back);
   background-image: repeating-linear-gradient(

package/src/backgrounds/index.scss

@@ -1,2 +1,3 @@
+@forward "./dot.scss";
 @forward "./gingham.scss";
 @forward "./stripe.scss";

package/src/backgrounds/stripe.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .stripe {
+  @include mixins.element();
   background-size: auto auto;
   background-color: var(--#{variables.$prefix}color-default-stripe-back);
   background-image: repeating-linear-gradient(

package/src/base/element.scss

@@ -0,0 +1,5 @@
+@use "../mixins/index.scss" as mixins;
+
+.element {
+  @include mixins.element();
+}

package/src/base/index.scss

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

package/src/components/accordion.scss

@@ -1,8 +1,10 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
 @use "../icons/index.scss" as icons;
+@use "../mixins/index.scss" as mixins;
 
 .accordion {
+  @include mixins.element();
   color: var(--#{variables.$prefix}color-default-accordion-fore);
   background-color: var(--#{variables.$prefix}color-default-accordion-back);
   border-color: var(--#{variables.$prefix}color-default-accordion-border);
@@ -14,6 +16,7 @@
   border-width: var(--#{variables.$prefix}border-width-thin);
   border-collapse: collapse;
   >.accordion-summary {
+    @include mixins.element();
     background-color: var(
       --#{variables.$prefix}color-default-accordion-summary-back
     );
@@ -81,6 +84,7 @@
     }
   }
   >.accordion-details {
+    @include mixins.element();
     border-color: var(--#{variables.$prefix}color-gray-border);
     height: 0;
     display: none;

package/src/components/badge.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .badge {
+  @include mixins.element();
   align-items: center;
   background-color: var(--#{variables.$prefix}color-default-badge-back);
   border-color: var(--#{variables.$prefix}color-default-badge-border);

package/src/components/button.scss

@@ -1,12 +1,13 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .button {
+  @include mixins.element();
   background-color: var(--#{variables.$prefix}color-default-button-back);
   border-color: var(--#{variables.$prefix}color-default-button-border);
   border-radius: var(--#{variables.$prefix}border-radius-medium);
   border-style: solid;
-  box-sizing: border-box;
   color: var(--#{variables.$prefix}color-default-button-fore);
   cursor: pointer;
   display: inline-block;

package/src/components/card.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .card {
+  @include mixins.element();
   display: block;
   background-color: var(--#{variables.$prefix}color-default-card-back);
   border-radius: calc(
@@ -16,6 +18,7 @@
     box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-card-shadow);
   }
   >.card-header {
+    @include mixins.element();
     background-color: var(--#{variables.$prefix}color-default-card-header-back);
     border-radius: var(--#{variables.$prefix}border-radius-medium)
       var(--#{variables.$prefix}border-radius-medium) 0 0;
@@ -26,6 +29,7 @@
     font-weight: var(--#{variables.$prefix}font-weight-semibold);
   }
   >.card-body {
+    @include mixins.element();
     background-color: var(--#{variables.$prefix}color-default-card-body-back);
     color: var(--#{variables.$prefix}color-default-card-body-fore);
     padding: 0.5rem;
@@ -43,6 +47,7 @@
     }
   }
   >.card-footer {
+    @include mixins.element();
     background-color: var(--#{variables.$prefix}color-default-card-footer-back);
     border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
       var(--#{variables.$prefix}border-radius-medium);

package/src/components/dialogue.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 @mixin dialogue-message-arrow-base() {
   &:after,
@@ -26,6 +27,7 @@
 }
 
 .dialogue {
+  @include mixins.element();
   --#{variables.$prefix}dialogue-avatar-size: var(
     --#{variables.$prefix}dialogue-avatar-size-default
   );
@@ -100,6 +102,7 @@
 
   > .dialogue-avatar-container,
   > .dialogue-content-container {
+    @include mixins.element();
     display: block;
     max-width: 100%;
     margin: 0;
@@ -110,6 +113,7 @@
     flex: 0 0 var(--#{variables.$prefix}dialogue-avatar-size);
     padding-top: var(--#{variables.$prefix}dialogue-avatar-top-offset);
     > .dialogue-avatar {
+      @include mixins.element();
       aspect-ratio: 1;
       display: block;
       align-items: center;
@@ -131,6 +135,7 @@
       border-width: var(--#{variables.$prefix}dialogue-border-width);
     }
     > .dialogue-name {
+      @include mixins.element();
       background-color: var(
         --#{variables.$prefix}color-default-dialogue-name-back
       );
@@ -147,6 +152,7 @@
       z-index: 1;
     }
     > .dialogue-message {
+      @include mixins.element();
       background-color: var(
         --#{variables.$prefix}color-default-dialogue-message-back
       );

package/src/components/footer.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .footer {
+  @include mixins.element();
   background-color: var(--#{variables.$prefix}color-default-footer-back);
   color: var(--#{variables.$prefix}color-default-footer-fore);
   padding: 2rem 0;

package/src/components/header.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .header {
+  @include mixins.element();
   display: block;
   width: 100%;
   box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-default-shadow);

package/src/components/heading.scss

@@ -1,6 +1,8 @@
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 @mixin heading() {
+  @include mixins.element();
   display: block;
   font-family: var(--#{variables.$prefix}font-family-heading);
   font-weight: var(--#{variables.$prefix}font-weight-semibold);

package/src/components/image.scss

@@ -1,4 +1,7 @@
+@use "../mixins/index.scss" as mixins;
+
 .image {
+  @include mixins.element();
   display: inline-block;
   vertical-align: middle;
   width: 100%;

package/src/components/input.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .input {
+  @include mixins.element();
   background-color: var(--#{variables.$prefix}color-default-back);
   border-color: var(--#{variables.$prefix}color-default-border);
   border-radius: var(--#{variables.$prefix}border-radius-medium);

package/src/components/label.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .label {
+  @include mixins.element();
   font-weight: var(--#{variables.$prefix}font-weight-semibold);
   @if (not variables.$is-skelton) {
     @each $color in variables.$colors {

package/src/components/link.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .link {
+  @include mixins.element();
   color: var(--#{variables.$prefix}color-default-link-fore);
   text-decoration: underline;
   &:hover {

package/src/components/list.scss

@@ -1,5 +1,7 @@
+@use "../mixins/index.scss" as mixins;
 
 .list {
+  @include mixins.element();
   display: block;
   list-style: none;
   &.is-style-decimal {

package/src/components/loader.scss

@@ -3,6 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 .loader {
+  @include mixins.element();
   @include mixins.animation() {
     animation-iteration-count: infinite;
     animation-name: loader-lotate;

package/src/components/main.scss

@@ -1,4 +1,7 @@
+@use "../mixins/index.scss" as mixins;
+
 .main {
+  @include mixins.element();
   position: relative;
   display: block;
   width: 100%;

package/src/components/message.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .message {
+  @include mixins.element();
   display: block;
   background-color: var(--#{variables.$prefix}color-default-message-back);
   border-color: var(--#{variables.$prefix}color-default-message-border);
@@ -10,6 +12,7 @@
   border-width: var(--#{variables.$prefix}border-width-thin);
   color: var(--#{variables.$prefix}color-default-messaage-fore);
   >.message-header {
+    @include mixins.element();
     background-color: var(--#{variables.$prefix}color-default-message-header-back);
     border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
     color: var(--#{variables.$prefix}color-default-message-header-fore);
@@ -19,6 +22,7 @@
     padding: 0.5rem;
   }
   >.message-body {
+    @include mixins.element();
     background-color: var(--#{variables.$prefix}color-default-message-body-back);
     border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
     color: var(--#{variables.$prefix}color-default-message-body-fore);

package/src/components/modal.scss

@@ -1,7 +1,9 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
 .modal {
+  @include mixins.element();
   align-items: center;
   background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
   display: none;
@@ -18,6 +20,7 @@
     display: flex;
   }
   >.modal-content {
+    @include mixins.element();
     max-height: 100%;
     max-width: 100%;
     min-height: 2rem;

package/src/components/nav.scss

@@ -3,12 +3,15 @@
 @use "../mixins/index.scss" as mixins;
 
 .nav {
+  @include mixins.element();
   min-height: 4rem;
   padding: 0.25rem 0;
   .nav-static {
+    @include mixins.element();
     @include mixins.add-responsible-visible() {
       display: flex;
       .nav-brand {
+        @include mixins.element();
         display: flex;
         flex-basis: 0;
         flex-grow: 1;
@@ -22,6 +25,7 @@
         .left,
         .center,
         .right {
+          @include mixins.element();
           display: block;
           flex-basis: 0;
           flex-grow: 1;
@@ -45,6 +49,7 @@
         }
       }
       .nav-menu {
+        @include mixins.element();
         display: flex;
         flex-basis: 0;
         flex-grow: 1;
@@ -53,6 +58,7 @@
         margin: auto;
         position: relative;
         .nav-menu-item {
+          @include mixins.element();
           cursor: pointer;
           display: block;
           flex-basis: 0;
@@ -74,6 +80,7 @@
             -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
             0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
           .icon {
+            @include mixins.element();
             filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
               drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
               drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
@@ -121,9 +128,11 @@
     }
   }
   .nav-accordion {
+    @include mixins.element();
     @include mixins.add-responsible-visible() {
       display: block;
       .nav-brand {
+        @include mixins.element();
         display: flex;
         .nav-brand-left,
         .nav-brand-center,
@@ -131,6 +140,7 @@
         .left,
         .center,
         .right {
+          @include mixins.element();
           display: block;
           flex-basis: 0;
           flex-grow: 1;
@@ -156,12 +166,14 @@
         }
       }
       .nav-menu {
+        @include mixins.element();
         display: none;
         padding: 0.5rem;
         &.is-active {
           display: block;
         }
         .nav-menu-item {
+          @include mixins.element();
           color: var(--#{variables.$prefix}color-default-fore);
           width: 100%;
           display: block;

package/src/components/progress.scss

@@ -3,6 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 .progress {
+  @include mixins.element();
   @include mixins.animation() {
     border-radius: var(--#{variables.$prefix}border-radius-pill);
     border-style: solid;

package/src/css-variables/color.scss

@@ -233,6 +233,13 @@
 
     //#region backgrounds
 
+    //#region dot
+    $dot: map.get($colorShade, "dot");
+    @if ($dot != null) {
+      @include setColor($dot, "default", $name, "dot");
+    }
+    //#endregion dot
+
     //#region gingham
     $gingham: map.get($colorShade, "gingham");
     @if ($gingham != null) {
@@ -388,6 +395,13 @@
 
         //#region backgrounds
 
+        //#region dot
+        $dot: map.get($colorShade, "dot");
+        @if ($dot != null) {
+          @include setColor($dot, $colorName, $name, "dot");
+        }
+        //#endregion dot
+
         //#region gingham
         $gingham: map.get($colorShade, "gingham");
         @if ($gingham != null) {

package/src/layouts/columns.scss

@@ -6,7 +6,7 @@
 .columns {
   --#{variables.$prefix}gutter-x: 0;
   --#{variables.$prefix}gutter-y: 0;
-  box-sizing: border-box;
+  @include mixins.element();
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -64,6 +64,7 @@
   }
 
   .column {
+    @include mixins.element();
     @include mixins.column();
     flex-grow: 1;
     flex-shrink: 0;
@@ -76,6 +77,7 @@
   }
   @for $num from 1 through variables.$columns-count {
     .column-#{$num} {
+      @include mixins.element();
       @include mixins.column();
       flex-basis: math.percentage(math.div($num, variables.$columns-count));
       max-width: math.percentage(math.div($num, variables.$columns-count));

package/src/layouts/container.scss

@@ -5,7 +5,7 @@
 .container {
   --#{variables.$prefix}gutter-x: 0;
   --#{variables.$prefix}gutter-y: 0;
-  box-sizing: border-box;
+  @include mixins.element();
   padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
   padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
   padding-right: calc(var(--#{variables.$prefix}gutter-x) * 0.5);

package/src/mixins/element.scss

@@ -0,0 +1,3 @@
+@mixin element() {
+  box-sizing: border-box;
+}

package/src/mixins/index.scss

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

package/src/mixins/responsive.scss

@@ -209,7 +209,6 @@
 }
 
 @mixin column() {
-  box-sizing: border-box;
   display: block;
   flex-grow: 0;
   flex-shrink: 0;

package/src/variables/color.scss

@@ -38,6 +38,11 @@ $color-light-lightness-border: 70 !default;
 $color-light-lightness-placeholder: 70 !default;
 $color-light-lightness-shadow: 70 !default;
 
+//#region color-light-lightness-dot
+$color-light-lightness-dot-fore: 85 !default;
+$color-light-lightness-dot-back: 95 !default;
+//#endregion color-light-lightness-dot
+
 //#region color-light-lightness-gingham
 $color-light-lightness-gingham-fore: 85 !default;
 $color-light-lightness-gingham-back: 95 !default;
@@ -146,6 +151,11 @@ $color-dark-lightness-border: 50 !default;
 $color-dark-lightness-placeholder: 50 !default;
 $color-dark-lightness-shadow: 50 !default;
 
+//#region color-dark-lightness-dot
+$color-dark-lightness-dot-fore: 5 !default;
+$color-dark-lightness-dot-back: 15 !default;
+//#endregion color-dark-lightness-dot
+
 //#region color-dark-lightness-gingham
 $color-dark-lightness-gingham-fore: 5 !default;
 $color-dark-lightness-gingham-back: 15 !default;
@@ -270,6 +280,10 @@ $colorShadesLight: (
       border: functions.zeroPadding($color-light-lightness-border, 2),
       placeholder: functions.zeroPadding($color-light-lightness-placeholder, 2),
       shadow: functions.zeroPadding($color-light-lightness-shadow, 2),
+      dot: (
+        fore: functions.zeroPadding($color-light-lightness-dot-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-dot-back, 2),
+      ),
       gingham: (
         fore: functions.zeroPadding($color-light-lightness-gingham-fore, 2),
         back: functions.zeroPadding($color-light-lightness-gingham-back, 2),
@@ -754,6 +768,10 @@ $colorShadesDark: (
       border: functions.zeroPadding($color-dark-lightness-border, 2),
       placeholder: functions.zeroPadding($color-dark-lightness-placeholder, 2),
       shadow: functions.zeroPadding($color-dark-lightness-shadow, 2),
+      dot: (
+        fore: functions.zeroPadding($color-dark-lightness-dot-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-dot-back, 2),
+      ),
       gingham: (
         fore: functions.zeroPadding($color-dark-lightness-gingham-fore, 2),
         back: functions.zeroPadding($color-dark-lightness-gingham-back, 2),