noctemyth 0.0.36 → 0.2.0

package/src/components/input.scss

@@ -2,85 +2,7 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.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
-          );
-        }
-      }
-    }
-  }
-}
-
-.input-text {
-  @extend .input;
-}
-
 .input-checkbox {
-  @extend .input;
   appearance: none;
   border-radius: 25%;
   cursor: pointer;
@@ -167,7 +89,6 @@
 }
 
 .input-radio {
-  @extend .input;
   appearance: none;
   border-radius: 50%;
   cursor: pointer;
@@ -258,13 +179,11 @@
 }
 
 .input-color {
-  @extend .input;
   cursor: pointer;
   height: 2.5rem;
 }
 
 .input-range {
-  @extend .input;
   appearance: none;
   cursor: pointer;
   border-radius: var(--#{variables.$prefix}border-radius-pill);
@@ -304,35 +223,94 @@
   }
 }
 
-.input[type="text"],
-.input[type="email"],
-.input[type="number"],
-.input[type="password"] {
-  @extend .input-text;
+.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
+          );
+        }
+      }
+    }
+  }
+  &[type="checkbox"] {
+    @extend .input-checkbox;
+  }
+  &[type="radio"] {
+    @extend .input-radio;
+  }
+  &[type="color"] {
+    @extend .input-color;
+  }
+  &[type="range"] {
+    @extend .input-range;
+  }
 }
 
 textarea {
   &.input {
-    @extend .input-text;
     min-height: min-content;
     max-width: 100%;
     width: 100%;
     field-sizing: content;
   }
 }
-
-.input[type="checkbox"] {
-  @extend .input-checkbox;
-}
-
-.input[type="radio"] {
-  @extend .input-radio;
-}
-
-.input[type="color"] {
-  @extend .input-color;
-}
-
-.input[type="range"] {
-  @extend .input-range;
-}

package/src/css-variables/color.scss

@@ -19,22 +19,12 @@
     @if ($i < 10) {
       $lightness-offset: (10 - $i) * variables.$color-lightness-offset-darker;
       $lightness: variables.$color-lightness-50 + $lightness-offset;
-      @if ($lightness > 100) {
-        $lightness: 100;
-      } @else if ($i < 0) {
-        $lightness: 0;
-      }
       $chroma-offset: (10 - $i) *
         variables.$color-chroma-colorful-offset-darker;
       $chroma: $chroma + $chroma-offset;
     } @else if ($i > 10) {
       $lightness-offset: ($i - 10) * variables.$color-lightness-offset-lighter;
       $lightness: variables.$color-lightness-50 + $lightness-offset;
-      @if ($lightness > 100) {
-        $lightness: 100;
-      } @else if ($i < 0) {
-        $lightness: 0;
-      }
       $chroma-offset: ($i - 10) *
         variables.$color-chroma-colorful-offset-lighter;
       $chroma: $chroma + $chroma-offset;
@@ -583,6 +573,7 @@
 }
 
 :root {
+  color-scheme: light dark;
   @each $color in variables.$colors {
     $name: map.get($color, "name");
     @if ($name == "gray") {
@@ -591,8 +582,6 @@
       @include setColorVariables($color);
     }
   }
-
-  @include setColorLight();
 }
 
 @include mixins.setCssVariableColorScheme("light") {

package/src/layouts/columns.scss

@@ -4,8 +4,8 @@
 @use "../functions/index.scss" as functions;
 
 .columns {
-  --#{variables.$prefix}gutter-x: 0;
-  --#{variables.$prefix}gutter-y: 0;
+  --#{variables.$prefix}gutter-x: 0rem;
+  --#{variables.$prefix}gutter-y: 0rem;
   @include mixins.element();
   display: flex;
   flex-direction: row;

package/src/layouts/container.scss

@@ -3,8 +3,8 @@
 @use "../mixins/index.scss" as mixins;
 
 .container {
-  --#{variables.$prefix}gutter-x: 0;
-  --#{variables.$prefix}gutter-y: 0;
+  --#{variables.$prefix}gutter-x: 0rem;
+  --#{variables.$prefix}gutter-y: 0rem;
   @include mixins.element();
   padding-top: calc(var(--#{variables.$prefix}gutter-y) * 0.5);
   padding-bottom: calc(var(--#{variables.$prefix}gutter-y) * 0.5);

package/src/utilities/color.scss

@@ -9,8 +9,10 @@
     background-image: linear-gradient(
       135deg,
       var(--#{variables.$prefix}color-red-#{$numStr}),
+      var(--#{variables.$prefix}color-coral-#{$numStr}),
       var(--#{variables.$prefix}color-orange-#{$numStr}),
       var(--#{variables.$prefix}color-yellow-#{$numStr}),
+      var(--#{variables.$prefix}color-lime-#{$numStr}),
       var(--#{variables.$prefix}color-green-#{$numStr}),
       var(--#{variables.$prefix}color-cyan-#{$numStr}),
       var(--#{variables.$prefix}color-blue-#{$numStr}),
@@ -28,8 +30,10 @@
     background-image: linear-gradient(
       135deg,
       var(--#{variables.$prefix}color-red-#{$numStr}),
+      var(--#{variables.$prefix}color-coral-#{$numStr}),
       var(--#{variables.$prefix}color-orange-#{$numStr}),
       var(--#{variables.$prefix}color-yellow-#{$numStr}),
+      var(--#{variables.$prefix}color-lime-#{$numStr}),
       var(--#{variables.$prefix}color-green-#{$numStr}),
       var(--#{variables.$prefix}color-cyan-#{$numStr}),
       var(--#{variables.$prefix}color-blue-#{$numStr}),
@@ -64,10 +68,14 @@
 }
 
 @mixin highlighter($colorName, $numStr) {
-  background: linear-gradient(
-    transparent 66.66%,
-    var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
-  ) !important;
+  @if ($colorName == "rainbow") {
+    // not available
+  } @else {
+    background: linear-gradient(
+      transparent 66.66%,
+      var(--#{variables.$prefix}color-#{$colorName}-#{$numStr}) 33.33%
+    ) !important;
+  }
 }
 
 @mixin colorUtilities($colorScheme: "") {
@@ -286,34 +294,9 @@
     }
     //#endregion backcolor
 
-    // bordercolor is not available
+    // NOTE: bordercolor is not available
 
-    // highlighter is not available
-    .highlighter#{$derived}-rainbow-#{$numStr} {
-      @include highlighter("rainbow", $numStr);
-    }
-    .highlighter#{$derived}-hover-rainbow-#{$numStr} {
-      &:hover {
-        @include highlighter("rainbow", $numStr);
-      }
-    }
-    .highlighter#{$derived}-rainbow-focus-#{$numStr} {
-      &:focus {
-        @include highlighter("rainbow", $numStr);
-      }
-    }
-    .highlighter#{$derived}-rainbow-active-#{$numStr} {
-      &:active {
-        @include highlighter("rainbow", $numStr);
-      }
-    }
-    .highlighter#{$derived}-rainbow-disabled-#{$numStr} {
-      &[disabled],
-      fieldset[disabled] {
-        @include highlighter("rainbow", $numStr);
-      }
-    }
-    //#endregion highlighter
+    // NOTE: highlighter is not available
   }
   //#endregion rainbow
 }

package/src/variables/color.scss

@@ -17,7 +17,8 @@ $color-chroma-colorful-offset-darker: 0 !default;
 
 $color-hue-gray: 277 !default;
 $color-hue-red: 17 !default;
-$color-hue-orange: 57 !default;
+$color-hue-coral: 57 !default;
+$color-hue-orange: 77 !default;
 $color-hue-yellow: 107 !default;
 $color-hue-lime: 127 !default;
 $color-hue-green: 157 !default;
@@ -1334,6 +1335,10 @@ $colors: (
     "name": "red",
     "hue": $color-hue-red,
   ),
+  (
+    "name": "coral",
+    "hue": $color-hue-coral,
+  ),
   (
     "name": "orange",
     "hue": $color-hue-orange,