noctemyth 0.0.36

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "noctemyth",
+  "version": "0.0.36",
+  "description": "design system by kaminoctem",
+  "main": "src/noctemyth.scss",
+  "scripts": {
+    "build": "npm run build-lib",
+    "build-lib": "npm run build-lib-clean && npm run build-lib-main && npm run build-lib-utilities && npm run build-lib-skelton",
+    "build-lib-main": "npm run build-lib-sass && npm run build-lib-copy-css && npm run build-lib-copy-map && npm run build-lib-postcss && npm run build-lib-postcss-min",
+    "build-lib-utilities": "npm run build-lib-utilities-sass && npm run build-lib-utilities-copy-css && npm run build-lib-utilities-copy-map && npm run build-lib-utilities-postcss && npm run build-lib-utilities-postcss-min",
+    "build-lib-skelton": "npm run build-lib-skelton-sass && npm run build-lib-skelton-copy-css && npm run build-lib-skelton-copy-map && npm run build-lib-skelton-postcss && npm run build-lib-skelton-postcss-min",
+    "build-lib-clean": "rimraf dist",
+    "build-lib-sass": "sass src/noctemyth.scss dist/css/noctemyth.css",
+    "build-lib-copy-css": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth.css', './dist/css/noctemyth.min.css')\"",
+    "build-lib-copy-map": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth.css.map', './dist/css/noctemyth.min.css.map')\"",
+    "build-lib-postcss": "postcss --output dist/css/noctemyth.css dist/css/noctemyth.css",
+    "build-lib-postcss-min": "postcss --output dist/css/noctemyth.min.css dist/css/noctemyth.min.css",
+    "build-lib-utilities-sass": "sass src/noctemyth-utilities.scss dist/css/noctemyth-utilities.css",
+    "build-lib-utilities-copy-css": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth-utilities.css', './dist/css/noctemyth-utilities.min.css')\"",
+    "build-lib-utilities-copy-map": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth-utilities.css.map', './dist/css/noctemyth-utilities.min.css.map')\"",
+    "build-lib-utilities-postcss": "postcss --output dist/css/noctemyth-utilities.css dist/css/noctemyth-utilities.css",
+    "build-lib-utilities-postcss-min": "postcss --output dist/css/noctemyth-utilities.min.css dist/css/noctemyth-utilities.min.css",
+    "build-lib-skelton-sass": "sass src/noctemyth-skelton.scss dist/css/noctemyth-skelton.css",
+    "build-lib-skelton-copy-css": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth-skelton.css', './dist/css/noctemyth-skelton.min.css')\"",
+    "build-lib-skelton-copy-map": "node -e \"require('fs').copyFileSync('./dist/css/noctemyth-skelton.css.map', './dist/css/noctemyth-skelton.min.css.map')\"",
+    "build-lib-skelton-postcss": "postcss --output dist/css/noctemyth-skelton.css dist/css/noctemyth-skelton.css",
+    "build-lib-skelton-postcss-min": "postcss --output dist/css/noctemyth-skelton.min.css dist/css/noctemyth-skelton.min.css",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kaminoctem/noctemyth.git"
+  },
+  "keywords": [
+    "kaminoctem",
+    "sass",
+    "scss",
+    "css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "author": "kaminoctem",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kaminoctem/noctemyth/issues"
+  },
+  "homepage": "https://github.com/kaminoctem/noctemyth#readme",
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "rimraf": "^6.0.1",
+    "sass": "^1.82.0"
+  }
+}

package/src/animations/fade.scss

@@ -0,0 +1,41 @@
+@use "../mixins/index.scss" as mixins;
+
+//#region fade-in
+
+// style
+.fade-in {
+  @include mixins.animation() {
+    animation-name: fade-in;
+  }
+}
+
+// keyframes
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+//#endregion fade-in
+
+//#region fade-out
+
+// style
+.fade-out {
+  @include mixins.animation() {
+    animation-name: fade-out;
+  }
+}
+
+// keyframes
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+//#endregion fade-out

package/src/animations/index.scss

@@ -0,0 +1 @@
+@forward "./fade.scss";

package/src/backgrounds/dot.scss

@@ -0,0 +1,55 @@
+@use "sass:map";
+@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
+  );
+  --#{variables.$prefix}dot-color-back: var(
+    --#{variables.$prefix}color-default-dot-back
+  );
+  --#{variables.$prefix}dot-size: 20%;
+
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}dot-color-back);
+  background-image: radial-gradient(
+      var(--#{variables.$prefix}dot-color-fore)
+        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-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} {
+        --#{variables.$prefix}dot-color-fore: oklch(
+          var(--#{variables.$prefix}color-#{$colorName}-dot-fore-oklch) / 0.5
+        );
+        --#{variables.$prefix}dot-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dot-back
+        );
+      }
+    }
+  }
+}

package/src/backgrounds/gingham.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@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
+  );
+  --#{variables.$prefix}gingham-color-back: var(
+    --#{variables.$prefix}color-default-gingham-back
+  );
+  --#{variables.$prefix}gingham-degree: 0deg;
+
+  @include mixins.element();
+  background-size: auto auto;
+  background-color: var(--#{variables.$prefix}gingham-color-back);
+  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
+    ),
+    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
+    );
+
+  @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 {
+      $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-back: var(
+          --#{variables.$prefix}color-#{$colorName}-gingham-back
+        );
+      }
+    }
+  }
+}

package/src/backgrounds/index.scss

@@ -0,0 +1,5 @@
+@forward "./dot.scss";
+@forward "./gingham.scss";
+@forward "./rhombus.scss";
+@forward "./stripe.scss";
+@forward "./zigzag.scss";

package/src/backgrounds/rhombus.scss

@@ -0,0 +1,49 @@
+@use "sass:map";
+@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
+  );
+  --#{variables.$prefix}rhombus-color-back: var(
+    --#{variables.$prefix}color-default-rhombus-back
+  );
+  --#{variables.$prefix}rhombus-size: 1rem;
+
+  @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-repeat: repeat;
+
+  &.is-small {
+    --#{variables.$prefix}rhombus-size: 0.5rem;
+  }
+
+  &.is-large {
+    --#{variables.$prefix}rhombus-size: 2rem;
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $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-back: var(
+          --#{variables.$prefix}color-#{$colorName}-rhombus-back
+        );
+      }
+    }
+  }
+}

package/src/backgrounds/stripe.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@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
+  );
+  --#{variables.$prefix}stripe-color-back: var(
+    --#{variables.$prefix}color-default-stripe-back
+  );
+  --#{variables.$prefix}stripe-degree: 0deg;
+
+  @include mixins.element();
+  background-size: auto auto;
+  background-color: var(--#{variables.$prefix}stripe-color-back);
+  background-image: repeating-linear-gradient(
+    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
+  );
+
+  @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 {
+      $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-back: var(
+          --#{variables.$prefix}color-#{$colorName}-stripe-back
+        );
+      }
+    }
+  }
+}

package/src/backgrounds/zigzag.scss

@@ -0,0 +1,71 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+.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-back: var(
+    --#{variables.$prefix}color-default-zigzag-back
+  );
+
+  @include mixins.element();
+
+  background-color: var(--#{variables.$prefix}zigzag-color-back);
+  background-image: linear-gradient(
+      calc(45deg * 3),
+      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      calc(45deg * 5),
+      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      45deg,
+      var(--#{variables.$prefix}zigzag-color-fore) 25%,
+      transparent 25%
+    ),
+    linear-gradient(
+      calc(45deg * 7),
+      var(--#{variables.$prefix}zigzag-color-fore) 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-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;
+  }
+
+  &.is-large {
+    --#{variables.$prefix}zigzag-size: 4rem;
+  }
+
+  @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 {
+      $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-back: var(
+          --#{variables.$prefix}color-#{$colorName}-zigzag-back
+        );
+      }
+    }
+  }
+}

package/src/base/dub.scss

@@ -0,0 +1,9 @@
+@use "../variables/index.scss" as variables;
+
+.dub {
+  color: var(--#{variables.$prefix}color-default-fore);
+  background-color: var(--#{variables.$prefix}color-default-back);
+  font-family: var(--#{variables.$prefix}font-family-main);
+  z-index: var(--#{variables.$prefix}z-index-tabula);
+  text-size-adjust: 100%;
+}

package/src/base/element.scss

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

package/src/base/index.scss

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