noctemyth 0.3.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noctemyth",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "design system by kaminoctem",
   "main": "src/noctemyth.scss",
   "scripts": {

package/src/animations/fade.scss

@@ -3,7 +3,7 @@
 //#region fade-in
 
 // style
-.fade-in {
+:where(.fade-in) {
   @include mixins.animation() {
     animation-name: fade-in;
   }
@@ -23,7 +23,7 @@
 //#region fade-out
 
 // style
-.fade-out {
+:where(.fade-out) {
   @include mixins.animation() {
     animation-name: fade-out;
   }

package/src/backgrounds/dot.scss

@@ -3,7 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 :where(.dot) {
-  --#{variables.$prefix}dot-color-fore: oklch(
+  --#{variables.$prefix}dot-color-dot: oklch(
     from var(--#{variables.$prefix}color-default-dot-fore) l c h /
       0.5
   );
@@ -16,12 +16,12 @@
   background-color: var(--#{variables.$prefix}dot-color-back);
   background-image:
     radial-gradient(
-      var(--#{variables.$prefix}dot-color-fore)
+      var(--#{variables.$prefix}dot-color-dot)
         var(--#{variables.$prefix}dot-size),
       transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
     ),
     radial-gradient(
-      var(--#{variables.$prefix}dot-color-fore)
+      var(--#{variables.$prefix}dot-color-dot)
         var(--#{variables.$prefix}dot-size),
       transparent calc(var(--#{variables.$prefix}dot-size) + 3%)
     );
@@ -44,26 +44,10 @@
       --#{variables.$prefix}dot-size: 10%;
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}dot-color-fore: oklch(
-          from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
-            l
-            c
-            h /
-            0.5
-        );
-        --#{variables.$prefix}dot-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-dot-back
-        );
-      }
-    }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}dot-color-fore: oklch(
+        --#{variables.$prefix}dot-color-dot: oklch(
           from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
             l
             c

package/src/backgrounds/gingham.scss

@@ -3,7 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 :where(.gingham) {
-  --#{variables.$prefix}gingham-color-fore: oklch(
+  --#{variables.$prefix}gingham-color-line: oklch(
     from var(--#{variables.$prefix}color-default-gingham-fore) l c h / 0.5
   );
   --#{variables.$prefix}gingham-color-back: var(
@@ -19,15 +19,15 @@
       var(--#{variables.$prefix}gingham-degree),
       transparent,
       transparent 0.75rem,
-      var(--#{variables.$prefix}gingham-color-fore) 0.75rem,
-      var(--#{variables.$prefix}gingham-color-fore) 1.5rem
+      var(--#{variables.$prefix}gingham-color-line) 0.75rem,
+      var(--#{variables.$prefix}gingham-color-line) 1.5rem
     ),
     repeating-linear-gradient(
       calc(var(--#{variables.$prefix}gingham-degree) + 90deg),
       transparent,
       transparent 0.75rem,
-      var(--#{variables.$prefix}gingham-color-fore) 0.75rem,
-      var(--#{variables.$prefix}gingham-color-fore) 1.5rem
+      var(--#{variables.$prefix}gingham-color-line) 0.75rem,
+      var(--#{variables.$prefix}gingham-color-line) 1.5rem
     );
 
   @if (not variables.$is-skelton) {
@@ -38,26 +38,10 @@
       }
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}gingham-color-fore: oklch(
-          from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore)
-            l
-            c
-            h /
-            0.5
-        );
-        --#{variables.$prefix}gingham-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-gingham-back
-        );
-      }
-    }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}gingham-color-fore: oklch(
+        --#{variables.$prefix}gingham-color-line: oklch(
           from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore)
             l
             c

package/src/backgrounds/rhombus.scss

@@ -3,7 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 :where(.rhombus) {
-  --#{variables.$prefix}rhombus-color-fore: oklch(
+  --#{variables.$prefix}rhombus-color-line: oklch(
     from var(--#{variables.$prefix}color-default-rhombus-fore) l c h / 0.5
   );
   --#{variables.$prefix}rhombus-color-back: var(
@@ -17,22 +17,22 @@
   background-image:
     linear-gradient(
       135deg,
-      var(--#{variables.$prefix}rhombus-color-fore) 25%,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       225deg,
-      var(--#{variables.$prefix}rhombus-color-fore) 25%,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       45deg,
-      var(--#{variables.$prefix}rhombus-color-fore) 25%,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       315deg,
-      var(--#{variables.$prefix}rhombus-color-fore) 25%,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
       var(--#{variables.$prefix}rhombus-color-back) 25%
     );
   background-position:
@@ -53,26 +53,10 @@
       --#{variables.$prefix}rhombus-size: 2rem;
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}rhombus-color-fore: oklch(
-          from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
-            l
-            c
-            h /
-            0.5
-        );
-        --#{variables.$prefix}rhombus-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-rhombus-back
-        );
-      }
-    }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}rhombus-color-fore: oklch(
+        --#{variables.$prefix}rhombus-color-line: oklch(
           from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
             l
             c

package/src/backgrounds/stripe.scss

@@ -3,7 +3,7 @@
 @use "../mixins/index.scss" as mixins;
 
 :where(.stripe) {
-  --#{variables.$prefix}stripe-color-fore: oklch(
+  --#{variables.$prefix}stripe-color-line: oklch(
     from var(--#{variables.$prefix}color-default-stripe-fore) l c h /
       0.5
   );
@@ -19,8 +19,8 @@
     var(--#{variables.$prefix}stripe-degree),
     transparent,
     transparent 0.75rem,
-    var(--#{variables.$prefix}stripe-color-fore) 0.75rem,
-    var(--#{variables.$prefix}stripe-color-fore) 1.5rem
+    var(--#{variables.$prefix}stripe-color-line) 0.75rem,
+    var(--#{variables.$prefix}stripe-color-line) 1.5rem
   );
 
   @if (not variables.$is-skelton) {
@@ -31,26 +31,10 @@
       }
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}stripe-color-fore: oklch(
-          from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
-            l
-            c
-            h /
-            0.5
-        );
-        --#{variables.$prefix}stripe-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-stripe-back
-        );
-      }
-    }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}stripe-color-fore: oklch(
+        --#{variables.$prefix}stripe-color-line: oklch(
           from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
             l
             c

package/src/backgrounds/zigzag.scss

@@ -4,7 +4,7 @@
 
 :where(.zigzag) {
   --#{variables.$prefix}zigzag-size: 1rem;
-  --#{variables.$prefix}zigzag-color-fore: oklch(
+  --#{variables.$prefix}zigzag-color-line: oklch(
     from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
       0.5
   );
@@ -18,22 +18,22 @@
   background-image:
     linear-gradient(
       calc(45deg * 3),
-      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      var(--#{variables.$prefix}zigzag-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       calc(45deg * 5),
-      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      var(--#{variables.$prefix}zigzag-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       45deg,
-      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      var(--#{variables.$prefix}zigzag-color-line) 25%,
       transparent 25%
     ),
     linear-gradient(
       calc(45deg * 7),
-      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      var(--#{variables.$prefix}zigzag-color-line) 25%,
       var(--#{variables.$prefix}zigzag-color-back) 25%
     );
   background-position:
@@ -61,26 +61,10 @@
       }
     }
 
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}zigzag-color-fore: oklch(
-          from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
-            l
-            c
-            h /
-            0.5
-        );
-        --#{variables.$prefix}zigzag-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-zigzag-back
-        );
-      }
-    }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}zigzag-color-fore: oklch(
+        --#{variables.$prefix}zigzag-color-line: oklch(
           from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
             l
             c

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/dub.scss

@@ -7,6 +7,12 @@
   --#{variables.$prefix}dub-color-back: var(
     --#{variables.$prefix}color-default-back
   );
+  --#{variables.$prefix}dub-color-scrollbar-thumb: var(
+    --#{variables.$prefix}color-default-scrollbar-thumb
+  );
+  --#{variables.$prefix}dub-color-scrollbar-track: var(
+    --#{variables.$prefix}color-default-scrollbar-track
+  );
   --#{variables.$prefix}dub-color-selection-fore: var(
     --#{variables.$prefix}color-default-selection-fore
   );
@@ -14,9 +20,20 @@
     --#{variables.$prefix}color-default-selection-back
   );
 
-  color: var(--#{variables.$prefix}color-default-fore);
-  background-color: var(--#{variables.$prefix}color-default-back);
+  color: var(--#{variables.$prefix}dub-color-fore);
+  background-color: var(--#{variables.$prefix}dub-color-back);
   font-family: var(--#{variables.$prefix}font-family-main);
   z-index: var(--#{variables.$prefix}z-index-dub);
   text-size-adjust: 100%;
+  line-height: 1.5;
+  letter-spacing: 0.025rem;
+  text-autospace: normal;
+  text-spacing-trim: trim-start;
+  // scrollbar-color: var(--#{variables.$prefix}dub-color-scrollbar-thumb)
+  //   var(--#{variables.$prefix}dub-color-scrollbar-track);
+
+  &::selection {
+    color: var(--#{variables.$prefix}dub-color-selection-fore);
+    background-color: var(--#{variables.$prefix}dub-color-selection-back);
+  }
 }

package/src/base/index.scss

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

package/src/base/normalize.scss

@@ -1,13 +1,5 @@
 @use "../variables/index.scss" as variables;
 
-:root {
-  @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/components/accordion.scss

@@ -124,6 +124,7 @@
         background: var(--#{variables.$prefix}accordion-color-fore);
       }
     }
+
     &:focus,
     &.is-focus,
     &.is-focused {
@@ -134,8 +135,9 @@
         --#{variables.$prefix}accordion-summary-color-focus-border
       );
     }
+
     &:hover,
-    &.is-hovered,
+    &.is-hover,
     &.is-hovered {
       background-color: var(
         --#{variables.$prefix}accordion-summary-color-hover-back
@@ -144,6 +146,7 @@
         --#{variables.$prefix}accordion-summary-color-hover-border
       );
     }
+
     &:active,
     &.is-active {
       background-color: var(
@@ -153,6 +156,7 @@
         --#{variables.$prefix}accordion-summary-color-active-border
       );
     }
+
     &[disabled],
     fieldset[disabled],
     &.is-disabled {
@@ -188,7 +192,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}accordion-color-fore: var(
@@ -264,82 +268,5 @@
         //#endregion disabled
       }
     }
-
-    @each $semanticColor in variables.$semanticColors {
-      $colorName: map.get($semanticColor, "name");
-      &.is-#{$colorName} {
-        --#{variables.$prefix}accordion-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-fore
-        );
-        --#{variables.$prefix}accordion-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-back
-        );
-        --#{variables.$prefix}accordion-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-border
-        );
-        --#{variables.$prefix}accordion-color-selection-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-selection-fore
-        );
-        --#{variables.$prefix}accordion-color-selection-back: var(
-          --#{variables.$prefix}color-#{$colorName}-selection-back
-        );
-
-        --#{variables.$prefix}accordion-summary-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
-        );
-        --#{variables.$prefix}accordion-summary-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
-        );
-        --#{variables.$prefix}accordion-summary-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
-        );
-
-        --#{variables.$prefix}accordion-details-color-fore: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
-        );
-        --#{variables.$prefix}accordion-details-color-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-details-back
-        );
-        --#{variables.$prefix}accordion-details-color-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-details-border
-        );
-
-        //#region focus
-        --#{variables.$prefix}accordion-summary-color-focus-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
-        );
-        --#{variables.$prefix}accordion-summary-color-focus-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
-        );
-        //#endregion focus
-
-        //#region hover
-        --#{variables.$prefix}accordion-summary-color-hover-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
-        );
-        --#{variables.$prefix}accordion-summary-color-hover-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
-        );
-        //#endregion hover
-
-        //#region active
-        --#{variables.$prefix}accordion-summary-color-active-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
-        );
-        --#{variables.$prefix}accordion-summary-color-active-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
-        );
-        //#endregion active
-
-        //#region disabled
-        --#{variables.$prefix}accordion-summary-color-disabled-back: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
-        );
-        --#{variables.$prefix}accordion-summary-color-disabled-border: var(
-          --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
-        );
-        //#endregion disabled
-      }
-    }
   }
 }

package/src/components/aside.scss

@@ -0,0 +1,7 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+:where(.aside) {
+  @include mixins.element();
+}