noctemyth 0.0.36

package/src/utilities/spacing.scss

@@ -0,0 +1,154 @@
+@use "sass:string";
+@use "../functions/index.scss" as functions;
+
+.margin-auto,
+.m-auto {
+  margin: auto !important;
+}
+
+.margin-top-auto,
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.margin-right-auto,
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.margin-bottom-auto,
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.margin-left-auto,
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.margin-x-auto,
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.margin-y-auto,
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.padding-auto,
+.p-auto {
+  padding: auto !important;
+}
+
+.padding-top-auto,
+.pt-auto {
+  padding-top: auto !important;
+}
+
+.padding-right-auto,
+.pr-auto {
+  padding-right: auto !important;
+}
+
+.padding-bottom-auto,
+.pb-auto {
+  padding-bottom: auto !important;
+}
+
+.padding-left-auto,
+.pl-auto {
+  padding-left: auto !important;
+}
+
+.padding-x-auto,
+.px-auto {
+  padding-right: auto !important;
+  padding-left: auto !important;
+}
+
+.padding-y-auto,
+.py-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
+
+@for $p from 0 through 40 {
+  $suffix: functions.strReplace(#{($p * 0.25)}, ".", "\\.");
+
+  .margin-#{$suffix}rem,
+  .m-#{$suffix}rem {
+    margin: $p * 0.25rem !important;
+  }
+
+  .margin-top-#{$suffix}rem,
+  .mt-#{$suffix}rem {
+    margin-top: $p * 0.25rem !important;
+  }
+
+  .margin-right-#{$suffix}rem,
+  .mr-#{$suffix}rem {
+    margin-right: $p * 0.25rem !important;
+  }
+
+  .margin-bottom-#{$suffix}rem,
+  .mb-#{$suffix}rem {
+    margin-bottom: $p * 0.25rem !important;
+  }
+
+  .margin-left-#{$suffix}rem,
+  .ml-#{$suffix}rem {
+    margin-left: $p * 0.25rem !important;
+  }
+
+  .margin-x-#{$suffix}rem,
+  .mx-#{$suffix}rem {
+    margin-right: $p * 0.25rem !important;
+    margin-left: $p * 0.25rem !important;
+  }
+
+  .margin-y-#{$suffix}rem,
+  .my-#{$suffix}rem {
+    margin-top: $p * 0.25rem !important;
+    margin-bottom: $p * 0.25rem !important;
+  }
+
+  .padding-#{$suffix}rem,
+  .p-#{$suffix}rem {
+    padding: $p * 0.25rem !important;
+  }
+
+  .padding-top-#{$suffix}rem,
+  .pt-#{$suffix}rem {
+    padding-top: $p * 0.25rem !important;
+  }
+
+  .padding-right-#{$suffix}rem,
+  .pr-#{$suffix}rem {
+    padding-right: $p * 0.25rem !important;
+  }
+
+  .padding-bottom-#{$suffix}rem,
+  .pb-#{$suffix}rem {
+    padding-bottom: $p * 0.25rem !important;
+  }
+
+  .padding-left-#{$suffix}rem,
+  .pl-#{$suffix}rem {
+    padding-left: $p * 0.25rem !important;
+  }
+
+  .padding-x-#{$suffix}rem,
+  .px-#{$suffix}rem {
+    padding-right: $p * 0.25rem !important;
+    padding-left: $p * 0.25rem !important;
+  }
+
+  .padding-y-#{$suffix}rem,
+  .py-#{$suffix}rem {
+    padding-top: $p * 0.25rem !important;
+    padding-bottom: $p * 0.25rem !important;
+  }
+}

package/src/utilities/typography.scss

@@ -0,0 +1,109 @@
+@use "../variables/index.scss" as variables;
+
+.italic {
+  font-style: italic !important;
+}
+
+.oblique {
+  font-style: oblique !important;
+}
+
+.capitalized {
+  text-transform: capitalize !important;
+}
+
+.lowercase {
+  text-transform: lowercase !important;
+}
+
+.uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-align-left {
+  text-align: left !important;
+}
+
+.text-align-right {
+  text-align: right !important;
+}
+
+.text-align-center {
+  text-align: center !important;
+}
+
+.text-align-unset {
+  text-align: unset !important;
+}
+
+.white-space-nowrap {
+  white-space: nowrap !important;
+}
+
+.font-family-sans-serif {
+  font-family: var(--#{variables.$prefix}font-family-sans-serif);
+}
+
+.font-family-monospace {
+  font-family: var(--#{variables.$prefix}font-family-monospace);
+}
+
+.font-size-xsmall {
+  font-size: var(--#{variables.$prefix}font-size-xsmall) !important;
+}
+
+.font-size-small {
+  font-size: var(--#{variables.$prefix}font-size-small) !important;
+}
+
+.font-size-normal {
+  font-size: var(--#{variables.$prefix}font-size-normal) !important;
+}
+
+.font-size-medium {
+  font-size: var(--#{variables.$prefix}font-size-medium) !important;
+}
+
+.font-size-large {
+  font-size: var(--#{variables.$prefix}font-size-large) !important;
+}
+
+.font-size-xlarge {
+  font-size: var(--#{variables.$prefix}font-size-xlarge) !important;
+}
+
+.font-size-xxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxlarge) !important;
+}
+
+.font-size-xxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxlarge) !important;
+}
+
+.font-size-xxxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxxlarge) !important;
+}
+
+.font-size-xxxxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxxxlarge) !important;
+}
+
+.font-weight-light {
+  font-weight: var(--#{variables.$prefix}font-weight-light) !important;
+}
+
+.font-weight-normal {
+  font-weight: var(--#{variables.$prefix}font-weight-normal) !important;
+}
+
+.font-weight-medium {
+  font-weight: var(--#{variables.$prefix}font-weight-medium) !important;
+}
+
+.font-weight-semibold {
+  font-weight: var(--#{variables.$prefix}font-weight-semibold) !important;
+}
+
+.font-weight-bold {
+  font-weight: var(--#{variables.$prefix}font-weight-bold) !important;
+}

package/src/variables/animation.scss

@@ -0,0 +1,8 @@
+
+$animation-speed-heavy: 4s !default;
+$animation-speed-slower: 3s !default;
+$animation-speed-slow: 2s !default;
+$animation-speed-normal: 1s !default;
+$animation-speed-fast: 750ms !default;
+$animation-speed-faster: 500ms !default;
+$animation-speed-flash: 250ms !default;

package/src/variables/border.scss

@@ -0,0 +1,81 @@
+$border-width-xthin: 0.05rem !default;
+$border-width-thin: 0.075rem !default;
+$border-width-medium: 0.1rem !default;
+$border-width-thick: 0.15rem !default;
+$border-width-xthick: 0.2rem !default;
+$border-width-xxthick: 0.25rem !default;
+$border-width-xxxthick: 0.5rem !default;
+
+$border-radius-xsmall: 0.25rem !default;
+$border-radius-small: 0.5rem !default;
+$border-radius-medium: 1rem !default;
+$border-radius-large: 1.5rem !default;
+$border-radius-xlarge: 2rem !default;
+$border-radius-circle: 50% !default;
+$border-radius-pill: 50rem !default;
+
+$borderSides: ("top", "right", "bottom", "left");
+
+$borderStyles: ("solid", "dashed", "dotted");
+
+$borderWidths: (
+  (
+    "name": "xthin",
+    "value": $border-width-xthin,
+  ),
+  (
+    "name": "thin",
+    "value": $border-width-thin,
+  ),
+  (
+    "name": "medium",
+    "value": $border-width-medium,
+  ),
+  (
+    "name": "thick",
+    "value": $border-width-thick,
+  ),
+  (
+    "name": "xthick",
+    "value": $border-width-xthick,
+  ),
+  (
+    "name": "xxthick",
+    "value": $border-width-xxthick,
+  ),
+  (
+    "name": "xxxthick",
+    "value": $border-width-xxxthick,
+  )
+) !default;
+
+$borderRadiuses: (
+  (
+    "name": "xsmall",
+    "value": $border-radius-xsmall,
+  ),
+  (
+    "name": "small",
+    "value": $border-radius-small,
+  ),
+  (
+    "name": "medium",
+    "value": $border-radius-medium,
+  ),
+  (
+    "name": "large",
+    "value": $border-radius-large,
+  ),
+  (
+    "name": "xlarge",
+    "value": $border-radius-xlarge,
+  ),
+  (
+    "name": "circle",
+    "value": $border-radius-circle,
+  ),
+  (
+    "name": "pill",
+    "value": $border-radius-pill,
+  )
+) !default;