minolith 0.0.0

package/src/utilities/spacing.scss

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

package/src/utilities/typography.scss

@@ -0,0 +1,105 @@
+@use "../variables/index.scss" as variables;
+
+.is-italic {
+  font-style: italic !important;
+}
+
+.is-oblique {
+  font-style: italic !important;
+}
+
+.is-capitalized {
+  text-transform: capitalize !important;
+}
+
+.is-lowercase {
+  text-transform: lowercase !important;
+}
+
+.is-uppercase {
+  text-transform: uppercase !important;
+}
+
+.is-text-align-left {
+  text-align: left !important;
+}
+
+.is-text-align-right {
+  text-align: right !important;
+}
+
+.is-text-align-center {
+  text-align: center !important;
+}
+
+.is-text-align-unset {
+  text-align: unset !important;
+}
+
+.is-white-space-nowrap {
+  white-space: nowrap !important;
+}
+
+.is-font-family-sans-serif {
+  font-family: var(--#{variables.$prefix}font-family-sans-serif);
+}
+
+.is-font-family-monospace {
+  font-family: var(--#{variables.$prefix}font-family-monospace);
+}
+
+.is-font-size-small {
+  font-size: var(--#{variables.$prefix}font-size-small) !important;
+}
+
+.is-font-size-normal {
+  font-size: var(--#{variables.$prefix}font-size-normal) !important;
+}
+
+.is-font-size-medium {
+  font-size: var(--#{variables.$prefix}font-size-medium) !important;
+}
+
+.is-font-size-large {
+  font-size: var(--#{variables.$prefix}font-size-large) !important;
+}
+
+.is-font-size-xlarge {
+  font-size: var(--#{variables.$prefix}font-size-xlarge) !important;
+}
+
+.is-font-size-xxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxlarge) !important;
+}
+
+.is-font-size-xxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxlarge) !important;
+}
+
+.is-font-size-xxxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxxlarge) !important;
+}
+
+.is-font-size-xxxxxlarge {
+  font-size: var(--#{variables.$prefix}font-size-xxxxxlarge) !important;
+}
+
+.is-font-weight-light {
+  font-size: var(--#{variables.$prefix}font-weight-light) !important;
+}
+
+.is-font-weight-normal {
+  font-size: var(--#{variables.$prefix}font-weight-normal) !important;
+}
+
+.is-font-weight-medium {
+  font-size: var(--#{variables.$prefix}font-weight-medium) !important;
+}
+
+.is-font-weight-semibold {
+  font-size: var(--#{variables.$prefix}font-weight-semibold) !important;
+}
+
+.is-font-weight-bold {
+  font-size: 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,56 @@
+
+$border-width-xthin: 0.05rem !default;
+$border-width-thin: 0.1rem !default;
+$border-width-medium: 0.125rem !default;
+$border-width-thick: 0.25rem !default;
+$border-width-xthick: 0.5rem !default;
+
+$border-radius-small: 0.2rem !default;
+$border-radius-medium: 0.25rem !default;
+$border-radius-large: 0.5rem !default;
+$border-radius-circle: 50% !default;
+$border-radius-pill: 50rem !default;
+
+$borderSides: (
+  "top",
+  "right",
+  "bottom",
+  "left",
+);
+
+$borderStyles: (
+  "solid",
+  "dashed",
+  "dotted",
+);
+
+$borderWidths: (
+  "xthin",
+  "thin",
+  "medium",
+  "thick",
+  "xthick",
+);
+
+$borderRadiuses: (
+  (
+    "name": "small",
+    "value": $border-radius-small,
+  ),
+  (
+    "name": "medium",
+    "value": $border-radius-medium,
+  ),
+  (
+    "name": "large",
+    "value": $border-radius-large,
+  ),
+  (
+    "name": "circle",
+    "value": $border-radius-circle,
+  ),
+  (
+    "name": "pill",
+    "value": $border-radius-pill,
+  ),
+) !default;

package/src/variables/color.scss

@@ -0,0 +1,415 @@
+
+@use "sass:color";
+
+//#region define color settings
+
+$color-lightness-white: 95% !default;
+$color-lightness-black: 35% !default;
+
+$color-lightness-50: 80% !default;
+$color-lightness-offset-lighter: 2.5%;
+$color-lightness-offset-darker: 5.25%;
+
+$color-chroma-gray: 0.02 !default;
+$color-chroma-colorful: 0.085 !default;
+
+$color-hue-gray: 290 !default;
+$color-hue-red: 0 !default;
+$color-hue-orange: 70 !default;
+$color-hue-yellow: 90 !default;
+$color-hue-lime: 120 !default;
+$color-hue-green: 150 !default;
+$color-hue-cyan: 190 !default;
+$color-hue-blue: 240 !default;
+$color-hue-violet: 290 !default;
+$color-hue-magenta: 340 !default;
+
+//#endregion define color settings
+
+//#region define color shades array
+
+$colorShadesLight: (
+  (
+    name: "plain",
+    fore: "05",
+    back: "95",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      fore: "05",
+      back: "95",
+      border: "40",
+      accordionSummary: (
+        fore: "05",
+        back: "50",
+        border: "50",
+      ),
+      accordionDetails: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+    ),
+    button: (
+      fore: "05",
+      back: "50",
+      border: "50",
+      shadow: "50",
+    ),
+    card: (
+      fore: "05",
+      back: "60",
+      border: "60",
+      shadow: "50",
+      messageHeader: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+      messageBody: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+      messageFooter: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+    ),
+    message: (
+      fore: "05",
+      back: "60",
+      border: "60",
+      messageHeader: (
+        fore: "05",
+        back: "40",
+        border: "40",
+      ),
+      messageBody: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+    ),
+  ),
+  (
+    name: "disabled",
+    fore: "80",
+    back: "10",
+    border: "70",
+    placeholder: "40",
+    shadow: "30",
+    accordion: (
+      accordionSummary: (
+        fore: "05",
+        back: "70",
+        border: "70",
+      ),
+    ),
+    button: (
+      fore: "05",
+      back: "70",
+      border: "70",
+      shadow: "50",
+    ),
+  ),
+  (
+    name: "hover",
+    fore: "05",
+    back: "95",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+    ),
+    button: (
+      fore: "05",
+      back: "60",
+      border: "60",
+      shadow: "50",
+    ),
+  ),
+  (
+    name: "focus",
+    fore: "05",
+    back: "95",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "05",
+        back: "60",
+        border: "60",
+      ),
+    ),
+    button: (
+      fore: "05",
+      back: "60",
+      border: "60",
+      shadow: "50",
+    ),
+  ),
+  (
+    name: "active",
+    fore: "05",
+    back: "95",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "05",
+        back: "50",
+        border: "50",
+      ),
+    ),
+    button: (
+      fore: "05",
+      back: "50",
+      border: "50",
+      shadow: "50",
+    ),
+  ),
+  (
+    name: "visited",
+    fore: "05",
+    back: "95",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    button: (
+      fore: "05",
+      back: "50",
+      border: "50",
+      shadow: "50",
+    ),
+  )
+);
+
+$colorShadesDark: (
+  (
+    name: "plain",
+    fore: "95",
+    back: "05",
+    border: "40",
+    placeholder: "40",
+    shadow: "30",
+    accordion: (
+      fore: "95",
+      back: "05",
+      border: "40",
+      accordionSummary: (
+        fore: "95",
+        back: "30",
+        border: "50",
+      ),
+      accordionDetails: (
+        fore: "95",
+        back: "05",
+        border: "40",
+      ),
+    ),
+    button: (
+      fore: "95",
+      back: "20",
+      border: "20",
+      shadow: "30",
+    ),
+    card: (
+      fore: "95",
+      back: "30",
+      border: "40",
+      shadow: "30",
+      messageHeader: (
+        fore: "95",
+        back: "30",
+        border: "40",
+      ),
+      messageBody: (
+        fore: "95",
+        back: "30",
+        border: "40",
+      ),
+      messageFooter: (
+        fore: "95",
+        back: "30",
+        border: "40",
+      ),
+    ),
+    message: (
+      fore: "95",
+      back: "30",
+      messageHeader: (
+        fore: "95",
+        back: "20",
+        border: "40",
+      ),
+      messageBody: (
+        fore: "95",
+        back: "30",
+        border: "40",
+      ),
+    ),
+  ),
+  (
+    name: "disabled",
+    fore: "80",
+    back: "10",
+    border: "70",
+    placeholder: "40",
+    shadow: "30",
+    accordion: (
+      accordionSummary: (
+        fore: "95",
+        back: "60",
+        border: "60",
+      ),
+    ),
+    button: (
+      fore: "95",
+      back: "40",
+      border: "40",
+      shadow: "30",
+    ),
+  ),
+  (
+    name: "hover",
+    fore: "95",
+    back: "05",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "95",
+        back: "40",
+        border: "40",
+        shadow: "30",
+      ),
+    ),
+    button: (
+      fore: "95",
+      back: "30",
+      border: "30",
+      shadow: "30",
+    ),
+  ),
+  (
+    name: "focus",
+    fore: "95",
+    back: "05",
+    border: "60",
+    placeholder: "60",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "95",
+        back: "50",
+        border: "50",
+      ),
+    ),
+    button: (
+      fore: "95",
+      back: "30",
+      border: "30",
+      shadow: "30",
+    ),
+  ),
+  (
+    name: "active",
+    fore: "95",
+    back: "05",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    accordion: (
+      accordionSummary: (
+        fore: "95",
+        back: "50",
+        border: "50",
+      ),
+    ),
+    button: (
+      fore: "95",
+      back: "20",
+      border: "20",
+      shadow: "30",
+    ),
+  ),
+  (
+    name: "visited",
+    fore: "95",
+    back: "05",
+    border: "40",
+    placeholder: "40",
+    shadow: "40",
+    button: (
+      fore: "95",
+      back: "20",
+      border: "20",
+      shadow: "30",
+    ),
+  )
+);
+
+//#endregion define color shades array
+
+//#region define colorNames array
+
+$colors: (
+  (
+    "name": "gray",
+    "hue": $color-hue-gray,
+    "chroma": $color-chroma-gray,
+  ),
+  (
+    "name": "red",
+    "hue": $color-hue-red,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "orange",
+    "hue": $color-hue-orange,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "yellow",
+    "hue": $color-hue-yellow,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "green",
+    "hue": $color-hue-green,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "cyan",
+    "hue": $color-hue-cyan,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "blue",
+    "hue": $color-hue-blue,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "violet",
+    "hue": $color-hue-violet,
+    "chroma": $color-chroma-colorful,
+  ),
+  (
+    "name": "magenta",
+    "hue": $color-hue-magenta,
+    "chroma": $color-chroma-colorful,
+  )
+) !default;
+
+//#endregion define colorNames array

package/src/variables/index.scss

@@ -0,0 +1,7 @@
+
+@forward "./animation.scss";
+@forward "./border.scss";
+@forward "./color.scss";
+@forward "./layout.scss";
+@forward "./miscellaneous.scss";
+@forward "./typography.scss";