npm - noctemyth - Versions diffs - 0.0.36 - Mend

noctemyth 0.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/LICENSE +21 -0
package/README.md +60 -0
package/dist/css/noctemyth-skelton.css +11880 -0
package/dist/css/noctemyth-skelton.css.map +1 -0
package/dist/css/noctemyth-skelton.min.css +11880 -0
package/dist/css/noctemyth-skelton.min.css.map +1 -0
package/dist/css/noctemyth-utilities.css +142390 -0
package/dist/css/noctemyth-utilities.css.map +1 -0
package/dist/css/noctemyth-utilities.min.css +142390 -0
package/dist/css/noctemyth-utilities.min.css.map +1 -0
package/dist/css/noctemyth.css +51864 -0
package/dist/css/noctemyth.css.map +1 -0
package/dist/css/noctemyth.min.css +26439 -0
package/dist/css/noctemyth.min.css.map +1 -0
package/package.json +61 -0
package/src/animations/fade.scss +41 -0
package/src/animations/index.scss +1 -0
package/src/backgrounds/dot.scss +55 -0
package/src/backgrounds/gingham.scss +56 -0
package/src/backgrounds/index.scss +5 -0
package/src/backgrounds/rhombus.scss +49 -0
package/src/backgrounds/stripe.scss +45 -0
package/src/backgrounds/zigzag.scss +71 -0
package/src/base/dub.scss +9 -0
package/src/base/element.scss +5 -0
package/src/base/index.scss +3 -0
package/src/base/normalize.scss +394 -0
package/src/components/accordion.scss +179 -0
package/src/components/badge.scss +109 -0
package/src/components/blockquote.scss +92 -0
package/src/components/breadcrumbs.scss +47 -0
package/src/components/button.scss +157 -0
package/src/components/card.scss +89 -0
package/src/components/dialogue.scss +452 -0
package/src/components/div.scss +7 -0
package/src/components/footer.scss +21 -0
package/src/components/hamburger.scss +157 -0
package/src/components/header.scss +36 -0
package/src/components/heading.scss +40 -0
package/src/components/image.scss +10 -0
package/src/components/index.scss +26 -0
package/src/components/input.scss +338 -0
package/src/components/label.scss +17 -0
package/src/components/link.scss +29 -0
package/src/components/list.scss +16 -0
package/src/components/loader.scss +72 -0
package/src/components/main.scss +8 -0
package/src/components/message.scss +53 -0
package/src/components/modal.scss +41 -0
package/src/components/nav.scss +387 -0
package/src/components/paragraph.scss +12 -0
package/src/components/progress.scss +43 -0
package/src/components/section.scss +7 -0
package/src/components/span.scss +7 -0
package/src/css-variables/animation.scss +11 -0
package/src/css-variables/border.scss +16 -0
package/src/css-variables/color.scss +604 -0
package/src/css-variables/components/breadcrumbs.scss +5 -0
package/src/css-variables/components/button.scss +6 -0
package/src/css-variables/components/dialogue.scss +15 -0
package/src/css-variables/components/header.scss +7 -0
package/src/css-variables/components/heading.scss +5 -0
package/src/css-variables/components/index.scss +5 -0
package/src/css-variables/index.scss +7 -0
package/src/css-variables/miscellaneous.scss +8 -0
package/src/css-variables/typography.scss +24 -0
package/src/functions/index.scss +1 -0
package/src/functions/string.scss +31 -0
package/src/icons/check.scss +21 -0
package/src/icons/chevron.scss +30 -0
package/src/icons/index.scss +2 -0
package/src/layouts/centering.scss +13 -0
package/src/layouts/columns.scss +97 -0
package/src/layouts/container.scss +59 -0
package/src/layouts/index.scss +3 -0
package/src/mixins/animation.scss +80 -0
package/src/mixins/color.scss +33 -0
package/src/mixins/element.scss +5 -0
package/src/mixins/index.scss +5 -0
package/src/mixins/responsive.scss +222 -0
package/src/noctemyth-skelton.scss +12 -0
package/src/noctemyth-utilities.scss +3 -0
package/src/noctemyth.scss +9 -0
package/src/utilities/border.scss +46 -0
package/src/utilities/color.scss +327 -0
package/src/utilities/decoration.scss +16 -0
package/src/utilities/index.scss +7 -0
package/src/utilities/positioning.scss +90 -0
package/src/utilities/sizing.scss +142 -0
package/src/utilities/spacing.scss +154 -0
package/src/utilities/typography.scss +109 -0
package/src/variables/animation.scss +8 -0
package/src/variables/border.scss +81 -0
package/src/variables/color.scss +1371 -0
package/src/variables/components/breadcrumbs.scss +3 -0
package/src/variables/components/button.scss +3 -0
package/src/variables/components/dialogue.scss +12 -0
package/src/variables/components/header.scss +3 -0
package/src/variables/components/heading.scss +3 -0
package/src/variables/components/index.scss +5 -0
package/src/variables/index.scss +8 -0
package/src/variables/layout.scss +28 -0
package/src/variables/miscellaneous.scss +14 -0
package/src/variables/typography.scss +26 -0

package/src/components/nav.scss ADDED Viewed

@@ -0,0 +1,387 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.nav {
+  @include mixins.element();
+  min-height: 4rem;
+  padding: 0.25rem 0;
+  .nav-static {
+    @include mixins.element();
+    @include mixins.add-responsible-visible() {
+      display: flex;
+      .nav-brand {
+        @include mixins.element();
+        display: flex;
+        flex-basis: 0;
+        flex-grow: 1;
+        flex-shrink: 1;
+        max-width: 100%;
+        margin: auto;
+        position: relative;
+        .nav-brand-left,
+        .nav-brand-center,
+        .nav-brand-right,
+        .left,
+        .center,
+        .right {
+          @include mixins.element();
+          display: block;
+          flex-basis: 0;
+          flex-grow: 1;
+          flex-shrink: 1;
+          max-width: 100%;
+          margin: auto;
+          position: relative;
+        }
+        .nav-brand-left,
+        .left {
+          margin: auto auto auto 0;
+          text-align: left;
+          flex-basis: 30%;
+          max-width: 30%;
+          width: 30%;
+        }
+        .nav-brand-right,
+        .right {
+          margin: auto 0 auto auto;
+          text-align: right;
+        }
+      }
+      .nav-menu {
+        @include mixins.element();
+        display: flex;
+        flex-basis: 0;
+        flex-grow: 1;
+        flex-shrink: 1;
+        max-width: 100%;
+        margin: auto;
+        position: relative;
+        .nav-menu-item {
+          @include mixins.element();
+          cursor: pointer;
+          display: block;
+          flex-basis: 0;
+          flex-grow: 1;
+          flex-shrink: 1;
+          line-height: 1.5;
+          margin: 0.25em;
+          max-width: 100%;
+          padding: 0.5rem;
+          position: relative;
+          text-decoration: none;
+          color: var(--#{variables.$prefix}color-default-fore);
+          text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+            2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+            0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+            0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
+          .icon {
+            @include mixins.element();
+            filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
+          }
+          &:hover {
+            color: var(--#{variables.$prefix}color-default-fore-hover);
+            text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
+            opacity: 0.8;
+            .icon {
+              filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
+            }
+          }
+          &:active {
+            color: var(--#{variables.$prefix}color-default-fore-active);
+            text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
+            .icon {
+              filter: drop-shadow(
+                  2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
+                )
+                drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
+                drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
+                drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
+            }
+          }
+        }
+      }
+    }
+  }
+  .nav-accordion {
+    @include mixins.element();
+    @include mixins.add-responsible-visible() {
+      display: block;
+      .nav-brand {
+        @include mixins.element();
+        display: flex;
+        .nav-brand-left,
+        .nav-brand-center,
+        .nav-brand-right,
+        .left,
+        .center,
+        .right {
+          @include mixins.element();
+          display: block;
+          flex-basis: 0;
+          flex-grow: 1;
+          flex-shrink: 1;
+          max-width: 100%;
+          margin: auto;
+          position: relative;
+        }
+        .nav-brand-left,
+        .left {
+          margin: auto auto auto 0;
+          text-align: left;
+        }
+        .nav-brand-center,
+        .center {
+          margin: auto;
+          text-align: center;
+        }
+        .nav-brand-right,
+        .right {
+          margin: auto 0 auto auto;
+          text-align: right;
+        }
+      }
+      .nav-menu {
+        @include mixins.element();
+        display: none;
+        padding: 0.5rem;
+        &.is-active {
+          display: block;
+        }
+        .nav-menu-item {
+          @include mixins.element();
+          color: var(--#{variables.$prefix}color-default-fore);
+          width: 100%;
+          display: block;
+          cursor: pointer;
+          line-height: 1.5;
+          margin: 0.25em 0;
+          max-width: 100%;
+          padding: 0.5rem;
+          position: relative;
+          text-decoration: none;
+          text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
+            2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+            0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
+            -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
+            0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
+          .icon {
+            filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
+              drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
+          }
+          &:hover {
+            color: var(--#{variables.$prefix}color-default-fore-hover);
+            text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
+              0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
+            .icon {
+              filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
+                drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
+            }
+          }
+          &:active {
+            color: var(--#{variables.$prefix}color-default-fore-active);
+            text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
+              0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
+            .icon {
+              filter: drop-shadow(
+                  2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
+                )
+                drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
+                drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
+                drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
+            }
+          }
+        }
+      }
+    }
+  }
+  @if (not variables.$is-skelton) {
+    @each $color in variables.$colors {
+      $colorName: map.get($color, "name");
+      &.is-#{$colorName} {
+        color: var(--#{variables.$prefix}color-#{$colorName}-fore);
+        .nav-accordion {
+          .nav-menu {
+            .nav-menu-item {
+              color: var(--#{variables.$prefix}color-#{$colorName}-fore);
+              text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
+              .icon {
+                filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
+              }
+              &:hover {
+                color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
+                text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
+                opacity: 0.8;
+                .icon {
+                  filter: drop-shadow(
+                      2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    )
+                    drop-shadow(
+                      -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    )
+                    drop-shadow(
+                      2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    )
+                    drop-shadow(
+                      -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    );
+                }
+              }
+              &:active {
+                color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
+                text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
+                .icon {
+                  filter: drop-shadow(
+                      2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    )
+                    drop-shadow(
+                      -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    )
+                    drop-shadow(
+                      2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    )
+                    drop-shadow(
+                      -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    );
+                }
+              }
+            }
+          }
+        }
+        .nav-static {
+          .nav-menu {
+            .nav-menu-item {
+              color: var(--#{variables.$prefix}color-#{$colorName}-fore);
+              text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
+                0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
+              .icon {
+                filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
+                  drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
+              }
+              &:hover {
+                color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
+                text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
+                  0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
+                opacity: 0.8;
+                .icon {
+                  filter: drop-shadow(
+                      2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    )
+                    drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
+                    drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
+                    drop-shadow(
+                      -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
+                    );
+                }
+              }
+              &:active {
+                color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
+                text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
+                  0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
+                .icon {
+                  filter: drop-shadow(
+                      2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    )
+                    drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
+                    drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
+                    drop-shadow(
+                      -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
+                    );
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/paragraph.scss ADDED Viewed

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.paragraph {
+  @include mixins.element();
+  line-height: 1.5;
+  display: block;
+  margin: 0;
+  margin-block: 0.5rem;
+  margin-inline: 0;
+}

package/src/components/progress.scss ADDED Viewed

@@ -0,0 +1,43 @@
+@use "sass:map";
+@use "../variables/index.scss" as variables;
+@use "../mixins/index.scss" as mixins;
+.progress {
+  @include mixins.element();
+  @include mixins.animation() {
+    border-radius: var(--#{variables.$prefix}border-radius-pill);
+    border-style: solid;
+    border-width: var(--#{variables.$prefix}border-width-thick);
+    background-color: var(--#{variables.$prefix}color-default-progress-back);
+    color: var(--#{variables.$prefix}color-default-progress-fore);
+    height: 1rem;
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      margin: 0.125rem;
+      inset: 0 100% 0 0;
+      border-radius: inherit;
+      background: currentColor;
+    }
+    @for $p from 0 through 100 {
+      &.is-#{$p}percent {
+        $val: ((100 - $p) * 1%);
+        &::before {
+          inset: 0 $val 0 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}-progress-back);
+          color: var(--#{variables.$prefix}color-#{$colorName}-progress-fore);
+        }
+      }
+    }
+  }
+}

package/src/components/section.scss ADDED Viewed

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

package/src/components/span.scss ADDED Viewed

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

package/src/css-variables/animation.scss ADDED Viewed

@@ -0,0 +1,11 @@
+@use "../variables/index.scss" as variables;
+:root {
+  --#{variables.$prefix}animation-speed-heavy: #{variables.$animation-speed-heavy};
+  --#{variables.$prefix}animation-speed-slower: #{variables.$animation-speed-slower};
+  --#{variables.$prefix}animation-speed-slow: #{variables.$animation-speed-slow};
+  --#{variables.$prefix}animation-speed-normal: #{variables.$animation-speed-normal};
+  --#{variables.$prefix}animation-speed-fast: #{variables.$animation-speed-fast};
+  --#{variables.$prefix}animation-speed-faster: #{variables.$animation-speed-faster};
+  --#{variables.$prefix}animation-speed-flash: #{variables.$animation-speed-flash};
+}

package/src/css-variables/border.scss ADDED Viewed

@@ -0,0 +1,16 @@
+@use "../variables/index.scss" as variables;
+@use "sass:map";
+:root {
+  @each $borderWidth in variables.$borderWidths {
+    $name: map.get($borderWidth, "name");
+    $value: map.get($borderWidth, "value");
+    --#{variables.$prefix}border-width-#{$name}: #{$value};
+  }
+  @each $borderRadius in variables.$borderRadiuses {
+    $name: map.get($borderRadius, "name");
+    $value: map.get($borderRadius, "value");
+    --#{variables.$prefix}border-radius-#{$name}: #{$value};
+  }
+}