noctemyth 0.0.36

package/src/components/dialogue.scss

@@ -0,0 +1,452 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+@mixin dialogue-message-arrow-base() {
+  &::after,
+  &::before {
+    border-top-color: transparent;
+    border-top-style: solid;
+    border-top-width: calc(
+      var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
+    );
+    border-bottom-color: transparent;
+    border-bottom-style: solid;
+    border-bottom-width: calc(
+      var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
+    );
+    content: "";
+    display: block;
+    height: 0;
+    position: absolute;
+    top: var(--#{variables.$prefix}dialogue-messege-arrow-top-offset);
+    right: auto;
+    width: 0;
+    z-index: -1;
+  }
+}
+
+.dialogue {
+  @include mixins.element();
+  --#{variables.$prefix}dialogue-avatar-size: var(
+    --#{variables.$prefix}dialogue-avatar-size-default
+  );
+  --#{variables.$prefix}dialogue-border-width: var(
+    --#{variables.$prefix}border-width-medium
+  );
+  --#{variables.$prefix}dialogue-messege-top-offset: calc(
+    (
+        var(--#{variables.$prefix}dialogue-name-padding-y) * 2 +
+          var(--#{variables.$prefix}dialogue-border-width) * 2 +
+          var(--#{variables.$prefix}dialogue-name-font-size)
+      ) / 2
+  );
+  --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
+    (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
+      (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
+      (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
+      var(--#{variables.$prefix}dialogue-avatar-top-offset) +
+      (var(--#{variables.$prefix}dialogue-avatar-size) / 2)
+  );
+  --#{variables.$prefix}dialogue-name-text-shadow-inner-color: var(
+    --#{variables.$prefix}color-default-dialogue-name-back
+  );
+  --#{variables.$prefix}dialogue-name-text-shadow-outer-color: var(
+    --#{variables.$prefix}color-default-dialogue-name-shadow
+  );
+  --#{variables.$prefix}dialogue-name-text-shadow-inner-width: 0.1rem;
+  --#{variables.$prefix}dialogue-name-text-shadow-outer-width: 0.2rem;
+
+  display: flex;
+  max-width: 100%;
+  margin: 0;
+  padding-bottom: var(--#{variables.$prefix}dialogue-messege-top-offset);
+  position: relative;
+  width: 100%;
+  &.is-avatar-small {
+    --#{variables.$prefix}dialogue-avatar-size: var(
+      --#{variables.$prefix}dialogue-avatar-size-small
+    );
+  }
+  &.is-avatar-large {
+    --#{variables.$prefix}dialogue-avatar-size: var(
+      --#{variables.$prefix}dialogue-avatar-size-large
+    );
+  }
+  &.is-avatar-circle {
+    --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
+      (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
+        (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
+        (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
+        var(--#{variables.$prefix}dialogue-avatar-top-offset) +
+        (
+          var(--#{variables.$prefix}dialogue-avatar-size) +
+            var(--#{variables.$prefix}dialogue-border-width) * 2
+        ) / 2
+    );
+    > .dialogue-avatar-container {
+      > .dialogue-avatar {
+        background-color: var(
+          --#{variables.$prefix}color-default-dialogue-avatar-back
+        );
+        border-color: var(
+          --#{variables.$prefix}color-default-dialogue-avatar-border
+        );
+        border-style: solid;
+        border-width: var(--#{variables.$prefix}dialogue-border-width);
+        border-radius: var(--#{variables.$prefix}border-radius-circle);
+      }
+    }
+  }
+
+  @each $borderWidth in variables.$borderWidths {
+    $name: map.get($borderWidth, "name");
+    &.is-border-width-#{$name} {
+      --#{variables.$prefix}dialogue-border-width: var(
+        --#{variables.$prefix}border-width-#{$name}
+      );
+    }
+  }
+
+  > .dialogue-avatar-container,
+  > .dialogue-content-container {
+    @include mixins.element();
+    display: block;
+    max-width: 100%;
+    margin: 0;
+    position: relative;
+  }
+  > .dialogue-avatar-container {
+    height: auto;
+    flex: 0 0 var(--#{variables.$prefix}dialogue-avatar-size);
+    padding-top: var(--#{variables.$prefix}dialogue-avatar-top-offset);
+    > .dialogue-avatar {
+      @include mixins.element();
+      aspect-ratio: 1;
+      display: block;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      width: var(--#{variables.$prefix}dialogue-avatar-size);
+      margin: 0 auto;
+      overflow: hidden;
+    }
+  }
+  > .dialogue-content-container {
+    flex: 1 1 auto;
+    min-height: calc(var(--#{variables.$prefix}dialogue-avatar-size) + 1.5rem);
+    > .dialogue-name,
+    > .dialogue-message {
+      min-height: 1rem;
+      border-radius: var(--#{variables.$prefix}border-radius-medium);
+      border-style: solid;
+      border-width: var(--#{variables.$prefix}dialogue-border-width);
+    }
+    > .dialogue-name {
+      @include mixins.element();
+      background-color: var(
+        --#{variables.$prefix}color-default-dialogue-name-back
+      );
+      border-color: var(
+        --#{variables.$prefix}color-default-dialogue-name-border
+      );
+      color: var(--#{variables.$prefix}color-default-dialogue-name-fore);
+      font-size: var(--#{variables.$prefix}dialogue-name-font-size);
+      position: absolute;
+      top: 0;
+      padding: var(--#{variables.$prefix}dialogue-name-padding-y)
+        var(--#{variables.$prefix}dialogue-name-padding-x);
+      font-weight: var(--#{variables.$prefix}font-weight-bold);
+      z-index: 1;
+      &.has-text-shadow {
+        text-shadow: var(
+              --#{variables.$prefix}dialogue-name-text-shadow-inner-width
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) 0
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          0 var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            0 var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          0
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-inner-color),
+          var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) 0
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          0 var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            0 var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color),
+          0
+            calc(
+              var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width) *
+                -1
+            )
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-width)
+            var(--#{variables.$prefix}dialogue-name-text-shadow-outer-color);
+      }
+    }
+    > .dialogue-message {
+      @include mixins.element();
+      background-color: var(
+        --#{variables.$prefix}color-default-dialogue-message-back
+      );
+      border-color: var(
+        --#{variables.$prefix}color-default-dialogue-message-border
+      );
+      color: var(--#{variables.$prefix}color-default-dialogue-message-fore);
+      position: relative;
+      top: var(--#{variables.$prefix}dialogue-messege-top-offset);
+      padding-top: calc(
+        var(--#{variables.$prefix}dialogue-messege-top-offset) / 2
+      );
+      width: auto;
+      z-index: 0;
+      > .dialogue-message-inner {
+        padding: var(--#{variables.$prefix}dialogue-message-inner-padding-y)
+          var(--#{variables.$prefix}dialogue-message-inner-padding-x);
+      }
+    }
+  }
+
+  &.is-left {
+    > .dialogue-content-container {
+      > .dialogue-name {
+        right: auto;
+        left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      }
+      padding-left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      > .dialogue-message {
+        right: auto;
+        @include dialogue-message-arrow-base();
+        &::after,
+        &::before {
+          border-left: none;
+          right: auto;
+        }
+        &::before {
+          border-right-color: var(
+            --#{variables.$prefix}color-default-dialogue-message-border
+          );
+          border-right-width: var(
+            --#{variables.$prefix}dialogue-messege-arrow-width
+          );
+          border-right-style: solid;
+          left: calc(
+            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
+          );
+        }
+        &::after {
+          border-right-color: var(
+            --#{variables.$prefix}color-default-dialogue-message-back
+          );
+          border-right-width: var(
+            --#{variables.$prefix}dialogue-messege-arrow-width
+          );
+          border-right-style: solid;
+          left: calc(
+            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
+              var(--#{variables.$prefix}dialogue-border-width) * 2
+          );
+        }
+      }
+    }
+  }
+  &.is-right {
+    > .dialogue-content-container {
+      padding-right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      > .dialogue-name {
+        left: auto;
+        right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      }
+      > .dialogue-message {
+        left: auto;
+        @include dialogue-message-arrow-base();
+        &::after,
+        &::before {
+          border-right: none;
+          left: auto;
+        }
+        &::before {
+          border-left-color: var(
+            --#{variables.$prefix}color-default-dialogue-message-border
+          );
+          border-left-width: var(
+            --#{variables.$prefix}dialogue-messege-arrow-width
+          );
+          border-left-style: solid;
+          right: calc(
+            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
+          );
+        }
+        &::after {
+          border-left-color: var(
+            --#{variables.$prefix}color-default-dialogue-message-back
+          );
+          border-left-width: var(
+            --#{variables.$prefix}dialogue-messege-arrow-width
+          );
+          border-left-style: solid;
+          right: calc(
+            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
+              var(--#{variables.$prefix}dialogue-border-width) * 2
+          );
+        }
+      }
+    }
+  }
+  @each $border-style in variables.$borderStyles {
+    &.is-border-style-#{$border-style} {
+      &.is-avatar-circle {
+        > .dialogue-avatar-container {
+          > .dialogue-avatar {
+            border-style: #{$border-style};
+          }
+        }
+      }
+      > .dialogue-content-container {
+        > .dialogue-name,
+        > .dialogue-message {
+          border-style: #{$border-style};
+        }
+      }
+    }
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        > .dialogue-avatar-container {
+          > .dialogue-avatar {
+            background-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
+            );
+            border-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
+            );
+          }
+        }
+        > .dialogue-content-container {
+          > .dialogue-name {
+            background-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
+            );
+            border-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
+            );
+            color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
+            );
+            &.has-text-shadow {
+              --#{variables.$prefix}dialogue-name-text-shadow-inner-color: var(
+                --#{variables.$prefix}-color-#{$colorName}-dialogue-name-back
+              );
+              --#{variables.$prefix}dialogue-name-text-shadow-outer-color: var(
+                --#{variables.$prefix}-color-#{$colorName}-dialogue-name-shadow
+              );
+            }
+          }
+          > .dialogue-message {
+            background-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
+            );
+            border-color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
+            );
+            color: var(
+              --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
+            );
+            &::after {
+              border-right-color: var(
+                --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
+              );
+              border-left-color: var(
+                --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
+              );
+            }
+            &::before {
+              border-right-color: var(
+                --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
+              );
+              border-left-color: var(
+                --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/div.scss

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

package/src/components/footer.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+.footer {
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}color-default-footer-back);
+  color: var(--#{variables.$prefix}color-default-footer-fore);
+  padding: 2rem 0;
+  bottom: 0;
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: var(--#{variables.$prefix}color-#{$colorName}-footer-back);
+        color: var(--#{variables.$prefix}color-#{$colorName}-footer-fore);
+      }
+    }
+  }
+}

package/src/components/hamburger.scss

@@ -0,0 +1,157 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+
+$hamburger-size: 3.5rem;
+$hamburger-line-height: 0.2rem;
+$hamburger-line-color: var(--#{variables.$prefix}color-default-border);
+
+.hamburger {
+  color: var(--#{variables.$prefix}color-default-fore);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-block;
+  height: $hamburger-size;
+  position: relative;
+  touch-action: manipulation;
+  user-select: none;
+  width: $hamburger-size;
+  .crown,
+  .upperpatty,
+  .club,
+  .lowerpatty,
+  .heel {
+    display: inline-block;
+    opacity: 1;
+    position: absolute;
+    transform-origin: center;
+    left: 0;
+    margin: 0 auto;
+    right: 0;
+  }
+  .crown {
+    font-size: 0.5em;
+    line-height: 1;
+    text-align: center;
+    top: 0.25em;
+    width: $hamburger-size;
+  }
+  .upperpatty {
+    animation: hamburger-upperpatty .75s forwards;
+    background-color: $hamburger-line-color;
+    height: $hamburger-line-height;
+    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
+    width: calc(#{$hamburger-size} / 5 * 3);
+  }
+  .club {
+    background-color: $hamburger-line-color;
+    height: $hamburger-line-height;
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+    transition: all .25s .25s;
+    width: calc(#{$hamburger-size} / 5 * 3);
+  }
+  .lowerpatty {
+    animation: hamburger-lowerpatty .75s forwards;
+    background-color: $hamburger-line-color;
+    height: $hamburger-line-height;
+    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size}/ 5) + 50%);
+    width: calc(#{$hamburger-size} / 5 * 3);
+  }
+  .heel {
+    bottom: 0.5em;
+    font-size: 0.5em;
+    line-height: 1;
+    text-align: center;
+    width: $hamburger-size;
+  }
+  &.is-active {
+    .upperpatty {
+      animation: hamburger-upperpatty-is-active .75s forwards;
+      top: 50%;
+    }
+    .club {
+      opacity: 0;
+    }
+    .lowerpatty {
+      animation: hamburger-lowerpatty-is-active .75s forwards;
+      top: 50%;
+    }
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        color: var(--#{variables.$prefix}color-#{$colorName}-fore);
+        .upperpatty {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
+        }
+        .club {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
+        }
+        .lowerpatty {
+          background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
+        }
+      }
+    }
+  }
+}
+
+//#region keyframes
+@keyframes hamburger-upperpatty {
+  0% {
+    transform: rotate(45deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  50% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  100% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
+  }
+}
+
+@keyframes hamburger-upperpatty-is-active{
+  0% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
+  }
+  50% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  100%{
+    transform: rotate(45deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+}
+@keyframes hamburger-lowerpatty {
+  0% {
+    transform: rotate(-45deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  50% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  100% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
+  }
+}
+@keyframes hamburger-lowerpatty-is-active {
+  0% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
+  }
+  50% {
+    transform: rotate(0deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+  100% {
+    transform: rotate(-45deg);
+    top: calc((-1 * #{$hamburger-line-height}) + 50%);
+  }
+}
+//#endregion keyframes

package/src/components/header.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+
+.header {
+  @include mixins.element();
+  display: block;
+  width: 100%;
+  backdrop-filter: var(--#{variables.$prefix}header-backdrop-filter);
+
+  &.is-sticky {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: var(--#{variables.$prefix}header-z-index-is-sticky);
+  }
+
+  &.is-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: var(--#{variables.$prefix}header-z-index-is-fixed);
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        background-color: oklch(var(--#{variables.$prefix}color-#{$colorName}-header-back-oklch) / 0.5);
+        color: var(--#{variables.$prefix}color-#{$colorName}-header-fore);
+      }
+    }
+  }
+}