noctemyth 0.2.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noctemyth",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "design system by kaminoctem",
   "main": "src/noctemyth.scss",
   "scripts": {
@@ -50,13 +50,13 @@
   },
   "homepage": "https://github.com/kaminoctem/noctemyth#readme",
   "devDependencies": {
-    "autoprefixer": "^10.4.23",
-    "baseline-browser-mapping": "^2.9.19",
-    "caniuse-lite": "^1.0.30001766",
-    "cssnano": "^7.1.2",
-    "postcss": "^8.5.6",
+    "autoprefixer": "^10.4.27",
+    "baseline-browser-mapping": "^2.10.8",
+    "caniuse-lite": "^1.0.30001780",
+    "cssnano": "^7.1.3",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
-    "rimraf": "^6.1.2",
-    "sass": "^1.97.3"
+    "rimraf": "^6.1.3",
+    "sass": "^1.98.0"
   }
 }

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

@@ -2,9 +2,10 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.dot {
-  --#{variables.$prefix}dot-color-fore: oklch(
-    var(--#{variables.$prefix}color-default-dot-fore-oklch) / 0.5
+:where(.dot) {
+  --#{variables.$prefix}dot-color-dot: oklch(
+    from var(--#{variables.$prefix}color-default-dot-fore) l c h /
+      0.5
   );
   --#{variables.$prefix}dot-color-back: var(
     --#{variables.$prefix}color-default-dot-back
@@ -13,38 +14,45 @@
 
   @include mixins.element();
   background-color: var(--#{variables.$prefix}dot-color-back);
-  background-image: radial-gradient(
-      var(--#{variables.$prefix}dot-color-fore)
+  background-image:
+    radial-gradient(
+      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%)
     );
-  background-position: 0 0, 1rem 1rem;
+  background-position:
+    0 0,
+    1rem 1rem;
   background-repeat: repeat;
   background-size: 2rem 2rem;
 
-  &.is-coin {
-    --#{variables.$prefix}dot-size: 30%;
-  }
+  @if (not variables.$is-skelton) {
+    &.is-coin {
+      --#{variables.$prefix}dot-size: 30%;
+    }
 
-  &.is-polka {
-    --#{variables.$prefix}dot-size: 20%;
-  }
+    &.is-polka {
+      --#{variables.$prefix}dot-size: 20%;
+    }
 
-  &.is-pin {
-    --#{variables.$prefix}dot-size: 10%;
-  }
+    &.is-pin {
+      --#{variables.$prefix}dot-size: 10%;
+    }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}dot-color-fore: oklch(
-          var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5
+        --#{variables.$prefix}dot-color-dot: 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

package/src/backgrounds/gingham.scss

@@ -2,9 +2,9 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.gingham {
-  --#{variables.$prefix}gingham-color-fore: oklch(
-    var(--#{variables.$prefix}color-default-gingham-fore-oklch) / 0.5
+:where(.gingham) {
+  --#{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(
     --#{variables.$prefix}color-default-gingham-back
@@ -14,38 +14,39 @@
   @include mixins.element();
   background-size: auto auto;
   background-color: var(--#{variables.$prefix}gingham-color-back);
-  background-image: repeating-linear-gradient(
+  background-image:
+    repeating-linear-gradient(
       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
     );
 
-  @for $n from 0 through 6 {
-    $degree: $n * 15deg;
-    &.is-#{$degree} {
-      --#{variables.$prefix}gingham-degree: #{$degree};
+  @if (not variables.$is-skelton) {
+    @for $n from 0 through 6 {
+      $degree: $n * 15deg;
+      &.is-#{$degree} {
+        --#{variables.$prefix}gingham-degree: #{$degree};
+      }
     }
-  }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}gingham-color-fore: oklch(
-          var(--#{variables.$prefix}color-#{$colorName}-gingham-fore-oklch) / 0.5
+        --#{variables.$prefix}gingham-color-line: 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

package/src/backgrounds/rhombus.scss

@@ -2,12 +2,9 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-@mixin rhombus($fore, $back) {
-}
-
-.rhombus {
-  --#{variables.$prefix}rhombus-color-fore: oklch(
-    var(--#{variables.$prefix}color-default-rhombus-fore-oklch) / 0.5
+:where(.rhombus) {
+  --#{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(
     --#{variables.$prefix}color-default-rhombus-back
@@ -17,28 +14,54 @@
   @include mixins.element();
 
   background-color: var(--#{variables.$prefix}rhombus-color-back);
-  background-image: linear-gradient(135deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
-    linear-gradient(225deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
-    linear-gradient(45deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, transparent 25%),
-    linear-gradient(315deg, var(--#{variables.$prefix}rhombus-color-fore) 25%, var(--#{variables.$prefix}rhombus-color-back) 25%);
-  background-position: var(--#{variables.$prefix}rhombus-size) 0, var(--#{variables.$prefix}rhombus-size) 0, 0 0, 0 0;
-  background-size: var(--#{variables.$prefix}rhombus-size) var(--#{variables.$prefix}rhombus-size);
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      225deg,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      45deg,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      315deg,
+      var(--#{variables.$prefix}rhombus-color-line) 25%,
+      var(--#{variables.$prefix}rhombus-color-back) 25%
+    );
+  background-position:
+    var(--#{variables.$prefix}rhombus-size) 0,
+    var(--#{variables.$prefix}rhombus-size) 0,
+    0 0,
+    0 0;
+  background-size: var(--#{variables.$prefix}rhombus-size)
+    var(--#{variables.$prefix}rhombus-size);
   background-repeat: repeat;
 
-  &.is-small {
-    --#{variables.$prefix}rhombus-size: 0.5rem;
-  }
+  @if (not variables.$is-skelton) {
+    &.is-small {
+      --#{variables.$prefix}rhombus-size: 0.5rem;
+    }
 
-  &.is-large {
-    --#{variables.$prefix}rhombus-size: 2rem;
-  }
+    &.is-large {
+      --#{variables.$prefix}rhombus-size: 2rem;
+    }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}rhombus-color-fore: oklch(
-          var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore-oklch) / 0.5
+        --#{variables.$prefix}rhombus-color-line: 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

package/src/backgrounds/stripe.scss

@@ -2,9 +2,10 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.stripe {
-  --#{variables.$prefix}stripe-color-fore: oklch(
-    var(--#{variables.$prefix}color-default-stripe-fore-oklch) / 0.5
+:where(.stripe) {
+  --#{variables.$prefix}stripe-color-line: oklch(
+    from var(--#{variables.$prefix}color-default-stripe-fore) l c h /
+      0.5
   );
   --#{variables.$prefix}stripe-color-back: var(
     --#{variables.$prefix}color-default-stripe-back
@@ -18,23 +19,27 @@
     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
   );
 
-  @for $n from 0 through 24 {
-    $degree: $n * 15deg;
-    &.is-#{$degree} {
-      --#{variables.$prefix}stripe-degree: #{$degree};
+  @if (not variables.$is-skelton) {
+    @for $n from 0 through 24 {
+      $degree: $n * 15deg;
+      &.is-#{$degree} {
+        --#{variables.$prefix}stripe-degree: #{$degree};
+      }
     }
-  }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}stripe-color-fore: oklch(
-          var(--#{variables.$prefix}color-#{$colorName}-stripe-fore-oklch) / 0.5
+        --#{variables.$prefix}stripe-color-line: 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

package/src/backgrounds/zigzag.scss

@@ -2,10 +2,11 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.zigzag {
+:where(.zigzag) {
   --#{variables.$prefix}zigzag-size: 1rem;
-  --#{variables.$prefix}zigzag-color-fore: oklch(
-    var(--#{variables.$prefix}color-default-zigzag-fore-oklch) / 0.5
+  --#{variables.$prefix}zigzag-color-line: oklch(
+    from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
+      0.5
   );
   --#{variables.$prefix}zigzag-color-back: var(
     --#{variables.$prefix}color-default-zigzag-back
@@ -14,53 +15,61 @@
   @include mixins.element();
 
   background-color: var(--#{variables.$prefix}zigzag-color-back);
-  background-image: linear-gradient(
+  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: var(--#{variables.$prefix}zigzag-size) 0,
-    var(--#{variables.$prefix}zigzag-size) 0, 0 0, 0 0;
+  background-position:
+    var(--#{variables.$prefix}zigzag-size) 0,
+    var(--#{variables.$prefix}zigzag-size) 0,
+    0 0,
+    0 0;
   background-size: calc(var(--#{variables.$prefix}zigzag-size) * 2)
     calc(var(--#{variables.$prefix}zigzag-size) * 2);
   background-repeat: repeat;
 
-  &.is-small {
-    --#{variables.$prefix}zigzag-size: 0.5rem;
-  }
+  @if (not variables.$is-skelton) {
+    &.is-small {
+      --#{variables.$prefix}zigzag-size: 0.5rem;
+    }
 
-  &.is-large {
-    --#{variables.$prefix}zigzag-size: 4rem;
-  }
+    &.is-large {
+      --#{variables.$prefix}zigzag-size: 4rem;
+    }
 
-  @for $n from 0 through 24 {
-    $degree: $n * 15deg;
-    &.is-#{$degree} {
-      --#{variables.$prefix}zigzag-degree: #{$degree};
+    @for $n from 0 through 24 {
+      $degree: $n * 15deg;
+      &.is-#{$degree} {
+        --#{variables.$prefix}zigzag-degree: #{$degree};
+      }
     }
-  }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+    @each $color in variables.$allColors {
       $colorName: map.get($color, "name");
       &.is-#{$colorName} {
-        --#{variables.$prefix}zigzag-color-fore: oklch(
-          var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore-oklch) / 0.5
+        --#{variables.$prefix}zigzag-color-line: 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

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

@@ -1,9 +1,39 @@
 @use "../variables/index.scss" as variables;
 
-.dub {
-  color: var(--#{variables.$prefix}color-default-fore);
-  background-color: var(--#{variables.$prefix}color-default-back);
+:where(.dub) {
+  --#{variables.$prefix}dub-color-fore: var(
+    --#{variables.$prefix}color-default-fore
+  );
+  --#{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
+  );
+  --#{variables.$prefix}dub-color-selection-back: var(
+    --#{variables.$prefix}color-default-selection-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-tabula);
+  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/element.scss

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

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);
+  // }
+}