noctemyth 0.3.0 → 1.0.0

package/src/components/figure.scss

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../icons/index.scss" as icons;
+@use "../mixins/index.scss" as mixins;
+
+:where(.figure) {
+  --#{variables.$prefix}figure-color-fore: var(
+    --#{variables.$prefix}color-default-figure-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-color-back: var(
+    --#{variables.$prefix}color-default-figure-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-color-border: var(
+    --#{variables.$prefix}color-default-figure-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+
+  --#{variables.$prefix}figure-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-selection-fore,
+    var(--#{variables.$prefix}color-default-selection-fore)
+  );
+  --#{variables.$prefix}figure-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-selection-back,
+    var(--#{variables.$prefix}color-default-selection-back)
+  );
+
+  --#{variables.$prefix}figure-content-color-fore: var(
+    --#{variables.$prefix}color-default-figure-content-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-content-color-back: var(
+    --#{variables.$prefix}color-default-figure-content-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-content-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-content-selection-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-content-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-content-selection-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+
+  --#{variables.$prefix}figure-caption-color-fore: var(
+    --#{variables.$prefix}color-default-figure-caption-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-caption-color-back: var(
+    --#{variables.$prefix}color-default-figure-caption-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-caption-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-caption-selection-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-caption-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-caption-selection-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}figure-color-back);
+  border-color: var(--#{variables.$prefix}figure-color-border);
+  border-style: none;
+  border-width: var(--#{variables.$prefix}border-width-medium);
+  color: var(--#{variables.$prefix}figure-color-fore);
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  padding: 0.25rem;
+
+  &::selection {
+    color: var(--#{variables.$prefix}figure-color-selection-fore);
+    background-color: var(--#{variables.$prefix}figure-color-selection-back);
+  }
+
+  > :where(.figure-content) {
+    @include mixins.element();
+    background-color: var(--#{variables.$prefix}figure-content-color-back);
+    color: var(--#{variables.$prefix}figure-content-color-fore);
+    display: block;
+    width: 100%;
+    height: auto;
+    &::selection {
+      color: var(--#{variables.$prefix}figure-content-color-selection-fore);
+      background-color: var(--#{variables.$prefix}figure-content-color-selection-back);
+    }
+  }
+
+  > :where(.figure-caption) {
+    @include mixins.element();
+    display: block;
+    background-color: var(--#{variables.$prefix}figure-caption-color-back);
+    color: var(--#{variables.$prefix}figure-caption-color-fore);
+    font-size: var(--#{variables.$prefix}font-size-small);
+    width: 100%;
+    &:first-child {
+      padding-bottom: 0.25rem;
+    }
+    &:last-child {
+      padding-top: 0.25rem;
+    }
+    &::selection {
+      color: var(--#{variables.$prefix}figure-caption-color-selection-fore);
+      background-color: var(--#{variables.$prefix}figure-caption-color-selection-back);
+    }
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$allColors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        --#{variables.$prefix}figure-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
+
+        --#{variables.$prefix}figure-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+
+        --#{variables.$prefix}figure-content-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-content-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-content-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-content-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+
+        --#{variables.$prefix}figure-caption-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-caption-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-caption-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-caption-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+      }
+    }
+  }
+}

package/src/components/footer.scss

@@ -18,25 +18,16 @@
   bottom: 0;
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}footer-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-footer-fore
+          --#{variables.$prefix}color-#{$colorName}-footer-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
         );
         --#{variables.$prefix}footer-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-footer-back
-        );
-      }
-    }
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}footer-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-footer-fore
-        );
-        --#{variables.$prefix}footer-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-footer-back
+          --#{variables.$prefix}color-#{$colorName}-footer-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
         );
       }
     }

package/src/components/hamburger.scss

@@ -94,7 +94,7 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}hamburger-color-fore: var(
@@ -107,19 +107,6 @@
         );
       }
     }
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{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)
-        );
-      }
-    }
   }
 }
 

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;
@@ -39,7 +40,7 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}header-color-fore: var(
@@ -69,36 +70,5 @@
         color: var(--#{variables.$prefix}header-color-fore);
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{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,7 +6,6 @@
   display: block;
   font-family: var(--#{variables.$prefix}font-family-heading);
   font-weight: var(--#{variables.$prefix}font-weight-semibold);
-  margin: 0;
 }
 
 :where(.heading-1) {

package/src/components/image.scss

@@ -6,6 +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

@@ -76,7 +76,7 @@
       }
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}input-color-fore: var(
@@ -106,37 +106,6 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "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
-        );
-      }
-    }
   }
 }
 

package/src/components/label.scss

@@ -26,7 +26,7 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}label-color-fore: var(
@@ -43,23 +43,5 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{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)
-        );
-      }
-    }
   }
 }

package/src/components/link.scss

@@ -32,7 +32,9 @@
     background-color: var(--#{variables.$prefix}link-color-selection-back);
   }
 
-  &:hover {
+  &:hover,
+  &.is-hover,
+  &.is-hovered {
     text-decoration: underline;
   }
 
@@ -40,12 +42,13 @@
     outline: none;
   }
 
-  &:visited {
+  &:visited,
+  &.is-visited {
     color: var(--#{variables.$prefix}link-color-visited-fore);
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}link-color-fore: var(
@@ -66,27 +69,5 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}link-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-link-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-fore)
-        );
-        --#{variables.$prefix}link-color-visited-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-link-visited-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
-        );
-        --#{variables.$prefix}link-color-selection-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-link-selection-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
-        );
-        --#{variables.$prefix}link-color-selection-back: var(
-          --#{variables.$prefix}color-#{$colorName}-link-selection-back,
-          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
-        );
-      }
-    }
   }
 }

package/src/components/list.scss

@@ -1,16 +1,46 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-:where(.list) {
+@mixin base-list() {
+  @include mixins.element();
+  display: grid;
+}
+
+@mixin base-list-item() {
   @include mixins.element();
-  display: block;
-  list-style: none;
-  &.is-style-decimal {
-    list-style: decimal;
+  display: list-item;
+}
+
+:where(.list) {
+  @include base-list();
+  --#{variables.$prefix}list-gutter-y: 1rem;
+  --#{variables.$prefix}list-indent: 1.5rem;
+  gap: var(--#{variables.$prefix}list-gutter-y) 0;
+  > :where(.list-item) {
+    @include base-list-item();
+    margin-left: var(--#{variables.$prefix}list-indent);
   }
-  &.is-style-disc {
-    list-style: disc;
+}
+
+:where(.ordered-list) {
+  @include base-list();
+  --#{variables.$prefix}ordered-list-gutter-y: 1rem;
+  --#{variables.$prefix}ordered-list-indent: 1.5rem;
+  gap: var(--#{variables.$prefix}ordered-list-gutter-y) 0;
+  > :where(.ordered-list-item) {
+    @include base-list-item();
+    margin-left: var(--#{variables.$prefix}ordered-list-indent);
   }
-  > :where(.list-item) {
-    display: list-item;
+}
+
+:where(.unordered-list) {
+  @include base-list();
+  --#{variables.$prefix}unordered-list-gutter-y: 1rem;
+  --#{variables.$prefix}unordered-list-indent: 1.5rem;
+  gap: var(--#{variables.$prefix}unordered-list-gutter-y) 0;
+  > :where(.unordered-list-item) {
+    @include base-list-item();
+    margin-left: var(--#{variables.$prefix}unordered-list-indent);
   }
 }

package/src/components/loader.scss

@@ -55,7 +55,7 @@
     }
 
     @if (not variables.$is-skelton) {
-      @each $color in variables.$colors {
+      @each $color in variables.$allColors {
         $colorName: map.get($color, "name");
         &.is-#{$colorName} {
           --#{variables.$prefix}loader-color-fore: var(
@@ -63,15 +63,6 @@
           );
         }
       }
-
-      @each $semanticColor in variables.$semanticColors {
-        $colorName: map.get($semanticColor, "name");
-        &.is-#{$colorName} {
-          --#{variables.$prefix}loader-color-fore: var(
-            --#{variables.$prefix}color-#{$colorName}-loader-fore
-          );
-        }
-      }
     }
   }
 }

package/src/components/message.scss

@@ -83,7 +83,7 @@
   }
 
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}message-color-fore: var(
@@ -125,48 +125,5 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}message-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-message-fore
-        );
-        --#{variables.$prefix}message-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-message-back
-        );
-        --#{variables.$prefix}message-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-message-border
-        );
-        --#{variables.$prefix}message-color-selection-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-message-selection-fore,
-          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
-        );
-        --#{variables.$prefix}message-color-selection-back: var(
-          --#{variables.$prefix}color-#{$colorName}-message-selection-back,
-          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
-        );
-
-        --#{variables.$prefix}message-header-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-message-header-fore
-        );
-        --#{variables.$prefix}message-header-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-message-header-back
-        );
-        --#{variables.$prefix}message-header-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-message-header-border
-        );
-
-        --#{variables.$prefix}message-body-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-message-body-fore
-        );
-        --#{variables.$prefix}message-body-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-message-body-back
-        );
-        --#{variables.$prefix}message-body-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-message-body-border
-        );
-      }
-    }
   }
 }

package/src/components/modal.scss

@@ -39,7 +39,7 @@
     z-index: var(--#{variables.$prefix}z-index-modal-content);
   }
   @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
         --#{variables.$prefix}modal-color-back: var(
@@ -47,14 +47,5 @@
         );
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}modal-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-back
-        );
-      }
-    }
   }
 }