noctemyth 0.2.0 → 1.0.0

package/src/components/dialogue.scss

@@ -8,104 +8,144 @@
     border-top-color: transparent;
     border-top-style: solid;
     border-top-width: calc(
-      var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
+      var(--#{variables.$prefix}dialogue-message-arrow-height) / 2
     );
     border-bottom-color: transparent;
     border-bottom-style: solid;
     border-bottom-width: calc(
-      var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
+      var(--#{variables.$prefix}dialogue-message-arrow-height) / 2
     );
     content: "";
     display: block;
     height: 0;
     position: absolute;
-    top: var(--#{variables.$prefix}dialogue-messege-arrow-top-offset);
+    top: var(--#{variables.$prefix}dialogue-message-arrow-top-offset);
     right: auto;
     width: 0;
     z-index: -1;
   }
 }
 
-.dialogue {
-  @include mixins.element();
+:where(.dialogue) {
+  //#region local css variables
+  --#{variables.$prefix}dialogue-color-fore: var(
+    --#{variables.$prefix}color-default-dialogue-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}dialogue-color-back: var(
+    --#{variables.$prefix}color-default-dialogue-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}dialogue-color-border: var(
+    --#{variables.$prefix}color-default-dialogue-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+  --#{variables.$prefix}dialogue-color-selection-fore: var(
+    --#{variables.$prefix}color-default-dialogue-selection-fore,
+    var(--#{variables.$prefix}color-default-selection-fore)
+  );
+  --#{variables.$prefix}dialogue-color-selection-back: var(
+    --#{variables.$prefix}color-default-dialogue-selection-back,
+    var(--#{variables.$prefix}color-default-selection-back)
+  );
+
+  --#{variables.$prefix}dialogue-avatar-color-back: var(
+    --#{variables.$prefix}color-default-dialogue-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}dialogue-avatar-color-border: var(
+    --#{variables.$prefix}color-default-dialogue-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+  --#{variables.$prefix}dialogue-name-color-fore: var(
+    --#{variables.$prefix}color-default-dialogue-name-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}dialogue-name-color-back: var(
+    --#{variables.$prefix}color-default-dialogue-name-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}dialogue-name-color-border: var(
+    --#{variables.$prefix}color-default-dialogue-name-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+  --#{variables.$prefix}dialogue-message-color-fore: var(
+    --#{variables.$prefix}color-default-dialogue-message-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}dialogue-message-color-back: var(
+    --#{variables.$prefix}color-default-dialogue-message-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}dialogue-message-color-border: var(
+    --#{variables.$prefix}color-default-dialogue-message-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+
   --#{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(
+  --#{variables.$prefix}dialogue-message-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
+      ) /
+      2
   );
-  --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
-    (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
+  --#{variables.$prefix}dialogue-message-arrow-top-offset: calc(
+    (-1 * var(--#{variables.$prefix}dialogue-message-top-offset)) +
       (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
-      (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
+      (-1 * var(--#{variables.$prefix}dialogue-message-arrow-height) / 2) +
       var(--#{variables.$prefix}dialogue-avatar-top-offset) +
       (var(--#{variables.$prefix}dialogue-avatar-size) / 2)
   );
+  --#{variables.$prefix}dialogue-border-radius: var(
+    --#{variables.$prefix}border-radius-medium
+  );
+  --#{variables.$prefix}dialogue-border-style: solid;
+  //#endregion local css variables
 
+  @include mixins.element();
   display: flex;
   max-width: 100%;
-  margin: 0;
-  padding-bottom: var(--#{variables.$prefix}dialogue-messege-top-offset);
+  padding-bottom: var(--#{variables.$prefix}dialogue-message-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
-    );
+
+  &::selection {
+    color: var(--#{variables.$prefix}dialogue-color-selection-fore);
+    background-color: var(--#{variables.$prefix}dialogue-color-selection-back);
   }
+
   &.is-avatar-circle {
-    --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
-      (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
+    --#{variables.$prefix}dialogue-message-arrow-top-offset: calc(
+      (-1 * var(--#{variables.$prefix}dialogue-message-top-offset)) +
         (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
-        (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
+        (-1 * var(--#{variables.$prefix}dialogue-message-arrow-height) / 2) +
         var(--#{variables.$prefix}dialogue-avatar-top-offset) +
         (
           var(--#{variables.$prefix}dialogue-avatar-size) +
             var(--#{variables.$prefix}dialogue-border-width) * 2
-        ) / 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);
+        user-select: none;
       }
     }
   }
 
-  @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 {
@@ -115,6 +155,7 @@
     > .dialogue-avatar {
       @include mixins.element();
       aspect-ratio: 1;
+      background-color: var(--#{variables.$prefix}dialogue-avatar-color-back);
       display: block;
       align-items: center;
       justify-content: center;
@@ -122,6 +163,11 @@
       width: var(--#{variables.$prefix}dialogue-avatar-size);
       margin: 0 auto;
       overflow: hidden;
+      &.has-border {
+        border-color: var(--#{variables.$prefix}dialogue-avatar-color-border);
+        border-style: var(--#{variables.$prefix}dialogue-border-style);
+        border-width: var(--#{variables.$prefix}dialogue-border-width);
+      }
     }
   }
   > .dialogue-content-container {
@@ -130,19 +176,15 @@
     > .dialogue-name,
     > .dialogue-message {
       min-height: 1rem;
-      border-radius: var(--#{variables.$prefix}border-radius-medium);
-      border-style: solid;
+      border-radius: var(--#{variables.$prefix}dialogue-border-radius);
       border-width: var(--#{variables.$prefix}dialogue-border-width);
+      border-style: var(--#{variables.$prefix}dialogue-border-style);
     }
     > .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);
+      background-color: var(--#{variables.$prefix}dialogue-name-color-back);
+      border-color: var(--#{variables.$prefix}dialogue-name-color-border);
+      color: var(--#{variables.$prefix}dialogue-name-color-fore);
       font-size: var(--#{variables.$prefix}dialogue-name-font-size);
       position: absolute;
       top: 0;
@@ -153,17 +195,13 @@
     }
     > .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);
+      background-color: var(--#{variables.$prefix}dialogue-message-color-back);
+      border-color: var(--#{variables.$prefix}dialogue-message-color-border);
+      color: var(--#{variables.$prefix}dialogue-message-color-fore);
       position: relative;
-      top: var(--#{variables.$prefix}dialogue-messege-top-offset);
+      top: var(--#{variables.$prefix}dialogue-message-top-offset);
       padding-top: calc(
-        var(--#{variables.$prefix}dialogue-messege-top-offset) / 2
+        var(--#{variables.$prefix}dialogue-message-top-offset) / 2
       );
       width: auto;
       z-index: 0;
@@ -178,9 +216,9 @@
     > .dialogue-content-container {
       > .dialogue-name {
         right: auto;
-        left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+        left: var(--#{variables.$prefix}dialogue-message-arrow-width);
       }
-      padding-left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      padding-left: var(--#{variables.$prefix}dialogue-message-arrow-width);
       > .dialogue-message {
         right: auto;
         @include dialogue-message-arrow-base();
@@ -191,26 +229,26 @@
         }
         &::before {
           border-right-color: var(
-            --#{variables.$prefix}color-default-dialogue-message-border
+            --#{variables.$prefix}dialogue-message-color-border
           );
           border-right-width: var(
-            --#{variables.$prefix}dialogue-messege-arrow-width
+            --#{variables.$prefix}dialogue-message-arrow-width
           );
           border-right-style: solid;
           left: calc(
-            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
+            (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width))
           );
         }
         &::after {
           border-right-color: var(
-            --#{variables.$prefix}color-default-dialogue-message-back
+            --#{variables.$prefix}dialogue-message-color-back
           );
           border-right-width: var(
-            --#{variables.$prefix}dialogue-messege-arrow-width
+            --#{variables.$prefix}dialogue-message-arrow-width
           );
           border-right-style: solid;
           left: calc(
-            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
+            (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width)) +
               var(--#{variables.$prefix}dialogue-border-width) * 2
           );
         }
@@ -219,10 +257,10 @@
   }
   &.is-right {
     > .dialogue-content-container {
-      padding-right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+      padding-right: var(--#{variables.$prefix}dialogue-message-arrow-width);
       > .dialogue-name {
         left: auto;
-        right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
+        right: var(--#{variables.$prefix}dialogue-message-arrow-width);
       }
       > .dialogue-message {
         left: auto;
@@ -234,104 +272,117 @@
         }
         &::before {
           border-left-color: var(
-            --#{variables.$prefix}color-default-dialogue-message-border
+            --#{variables.$prefix}dialogue-message-color-border
           );
           border-left-width: var(
-            --#{variables.$prefix}dialogue-messege-arrow-width
+            --#{variables.$prefix}dialogue-message-arrow-width
           );
           border-left-style: solid;
           right: calc(
-            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
+            (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width))
           );
         }
         &::after {
           border-left-color: var(
-            --#{variables.$prefix}color-default-dialogue-message-back
+            --#{variables.$prefix}dialogue-message-color-back
           );
           border-left-width: var(
-            --#{variables.$prefix}dialogue-messege-arrow-width
+            --#{variables.$prefix}dialogue-message-arrow-width
           );
           border-left-style: solid;
           right: calc(
-            (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
+            (-1 * var(--#{variables.$prefix}dialogue-message-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};
-          }
-        }
+
+  @if (not variables.$is-skelton) {
+    &.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
+      );
+    }
+
+    @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-content-container {
-        > .dialogue-name,
-        > .dialogue-message {
-          border-style: #{$border-style};
-        }
+    }
+
+    @each $border-style in variables.$borderStyles {
+      &.is-border-style-#{$border-style} {
+        --#{variables.$prefix}dialogue-border-style: #{$border-style};
       }
     }
-  }
 
-  @if (not variables.$is-skelton) {
-    @each $color in variables.$colors {
+
+    @each $color in variables.$allColors {
       $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
-            );
-          }
-          > .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
-              );
-            }
-          }
-        }
+        --#{variables.$prefix}dialogue-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}dialogue-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}dialogue-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
+        --#{variables.$prefix}dialogue-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}dialogue-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+
+        --#{variables.$prefix}dialogue-avatar-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}dialogue-avatar-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
+        --#{variables.$prefix}dialogue-name-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}dialogue-name-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-name-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}dialogue-name-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-name-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
+        --#{variables.$prefix}dialogue-message-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}dialogue-message-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-message-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}dialogue-message-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-dialogue-message-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
       }
     }
   }

package/src/components/div.scss

@@ -2,6 +2,6 @@
 @use "../variables/index.scss" as variables;
 @use "../mixins/index.scss" as mixins;
 
-.div {
+:where(.div) {
   @include mixins.element();
 }

package/src/components/figure.scss

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../icons/index.scss" as icons;
+@use "../mixins/index.scss" as mixins;
+
+:where(.figure) {
+  --#{variables.$prefix}figure-color-fore: var(
+    --#{variables.$prefix}color-default-figure-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-color-back: var(
+    --#{variables.$prefix}color-default-figure-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-color-border: var(
+    --#{variables.$prefix}color-default-figure-border,
+    var(--#{variables.$prefix}color-default-border)
+  );
+
+  --#{variables.$prefix}figure-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-selection-fore,
+    var(--#{variables.$prefix}color-default-selection-fore)
+  );
+  --#{variables.$prefix}figure-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-selection-back,
+    var(--#{variables.$prefix}color-default-selection-back)
+  );
+
+  --#{variables.$prefix}figure-content-color-fore: var(
+    --#{variables.$prefix}color-default-figure-content-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-content-color-back: var(
+    --#{variables.$prefix}color-default-figure-content-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-content-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-content-selection-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-content-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-content-selection-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+
+  --#{variables.$prefix}figure-caption-color-fore: var(
+    --#{variables.$prefix}color-default-figure-caption-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-caption-color-back: var(
+    --#{variables.$prefix}color-default-figure-caption-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+  --#{variables.$prefix}figure-caption-color-selection-fore: var(
+    --#{variables.$prefix}color-default-figure-caption-selection-fore,
+    var(--#{variables.$prefix}color-default-fore)
+  );
+  --#{variables.$prefix}figure-caption-color-selection-back: var(
+    --#{variables.$prefix}color-default-figure-caption-selection-back,
+    var(--#{variables.$prefix}color-default-back)
+  );
+
+  @include mixins.element();
+  background-color: var(--#{variables.$prefix}figure-color-back);
+  border-color: var(--#{variables.$prefix}figure-color-border);
+  border-style: none;
+  border-width: var(--#{variables.$prefix}border-width-medium);
+  color: var(--#{variables.$prefix}figure-color-fore);
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  padding: 0.25rem;
+
+  &::selection {
+    color: var(--#{variables.$prefix}figure-color-selection-fore);
+    background-color: var(--#{variables.$prefix}figure-color-selection-back);
+  }
+
+  > :where(.figure-content) {
+    @include mixins.element();
+    background-color: var(--#{variables.$prefix}figure-content-color-back);
+    color: var(--#{variables.$prefix}figure-content-color-fore);
+    display: block;
+    width: 100%;
+    height: auto;
+    &::selection {
+      color: var(--#{variables.$prefix}figure-content-color-selection-fore);
+      background-color: var(--#{variables.$prefix}figure-content-color-selection-back);
+    }
+  }
+
+  > :where(.figure-caption) {
+    @include mixins.element();
+    display: block;
+    background-color: var(--#{variables.$prefix}figure-caption-color-back);
+    color: var(--#{variables.$prefix}figure-caption-color-fore);
+    font-size: var(--#{variables.$prefix}font-size-small);
+    width: 100%;
+    &:first-child {
+      padding-bottom: 0.25rem;
+    }
+    &:last-child {
+      padding-top: 0.25rem;
+    }
+    &::selection {
+      color: var(--#{variables.$prefix}figure-caption-color-selection-fore);
+      background-color: var(--#{variables.$prefix}figure-caption-color-selection-back);
+    }
+  }
+
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$allColors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        --#{variables.$prefix}figure-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-color-border: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-border,
+          var(--#{variables.$prefix}color-#{$colorName}-border)
+        );
+
+        --#{variables.$prefix}figure-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+
+        --#{variables.$prefix}figure-content-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-content-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-content-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-content-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-content-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+
+        --#{variables.$prefix}figure-caption-color-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-fore)
+        );
+        --#{variables.$prefix}figure-caption-color-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-back,
+          var(--#{variables.$prefix}color-#{$colorName}-back)
+        );
+        --#{variables.$prefix}figure-caption-color-selection-fore: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-fore,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
+        );
+        --#{variables.$prefix}figure-caption-color-selection-back: var(
+          --#{variables.$prefix}color-#{$colorName}-figure-caption-selection-back,
+          var(--#{variables.$prefix}color-#{$colorName}-selection-back)
+        );
+      }
+    }
+  }
+}