noctemyth 0.2.0 → 1.0.0

package/src/components/footer.scss

@@ -2,19 +2,33 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.footer {
+:where(.footer) {
+  --#{variables.$prefix}footer-color-fore: var(
+    --#{variables.$prefix}color-default-footer-fore
+  );
+  --#{variables.$prefix}footer-color-back: var(
+    --#{variables.$prefix}color-default-footer-back
+  );
+
   @include mixins.element();
-  background-color: var(--#{variables.$prefix}color-default-footer-back);
-  color: var(--#{variables.$prefix}color-default-footer-fore);
+
+  background-color: var(--#{variables.$prefix}footer-color-back);
+  color: var(--#{variables.$prefix}footer-color-fore);
   padding: 2rem 0;
   bottom: 0;
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        background-color: var(--#{variables.$prefix}color-#{$colorName}-footer-back);
-        color: var(--#{variables.$prefix}color-#{$colorName}-footer-fore);
+        --#{variables.$prefix}footer-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-footer-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}footer-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-footer-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
       }
     }
   }

package/src/components/hamburger.scss

@@ -1,20 +1,30 @@
 @use "sass:map";
 @use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
 
-$hamburger-size: 3.5rem;
-$hamburger-line-height: 0.2rem;
-$hamburger-line-color: var(--#{variables.$prefix}color-default-border);
+:where(.hamburger) {
+  --#{variables.$prefix}hamburger-color-fore: var(
+    --#{variables.$prefix}color-default-hamburger-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}hamburger-line-color-back: var(
+    --#{variables.$prefix}color-default-hamburger-line-back,
+    var(--#{variables.$prefix}color-default-border)
+  );
 
-.hamburger {
-  color: var(--#{variables.$prefix}color-default-fore);
+  --#{variables.$prefix}hamburger-size: 3.5rem;
+  --#{variables.$prefix}hamburger-line-height: 0.2rem;
+
+  @include mixins.element();
+  color: var(--#{variables.$prefix}hamburger-color-fore);
   border-radius: 0.25rem;
   cursor: pointer;
   display: inline-block;
-  height: $hamburger-size;
+  height: var(--#{variables.$prefix}hamburger-size);
   position: relative;
   touch-action: manipulation;
   user-select: none;
-  width: $hamburger-size;
+  width: var(--#{variables.$prefix}hamburger-size);
   .crown,
   .upperpatty,
   .club,
@@ -33,64 +43,68 @@ $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
     line-height: 1;
     text-align: center;
     top: 0.25em;
-    width: $hamburger-size;
+    width: var(--#{variables.$prefix}hamburger-size);
   }
   .upperpatty {
-    animation: hamburger-upperpatty .75s forwards;
-    background-color: $hamburger-line-color;
-    height: $hamburger-line-height;
-    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
-    width: calc(#{$hamburger-size} / 5 * 3);
+    animation: hamburger-upperpatty 0.75s forwards;
+    background-color: var(--#{variables.$prefix}hamburger-line-color-back);
+    height: var(--#{variables.$prefix}hamburger-line-height);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
+        (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
+    );
+    width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
   }
   .club {
-    background-color: $hamburger-line-color;
-    height: $hamburger-line-height;
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
-    transition: all .25s .25s;
-    width: calc(#{$hamburger-size} / 5 * 3);
+    background-color: var(--#{variables.$prefix}hamburger-line-color-back);
+    height: var(--#{variables.$prefix}hamburger-line-height);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
+    transition: all 0.25s 0.25s;
+    width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
   }
   .lowerpatty {
-    animation: hamburger-lowerpatty .75s forwards;
-    background-color: $hamburger-line-color;
-    height: $hamburger-line-height;
-    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size}/ 5) + 50%);
-    width: calc(#{$hamburger-size} / 5 * 3);
+    animation: hamburger-lowerpatty 0.75s forwards;
+    background-color: var(--#{variables.$prefix}hamburger-line-color-back);
+    height: var(--#{variables.$prefix}hamburger-line-height);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
+        (var(--#{variables.$prefix}hamburger-size)/ 5) + 50%
+    );
+    width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
   }
   .heel {
     bottom: 0.5em;
     font-size: 0.5em;
     line-height: 1;
     text-align: center;
-    width: $hamburger-size;
+    width: var(--#{variables.$prefix}hamburger-size);
   }
   &.is-active {
     .upperpatty {
-      animation: hamburger-upperpatty-is-active .75s forwards;
+      animation: hamburger-upperpatty-is-active 0.75s forwards;
       top: 50%;
     }
     .club {
       opacity: 0;
     }
     .lowerpatty {
-      animation: hamburger-lowerpatty-is-active .75s forwards;
+      animation: hamburger-lowerpatty-is-active 0.75s forwards;
       top: 50%;
     }
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        color: var(--#{variables.$prefix}color-#{$colorName}-fore);
-        .upperpatty {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
-        }
-        .club {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
-        }
-        .lowerpatty {
-          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
-        }
+        --#{variables.$prefix}hamburger-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-hamburger-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}hamburger-line-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-hamburger-line-back,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
       }
     }
   }
@@ -100,58 +114,70 @@ $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
 @keyframes hamburger-upperpatty {
   0% {
     transform: rotate(45deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
   50% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
   100% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
+        (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
+    );
   }
 }
 
-@keyframes hamburger-upperpatty-is-active{
+@keyframes hamburger-upperpatty-is-active {
   0% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
+        (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
+    );
   }
   50% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
-  100%{
+  100% {
     transform: rotate(45deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
 }
 @keyframes hamburger-lowerpatty {
   0% {
     transform: rotate(-45deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
   50% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
   100% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
+        (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
+    );
   }
 }
 @keyframes hamburger-lowerpatty-is-active {
   0% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
+    top: calc(
+      (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
+        (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
+    );
   }
   50% {
     transform: rotate(0deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
   100% {
     transform: rotate(-45deg);
-    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
   }
 }
 //#endregion keyframes

package/src/components/header.scss

@@ -2,12 +2,26 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.header {
+:where(.header) {
+  --#{variables.$prefix}header-color-fore: var(
+    --#{variables.$prefix}color-default-header-fore,
+    --#{variables.$prefix}color-default-fore,
+  );
+  --#{variables.$prefix}header-color-back: var(
+    --#{variables.$prefix}color-default-header-back,
+    --#{variables.$prefix}color-default-back,
+  );
+  --#{variables.$prefix}header-color-shadow: var(
+    --#{variables.$prefix}color-default-header-shadow,
+    --#{variables.$prefix}color-default-shadow,
+  );
+
   @include mixins.element();
   display: block;
   width: 100%;
-  box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-default-header-shadow);
+  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;
@@ -26,12 +40,34 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-header-back-oklch) / 0.5);
-        box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-#{$colorName}-header-shadow);
-        color: var(--#{variables.$prefix}color-#{$colorName}-header-fore);
+        --#{variables.$prefix}header-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-header-fore,
+          --#{variables.$prefix}color-#{$colorName}-fore,
+        );
+        --#{variables.$prefix}header-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-header-back,
+          --#{variables.$prefix}color-#{$colorName}-back,
+        );
+        --#{variables.$prefix}header-color-shadow: var(
+          --#{variables.$prefix}color-#{$colorName}-header-shadow,
+          --#{variables.$prefix}color-#{$colorName}-shadow,
+        );
+
+        background-color: oklch(
+          from var(--#{variables.$prefix}header-color-back)
+            l
+            c
+            h /
+            0.5
+        );
+        box-shadow: 0
+          0
+          0.5rem
+          var(--#{variables.$prefix}header-color-shadow);
+        color: var(--#{variables.$prefix}header-color-fore);
       }
     }
   }

package/src/components/heading.scss

@@ -6,35 +6,34 @@
   display: block;
   font-family: var(--#{variables.$prefix}font-family-heading);
   font-weight: var(--#{variables.$prefix}font-weight-semibold);
-  margin: 0;
 }
 
-.heading-1 {
+:where(.heading-1) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-xxxlarge)
 }
 
-.heading-2 {
+:where(.heading-2) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-xxlarge)
 }
 
-.heading-3 {
+:where(.heading-3) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-xlarge)
 }
 
-.heading-4 {
+:where(.heading-4) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-large)
 }
 
-.heading-5 {
+:where(.heading-5) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-medium)
 }
 
-.heading-6 {
+:where(.heading-6) {
   @include heading();
   font-size: var(--#{variables.$prefix}font-size-normal)
 }

package/src/components/image.scss

@@ -6,5 +6,5 @@
   vertical-align: middle;
   width: 100%;
   height: auto;
-  margin: 0;
+  user-select: none;
 }

package/src/components/index.scss

@@ -1,4 +1,5 @@
 @forward "./accordion.scss";
+@forward "./aside.scss";
 @forward "./badge.scss";
 @forward "./blockquote.scss";
 @forward "./breadcrumbs.scss";
@@ -6,6 +7,8 @@
 @forward "./card.scss";
 @forward "./dialogue.scss";
 @forward "./div.scss";
+@forward "./description-list.scss";
+@forward "./figure.scss";
 @forward "./footer.scss";
 @forward "./hamburger.scss";
 @forward "./header.scss";

package/src/components/input.scss

@@ -2,6 +2,113 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
+@mixin input-base() {
+  --#{variables.$prefix}input-color-fore: var(
+    --#{variables.$prefix}color-default-input-fore
+  );
+  --#{variables.$prefix}input-color-back: var(
+    --#{variables.$prefix}color-default-input-back
+  );
+  --#{variables.$prefix}input-color-border: var(
+    --#{variables.$prefix}color-default-input-border
+  );
+  --#{variables.$prefix}input-color-placeholder: var(
+    --#{variables.$prefix}color-default-input-placeholder
+  );
+
+  --#{variables.$prefix}input-focus-color-back: var(
+    --#{variables.$prefix}color-default-input-focus-back
+  );
+  --#{variables.$prefix}input-focus-color-border: var(
+    --#{variables.$prefix}color-default-input-focus-border
+  );
+  --#{variables.$prefix}input-disabled-color-back: var(
+    --#{variables.$prefix}color-default-input-disabled-back
+  );
+  --#{variables.$prefix}input-disabled-color-border: var(
+    --#{variables.$prefix}color-default-input-disabled-border
+  );
+
+  --#{variables.$prefix}input-border-style: solid;
+  --#{variables.$prefix}input-border-width: var(
+    --#{variables.$prefix}border-width-medium
+  );
+  --#{variables.$prefix}input-border-radius: var(
+    --#{variables.$prefix}border-radius-medium
+  );
+
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}input-color-back);
+  border-color: var(--#{variables.$prefix}input-color-border);
+  border-radius: var(--#{variables.$prefix}input-border-radius);
+  border-style: var(--#{variables.$prefix}input-border-style);
+  border-width: var(--#{variables.$prefix}input-border-width);
+  color: var(--#{variables.$prefix}input-color-fore);
+  padding: 0.5rem;
+  &::placeholder {
+    color: var(--#{variables.$prefix}input-color-placeholder);
+  }
+  &:focus,
+  &.is-focus,
+  &.is-focused {
+    outline: none;
+    background-color: var(--#{variables.$prefix}input-focus-color-back);
+    border-color: var(--#{variables.$prefix}input-focus-color-border);
+  }
+  &[disabled],
+  fieldset[disabled],
+  &.is-disabled {
+    background-color: var(--#{variables.$prefix}input-disabled-color-back);
+    border-color: var(--#{variables.$prefix}input-disabled-color-border);
+  }
+  @if (not variables.$is-skelton) {
+    @each $borderRadius in variables.$borderRadiuses {
+      $name: map.get($borderRadius, "name");
+      &.is-border-radius-#{$name} {
+        border-radius: var(--#{variables.$prefix}border-radius-#{$name});
+      }
+    }
+
+    @each $borderWidth in variables.$borderWidths {
+      $name: map.get($borderWidth, "name");
+      &.is-border-width-#{$name} {
+        border-width: var(--#{variables.$prefix}border-radius-#{$name});
+      }
+    }
+
+    @each $color in variables.$allColors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        --#{variables.$prefix}input-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-input-fore
+        );
+        --#{variables.$prefix}input-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-input-back
+        );
+        --#{variables.$prefix}input-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-input-border
+        );
+        --#{variables.$prefix}input-color-placeholder: var(
+          --#{variables.$prefix}color-#{$colorName}-input-placeholder
+        );
+
+        --#{variables.$prefix}input-focus-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-input-focus-back
+        );
+        --#{variables.$prefix}input-focus-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-input-focus-border
+        );
+        --#{variables.$prefix}input-disabled-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-input-disabled-back
+        );
+        --#{variables.$prefix}input-disabled-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-input-disabled-border
+        );
+      }
+    }
+  }
+}
+
 .input-checkbox {
   appearance: none;
   border-radius: 25%;
@@ -223,75 +330,9 @@
   }
 }
 
-.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);
-  border-style: solid;
-  border-width: var(--#{variables.$prefix}border-width-medium);
-  padding: 0.5rem;
-  @each $borderRadius in variables.$borderRadiuses {
-    $name: map.get($borderRadius, "name");
-    &.is-border-radius-#{$name} {
-      border-radius: var(--#{variables.$prefix}border-radius-#{$name});
-    }
-  }
-  @each $borderWidth in variables.$borderWidths {
-    $name: map.get($borderWidth, "name");
-    &.is-border-width-#{$name} {
-      border-width: var(--#{variables.$prefix}border-radius-#{$name});
-    }
-  }
-  &::placeholder {
-    color: var(--#{variables.$prefix}color-default-placeholder);
-  }
-  &:focus,
-  &.is-focus,
-  &.is-focused {
-    outline: none;
-    background-color: var(--#{variables.$prefix}color-default-focus-back);
-    border-color: var(--#{variables.$prefix}color-default-focus-border);
-  }
-  &[disabled],
-  fieldset[disabled],
-  &.is-disabled {
-    background-color: var(--#{variables.$prefix}color-default-disabled-back);
-    border-color: var(--#{variables.$prefix}color-default-disabled-border);
-  }
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
-      $colorName: map.get($color, "name");
-      &.is-#{$colorName} {
-        background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
-        border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
-        color: var(--#{variables.$prefix}color-#{$colorName}-fore);
-        &::placeholder {
-          color: var(--#{variables.$prefix}color-#{$colorName}-placeholder);
-        }
-        &:focus,
-        &.is-focus,
-        &.is-focused {
-          background-color: var(
-            --#{variables.$prefix}color-#{$colorName}-focus-back
-          );
-          border-color: var(
-            --#{variables.$prefix}color-#{$colorName}-focus-border
-          );
-        }
-        &[disabled],
-        fieldset[disabled],
-        &.is-disabled {
-          background-color: var(
-            --#{variables.$prefix}color-#{$colorName}-disabled-back
-          );
-          border-color: var(
-            --#{variables.$prefix}color-#{$colorName}-disabled-border
-          );
-        }
-      }
-    }
-  }
+:where(.input) {
+  @include input-base();
+
   &[type="checkbox"] {
     @extend .input-checkbox;
   }

package/src/components/label.scss

@@ -2,15 +2,45 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.label {
+:where(.label) {
+  --#{variables.$prefix}label-color-fore: var(
+    --#{variables.$prefix}color-default-label-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}label-color-selection-fore: var(
+    --#{variables.$prefix}color-default-label-selection-fore,
+    var(--#{variables.$prefix}color-default-selection-fore)
+  );
+  --#{variables.$prefix}label-color-selection-back: var(
+    --#{variables.$prefix}color-default-label-selection-back,
+    var(--#{variables.$prefix}color-default-selection-back)
+  );
+
   @include mixins.element();
   font-weight: var(--#{variables.$prefix}font-weight-semibold);
-  color: var(--#{variables.$prefix}color-default-label-fore);
+  color: var(--#{variables.$prefix}label-color-fore);
+
+  &::selection {
+    color: var(--#{variables.$prefix}label-color-selection-fore);
+    background-color: var(--#{variables.$prefix}label-color-selection-back);
+  }
+
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        color: var(--#{variables.$prefix}color-#{$colorName}-label-fore);
+        --#{variables.$prefix}label-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-label-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}label-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-label-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}label-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-label-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
       }
     }
   }