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/variables/color.scss ADDED Viewed

@@ -0,0 +1,1371 @@
+@use "sass:color";
+@use "../functions/index.scss" as functions;
+//#region define color settings
+$color-lightness-white: 95% !default;
+$color-lightness-black: 14% !default;
+$color-lightness-50: 53% !default;
+$color-lightness-offset-lighter: 5% !default;
+$color-lightness-offset-darker: -5% !default;
+$color-chroma-gray: 0.04 !default;
+$color-chroma-colorful: 0.09 !default;
+$color-chroma-colorful-offset-lighter: 0 !default;
+$color-chroma-colorful-offset-darker: 0 !default;
+$color-hue-gray: 277 !default;
+$color-hue-red: 17 !default;
+$color-hue-orange: 57 !default;
+$color-hue-yellow: 107 !default;
+$color-hue-lime: 127 !default;
+$color-hue-green: 157 !default;
+$color-hue-cyan: 187 !default;
+$color-hue-blue: 277 !default;
+$color-hue-violet: 307 !default;
+$color-hue-magenta: 327 !default;
+//#endregion define color settings
+//#region define color shades array
+//#region color-light-lightness
+$color-light-lightness-fore: 5 !default;
+$color-light-lightness-back: 95 !default;
+$color-light-lightness-border: 70 !default;
+$color-light-lightness-placeholder: 70 !default;
+$color-light-lightness-shadow: 70 !default;
+//#region color-light-lightness-dot
+$color-light-lightness-dot-fore: 85 !default;
+$color-light-lightness-dot-back: 95 !default;
+//#endregion color-light-lightness-dot
+//#region color-light-lightness-gingham
+$color-light-lightness-gingham-fore: 85 !default;
+$color-light-lightness-gingham-back: 95 !default;
+//#endregion color-light-lightness-gingham
+//#region color-light-lightness-rhombus
+$color-light-lightness-rhombus-fore: 85 !default;
+$color-light-lightness-rhombus-back: 95 !default;
+//#endregion color-light-lightness-rhombus
+//#region color-light-lightness-stripe
+$color-light-lightness-stripe-fore: 85 !default;
+$color-light-lightness-stripe-back: 95 !default;
+//#endregion color-light-lightness-stripe
+//#region color-light-lightness-zigzag
+$color-light-lightness-zigzag-fore: 85 !default;
+$color-light-lightness-zigzag-back: 95 !default;
+//#endregion color-light-lightness-zigzag
+//#region color-dark-lightness-accordion
+$color-light-lightness-accordion-fore: 5 !default;
+$color-light-lightness-accordion-back: 95 !default;
+$color-light-lightness-accordion-border: 70 !default;
+$color-light-lightness-accordion-summary-fore: 5 !default;
+$color-light-lightness-accordion-summary-back: 70 !default;
+$color-light-lightness-accordion-summary-border: 70 !default;
+$color-light-lightness-accordion-details-fore: 5 !default;
+$color-light-lightness-accordion-details-back: 95 !default;
+$color-light-lightness-accordion-details-border: 70 !default;
+//#endregion color-dark-lightness-accordion
+//#region color-light-lightness-button
+$color-light-lightness-button-fore: 5 !default;
+$color-light-lightness-button-back: 70 !default;
+$color-light-lightness-button-border: 70 !default;
+$color-light-lightness-button-shadow: 70 !default;
+//#endregion color-light-lightness-button
+//#region color-light-lightness-badge
+$color-light-lightness-badge-fore: 5 !default;
+$color-light-lightness-badge-back: 85 !default;
+$color-light-lightness-badge-border: 70 !default;
+//#endregion color-light-lightness-badge
+//#region color-light-lightness-blockquote
+$color-light-lightness-blockquote-fore: 50 !default;
+$color-light-lightness-blockquote-back: 90 !default;
+$color-light-lightness-blockquote-border: 50 !default;
+//#endregion color-light-lightness-blockquote
+//#region color-light-lightness-breadcrumbs
+$color-light-lightness-breadcrumbs-fore: 30 !default;
+$color-light-lightness-breadcrumb-fore: 30 !default;
+$color-light-lightness-breadcrumb-divider-fore: 60 !default;
+//#endregion color-light-lightness-breadcrumbs
+//#region color-light-lightness-card
+$color-light-lightness-card-fore: 5 !default;
+$color-light-lightness-card-back: 70 !default;
+$color-light-lightness-card-border: 70 !default;
+$color-light-lightness-card-shadow: 30 !default;
+$color-light-lightness-card-header-fore: 5 !default;
+$color-light-lightness-card-header-back: 70 !default;
+$color-light-lightness-card-body-fore: 5 !default;
+$color-light-lightness-card-body-back: 90 !default;
+$color-light-lightness-card-footer-fore: 5 !default;
+$color-light-lightness-card-footer-back: 80 !default;
+//#endregion color-light-lightness-card
+//#region color-dark-lightness-dialogue
+$color-light-lightness-dialogue-fore: 5 !default;
+$color-light-lightness-dialogue-back: 95 !default;
+$color-light-lightness-dialogue-border: 70 !default;
+$color-light-lightness-dialogue-shadow: 70 !default;
+$color-light-lightness-dialogue-avatar-fore: 5 !default;
+$color-light-lightness-dialogue-avatar-back: 95 !default;
+$color-light-lightness-dialogue-avatar-border: 70 !default;
+$color-light-lightness-dialogue-name-fore: 5 !default;
+$color-light-lightness-dialogue-name-back: 95 !default;
+$color-light-lightness-dialogue-name-border: 70 !default;
+$color-light-lightness-dialogue-name-shadow: 70 !default;
+$color-light-lightness-dialogue-message-fore: 5 !default;
+$color-light-lightness-dialogue-message-back: 95 !default;
+$color-light-lightness-dialogue-message-border: 70 !default;
+//#endregion color-dark-lightness-dialogue
+//#region color-light-lightness-header
+$color-light-lightness-header-fore: 5 !default;
+$color-light-lightness-header-back: 70 !default;
+$color-light-lightness-header-shadow: 70 !default;
+//#endregion color-light-lightness-header
+//#region color-light-lightness-label
+$color-light-lightness-label-fore: 60 !default;
+//#endregion color-light-lightness-label
+//#region color-light-lightness-link
+$color-light-lightness-link-fore: 60 !default;
+//#endregion color-light-lightness-link
+//#region color-light-lightness-loader
+$color-light-lightness-loader-fore: 60 !default;
+//#endregion color-light-lightness-loader
+//#region color-light-lightness-message
+$color-light-lightness-message-fore: 5 !default;
+$color-light-lightness-message-back: 70 !default;
+$color-light-lightness-message-border: 70 !default;
+$color-light-lightness-message-header-fore: 5 !default;
+$color-light-lightness-message-header-back: 70 !default;
+$color-light-lightness-message-body-fore: 5 !default;
+$color-light-lightness-message-body-back: 90 !default;
+//#endregion color-light-lightness-card
+//#region color-light-lightness-progress
+$color-light-lightness-progress-fore: 70 !default;
+$color-light-lightness-progress-back: 95 !default;
+//#endregion color-light-lightness-progress
+//#endregion color-light-lightness
+//#region color-dark-lightness
+$color-dark-lightness-fore: 95 !default;
+$color-dark-lightness-back: 5 !default;
+$color-dark-lightness-border: 50 !default;
+$color-dark-lightness-placeholder: 50 !default;
+$color-dark-lightness-shadow: 50 !default;
+//#region color-dark-lightness-dot
+$color-dark-lightness-dot-fore: 5 !default;
+$color-dark-lightness-dot-back: 15 !default;
+//#endregion color-dark-lightness-dot
+//#region color-dark-lightness-gingham
+$color-dark-lightness-gingham-fore: 5 !default;
+$color-dark-lightness-gingham-back: 15 !default;
+//#endregion color-dark-lightness-gingham
+//#region color-dark-lightness-rhombus
+$color-dark-lightness-rhombus-fore: 5 !default;
+$color-dark-lightness-rhombus-back: 15 !default;
+//#endregion color-dark-lightness-rhombus
+//#region color-dark-lightness-stripe
+$color-dark-lightness-stripe-fore: 5 !default;
+$color-dark-lightness-stripe-back: 15 !default;
+//#endregion color-dark-lightness-stripe
+//#region color-dark-lightness-zigzag
+$color-dark-lightness-zigzag-fore: 5 !default;
+$color-dark-lightness-zigzag-back: 15 !default;
+//#endregion color-dark-lightness-zigzag
+//#region color-dark-lightness-accordion
+$color-dark-lightness-accordion-fore: 95 !default;
+$color-dark-lightness-accordion-back: 5 !default;
+$color-dark-lightness-accordion-border: 30 !default;
+$color-dark-lightness-accordion-summary-fore: 95 !default;
+$color-dark-lightness-accordion-summary-back: 30 !default;
+$color-dark-lightness-accordion-summary-border: 30 !default;
+$color-dark-lightness-accordion-details-fore: 95 !default;
+$color-dark-lightness-accordion-details-back: 5 !default;
+$color-dark-lightness-accordion-details-border: 30 !default;
+//#endregion color-dark-lightness-accordion
+//#region color-light-lightness-badge
+$color-dark-lightness-badge-fore: 95 !default;
+$color-dark-lightness-badge-back: 15 !default;
+$color-dark-lightness-badge-border: 30 !default;
+//#endregion color-light-lightness-badge
+//#region color-light-lightness-blockquote
+$color-dark-lightness-blockquote-fore: 70 !default;
+$color-dark-lightness-blockquote-back: 20 !default;
+$color-dark-lightness-blockquote-border: 70 !default;
+//#endregion color-light-lightness-blockquote
+//#region color-light-lightness-blockquote
+$color-dark-lightness-breadcrumbs-fore: 70 !default;
+$color-dark-lightness-breadcrumb-fore: 70 !default;
+$color-dark-lightness-breadcrumb-divider-fore: 40 !default;
+//#endregion color-light-lightness-blockquote
+//#region color-dark-lightness-button
+$color-dark-lightness-button-fore: 95 !default;
+$color-dark-lightness-button-back: 30 !default;
+$color-dark-lightness-button-border: 30 !default;
+$color-dark-lightness-button-shadow: 30 !default;
+//#endregion color-dark-lightness-button
+//#region color-dark-lightness-card
+$color-dark-lightness-card-fore: 95 !default;
+$color-dark-lightness-card-back: 5 !default;
+$color-dark-lightness-card-border: 30 !default;
+$color-dark-lightness-card-shadow: 30 !default;
+$color-dark-lightness-card-header-fore: 95 !default;
+$color-dark-lightness-card-header-back: 50 !default;
+$color-dark-lightness-card-body-fore: 95 !default;
+$color-dark-lightness-card-body-back: 10 !default;
+$color-dark-lightness-card-footer-fore: 95 !default;
+$color-dark-lightness-card-footer-back: 20 !default;
+//#endregion color-dark-lightness-card
+//#region color-dark-lightness-dialogue
+$color-dark-lightness-dialogue-fore: 95 !default;
+$color-dark-lightness-dialogue-back: 5 !default;
+$color-dark-lightness-dialogue-border: 50 !default;
+$color-dark-lightness-dialogue-shadow: 50 !default;
+$color-dark-lightness-dialogue-avatar-fore: 95 !default;
+$color-dark-lightness-dialogue-avatar-back: 5 !default;
+$color-dark-lightness-dialogue-avatar-border: 50 !default;
+$color-dark-lightness-dialogue-name-fore: 95 !default;
+$color-dark-lightness-dialogue-name-back: 5 !default;
+$color-dark-lightness-dialogue-name-border: 50 !default;
+$color-dark-lightness-dialogue-name-shadow: 50 !default;
+$color-dark-lightness-dialogue-message-fore: 95 !default;
+$color-dark-lightness-dialogue-message-back: 5 !default;
+$color-dark-lightness-dialogue-message-border: 50 !default;
+//#endregion color-dark-lightness-dialogue
+//#region color-dark-lightness-header
+$color-dark-lightness-header-fore: 95 !default;
+$color-dark-lightness-header-back: 30 !default;
+$color-dark-lightness-header-shadow: 30 !default;
+//#endregion color-dark-lightness-header
+//#region color-dark-lightness-label
+$color-dark-lightness-label-fore: 70 !default;
+//#endregion color-dark-lightness-label
+//#region color-dark-lightness-link
+$color-dark-lightness-link-fore: 70 !default;
+//#endregion color-dark-lightness-link
+//#region color-dark-lightness-loader
+$color-dark-lightness-loader-fore: 70 !default;
+//#endregion color-dark-lightness-loader
+//#region color-dark-lightness-progress
+$color-dark-lightness-progress-fore: 80 !default;
+//#endregion color-dark-lightness-progress
+//#region color-dark-lightness-message
+$color-dark-lightness-message-fore: 95 !default;
+$color-dark-lightness-message-back: 5 !default;
+$color-dark-lightness-message-border: 30 !default;
+$color-dark-lightness-message-header-fore: 95 !default;
+$color-dark-lightness-message-header-back: 50 !default;
+$color-dark-lightness-message-body-fore: 95 !default;
+$color-dark-lightness-message-body-back: 5 !default;
+//#endregion color-dark-lightness-card
+//#region color-light-lightness-progress
+$color-dark-lightness-progress-fore: 80 !default;
+$color-dark-lightness-progress-back: 5 !default;
+//#endregion color-light-lightness-progress
+//#endregion color-dark-lightness
+//#region color-lightness-offset
+$color-light-lightness-offset-disabled-fore: 30 !default;
+$color-dark-lightness-offset-disabled-fore: -30 !default;
+$color-lightness-offset-disabled: 0 !default;
+$color-lightness-offset-focus: 20 !default;
+$color-lightness-offset-hover: 5 !default;
+$color-lightness-offset-active: -5 !default;
+$color-lightness-offset-visited: 0 !default;
+//#endregion color-lightness-offset
+//#region colorShadesLight
+$colorShadesLight: (
+  //#region plain
+  (
+      name: "plain",
+      fore: functions.zeroPadding($color-light-lightness-fore, 2),
+      back: functions.zeroPadding($color-light-lightness-back, 2),
+      border: functions.zeroPadding($color-light-lightness-border, 2),
+      placeholder: functions.zeroPadding($color-light-lightness-placeholder, 2),
+      shadow: functions.zeroPadding($color-light-lightness-shadow, 2),
+      dot: (
+        fore: functions.zeroPadding($color-light-lightness-dot-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-dot-back, 2),
+      ),
+      gingham: (
+        fore: functions.zeroPadding($color-light-lightness-gingham-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-gingham-back, 2),
+      ),
+      rhombus: (
+        fore: functions.zeroPadding($color-light-lightness-rhombus-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-rhombus-back, 2),
+      ),
+      stripe: (
+        fore: functions.zeroPadding($color-light-lightness-stripe-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-stripe-back, 2),
+      ),
+      zigzag: (
+        fore: functions.zeroPadding($color-light-lightness-zigzag-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-zigzag-back, 2),
+      ),
+      accordion: (
+        fore: functions.zeroPadding($color-light-lightness-accordion-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-accordion-back, 2),
+        border:
+          functions.zeroPadding($color-light-lightness-accordion-border, 2),
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-back,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-border,
+              2
+            ),
+        ),
+        accordionDetails: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-details-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-details-back,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-details-border,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-badge-back, 2),
+        border: functions.zeroPadding($color-light-lightness-badge-border, 2),
+      ),
+      blockquote: (
+        fore: functions.zeroPadding($color-light-lightness-blockquote-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-blockquote-back, 2),
+        border: functions.zeroPadding($color-light-lightness-blockquote-border, 2),
+      ),
+      breadcrumbs: (
+        fore: functions.zeroPadding($color-light-lightness-breadcrumbs-fore, 2),
+        breadcrumb: (
+          fore: functions.zeroPadding($color-light-lightness-breadcrumb-fore, 2),
+        ),
+        breadcrumbDivider: (
+          fore: functions.zeroPadding($color-light-lightness-breadcrumb-divider-fore, 2),
+        ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-button-back, 2),
+        border: functions.zeroPadding($color-light-lightness-button-border, 2),
+        shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
+      ),
+      card: (
+        fore: functions.zeroPadding($color-light-lightness-card-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-card-back, 2),
+        border: functions.zeroPadding($color-light-lightness-card-border, 2),
+        shadow: functions.zeroPadding($color-light-lightness-card-shadow, 2),
+        cardHeader: (
+          fore:
+            functions.zeroPadding($color-light-lightness-card-header-fore, 2),
+          back:
+            functions.zeroPadding($color-light-lightness-card-header-back, 2),
+        ),
+        cardBody: (
+          fore: functions.zeroPadding($color-light-lightness-card-body-fore, 2),
+          back: functions.zeroPadding($color-light-lightness-card-body-back, 2),
+        ),
+        cardFooter: (
+          fore:
+            functions.zeroPadding($color-light-lightness-card-footer-fore, 2),
+          back:
+            functions.zeroPadding($color-light-lightness-card-footer-back, 2),
+        ),
+      ),
+      dialogue: (
+        fore: functions.zeroPadding($color-light-lightness-dialogue-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-dialogue-back, 2),
+        border: functions.zeroPadding($color-light-lightness-dialogue-border, 2),
+        dialogueAvatar: (
+          fore: functions.zeroPadding($color-light-lightness-dialogue-avatar-fore, 2),
+          back: functions.zeroPadding($color-light-lightness-dialogue-avatar-back, 2),
+          border: functions.zeroPadding($color-light-lightness-dialogue-avatar-border, 2),
+        ),
+        dialogueName: (
+          fore: functions.zeroPadding($color-light-lightness-dialogue-name-fore, 2),
+          back: functions.zeroPadding($color-light-lightness-dialogue-name-back, 2),
+          border: functions.zeroPadding($color-light-lightness-dialogue-name-border, 2),
+          shadow: functions.zeroPadding($color-light-lightness-dialogue-name-shadow, 2),
+        ),
+        dialogueMessage: (
+          fore: functions.zeroPadding($color-light-lightness-dialogue-message-fore, 2),
+          back: functions.zeroPadding($color-light-lightness-dialogue-message-back, 2),
+          border: functions.zeroPadding($color-light-lightness-dialogue-message-border, 2),
+        ),
+      ),
+      header: (
+        fore: functions.zeroPadding($color-light-lightness-header-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-header-back, 2),
+        shadow: functions.zeroPadding($color-light-lightness-header-shadow, 2),
+      ),
+      label: (
+        fore: functions.zeroPadding($color-light-lightness-label-fore, 2),
+      ),
+      loader: (
+        fore: functions.zeroPadding($color-light-lightness-loader-fore, 2),
+      ),
+      link: (
+        fore: functions.zeroPadding($color-light-lightness-link-fore, 2),
+      ),
+      message: (
+        fore: functions.zeroPadding($color-light-lightness-message-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-message-back, 2),
+        border: functions.zeroPadding($color-light-lightness-message-border, 2),
+        messageHeader: (
+          fore:
+            functions.zeroPadding($color-light-lightness-message-header-fore, 2),
+          back:
+            functions.zeroPadding($color-light-lightness-message-header-back, 2),
+        ),
+        messageBody: (
+          fore:
+            functions.zeroPadding($color-light-lightness-message-body-fore, 2),
+          back:
+            functions.zeroPadding($color-light-lightness-message-body-back, 2),
+        ),
+      ),
+      progress: (
+        fore: functions.zeroPadding($color-light-lightness-progress-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-progress-back, 2),
+      ),
+    ),
+  //#endregion plain
+  //#region disabled
+  (
+      name: "disabled",
+      fore:
+        functions.zeroPadding(
+          $color-light-lightness-fore +
+            $color-light-lightness-offset-disabled-fore,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-light-lightness-back + $color-lightness-offset-disabled,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-light-lightness-border + $color-lightness-offset-disabled,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-light-lightness-placeholder + $color-lightness-offset-disabled,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-light-lightness-shadow + $color-lightness-offset-disabled,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-fore +
+                $color-light-lightness-offset-disabled-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-back +
+                $color-lightness-offset-disabled,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-border +
+                $color-lightness-offset-disabled,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore:
+          functions.zeroPadding(
+            $color-light-lightness-badge-fore +
+              $color-light-lightness-offset-disabled-fore,
+            2
+          ),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-badge-back + $color-lightness-offset-disabled,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-badge-border +
+              $color-lightness-offset-disabled,
+            2
+          ),
+      ),
+      button: (
+        fore:
+          functions.zeroPadding(
+            $color-light-lightness-button-fore +
+              $color-light-lightness-offset-disabled-fore,
+            2
+          ),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-button-back +
+              $color-lightness-offset-disabled,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-button-border +
+              $color-lightness-offset-disabled,
+            2
+          ),
+        shadow:
+          functions.zeroPadding(
+            $color-light-lightness-button-shadow +
+              $color-lightness-offset-disabled,
+            2
+          ),
+      ),
+    ),
+  //#endregion disabled
+  //#region hover
+  (
+      name: "hover",
+      fore:
+        functions.zeroPadding(
+          $color-light-lightness-fore + $color-lightness-offset-hover,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-light-lightness-back + $color-lightness-offset-hover,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-light-lightness-border + $color-lightness-offset-hover,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-light-lightness-placeholder + $color-lightness-offset-hover,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-light-lightness-shadow + $color-lightness-offset-hover,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-back +
+                $color-lightness-offset-hover,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-badge-back + $color-lightness-offset-hover,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-badge-border + $color-lightness-offset-hover,
+            2
+          ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-button-back + $color-lightness-offset-hover,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-button-border + $color-lightness-offset-hover,
+            2
+          ),
+        shadow: "50",
+      ),
+    ),
+  //#endregion hover
+  //#region focus
+  (
+      name: "focus",
+      fore: functions.zeroPadding($color-light-lightness-fore, 2),
+      back: functions.zeroPadding($color-light-lightness-back, 2),
+      border:
+        functions.zeroPadding(
+          $color-light-lightness-border + $color-lightness-offset-focus,
+          2
+        ),
+      placeholder: functions.zeroPadding($color-light-lightness-placeholder, 2),
+      shadow: functions.zeroPadding($color-light-lightness-shadow, 2),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-back,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-badge-back, 2),
+        border: functions.zeroPadding($color-light-lightness-badge-border, 2),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+        back: functions.zeroPadding($color-light-lightness-button-back, 2),
+        border: functions.zeroPadding($color-light-lightness-button-border, 2),
+        shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
+      ),
+    ),
+  //#endregion focus
+  //#region active
+  (
+      name: "active",
+      fore:
+        functions.zeroPadding(
+          $color-light-lightness-fore + $color-lightness-offset-active,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-light-lightness-back + $color-lightness-offset-active,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-light-lightness-border + $color-lightness-offset-active,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-light-lightness-placeholder + $color-lightness-offset-active,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-light-lightness-shadow + $color-lightness-offset-active,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-light-lightness-accordion-summary-back +
+                $color-lightness-offset-active,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-badge-back + $color-lightness-offset-active,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-badge-border + $color-lightness-offset-active,
+            2
+          ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-light-lightness-button-back + $color-lightness-offset-active,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-light-lightness-button-border +
+              $color-lightness-offset-active,
+            2
+          ),
+        shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
+      ),
+    ),
+  //#endregion active
+  //#region visited
+  (
+    name: "visited",
+    fore:
+      functions.zeroPadding(
+        $color-light-lightness-fore + $color-lightness-offset-visited,
+        2
+      ),
+    back:
+      functions.zeroPadding(
+        $color-light-lightness-back + $color-lightness-offset-visited,
+        2
+      ),
+    border:
+      functions.zeroPadding(
+        $color-light-lightness-border + $color-lightness-offset-visited,
+        2
+      ),
+    placeholder:
+      functions.zeroPadding(
+        $color-light-lightness-placeholder + $color-lightness-offset-visited,
+        2
+      ),
+    shadow:
+      functions.zeroPadding(
+        $color-light-lightness-shadow + $color-lightness-offset-visited,
+        2
+      ),
+    badge: (
+      fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
+      back: functions.zeroPadding($color-light-lightness-badge-back, 2),
+      border: functions.zeroPadding($color-light-lightness-badge-border, 2),
+    ),
+    button: (
+      fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
+      back: functions.zeroPadding($color-light-lightness-button-back, 2),
+      border: functions.zeroPadding($color-light-lightness-button-border, 2),
+      shadow: functions.zeroPadding($color-light-lightness-button-shadow, 2),
+    ),
+    link: (
+      fore:
+        functions.zeroPadding(
+          $color-light-lightness-link-fore + $color-lightness-offset-visited,
+          2
+        ),
+    ),
+  )
+  //#endregion visited
+);
+//#endregion colorShadesLight
+//#region colorShadesDark
+$colorShadesDark: (
+  //#region plain
+  (
+      name: "plain",
+      fore: functions.zeroPadding($color-dark-lightness-fore, 2),
+      back: functions.zeroPadding($color-dark-lightness-back, 2),
+      border: functions.zeroPadding($color-dark-lightness-border, 2),
+      placeholder: functions.zeroPadding($color-dark-lightness-placeholder, 2),
+      shadow: functions.zeroPadding($color-dark-lightness-shadow, 2),
+      dot: (
+        fore: functions.zeroPadding($color-dark-lightness-dot-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-dot-back, 2),
+      ),
+      gingham: (
+        fore: functions.zeroPadding($color-dark-lightness-gingham-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-gingham-back, 2),
+      ),
+      rhombus: (
+        fore: functions.zeroPadding($color-dark-lightness-rhombus-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-rhombus-back, 2),
+      ),
+      stripe: (
+        fore: functions.zeroPadding($color-dark-lightness-stripe-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-stripe-back, 2),
+      ),
+      zigzag: (
+        fore: functions.zeroPadding($color-dark-lightness-zigzag-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-zigzag-back, 2),
+      ),
+      accordion: (
+        fore: functions.zeroPadding($color-dark-lightness-accordion-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-accordion-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-accordion-border, 2),
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-back,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-border,
+              2
+            ),
+        ),
+        accordionDetails: (
+          fore:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-details-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-details-back,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-details-border,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
+      ),
+      blockquote: (
+        fore: functions.zeroPadding($color-dark-lightness-blockquote-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-blockquote-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-blockquote-border, 2),
+      ),
+      breadcrumbs: (
+        fore: functions.zeroPadding($color-dark-lightness-breadcrumbs-fore, 2),
+        breadcrumb: (
+          fore: functions.zeroPadding($color-dark-lightness-breadcrumb-fore, 2),
+        ),
+        breadcrumbDivider: (
+          fore: functions.zeroPadding($color-dark-lightness-breadcrumb-divider-fore, 2),
+        ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-button-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-button-border, 2),
+        shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
+      ),
+      card: (
+        fore: functions.zeroPadding($color-dark-lightness-card-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-card-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-card-border, 2),
+        shadow: functions.zeroPadding($color-dark-lightness-card-shadow, 2),
+        cardHeader: (
+          fore: functions.zeroPadding($color-dark-lightness-card-header-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-card-header-back, 2),
+        ),
+        cardBody: (
+          fore: functions.zeroPadding($color-dark-lightness-card-body-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-card-body-back, 2),
+        ),
+        cardFooter: (
+          fore: functions.zeroPadding($color-dark-lightness-card-footer-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-card-footer-back, 2),
+        ),
+      ),
+      dialogue: (
+        fore: functions.zeroPadding($color-dark-lightness-dialogue-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-dialogue-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-dialogue-border, 2),
+        dialogueAvatar: (
+          fore: functions.zeroPadding($color-dark-lightness-dialogue-avatar-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-dialogue-avatar-back, 2),
+          border: functions.zeroPadding($color-dark-lightness-dialogue-avatar-border, 2),
+        ),
+        dialogueName: (
+          fore: functions.zeroPadding($color-dark-lightness-dialogue-name-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-dialogue-name-back, 2),
+          border: functions.zeroPadding($color-dark-lightness-dialogue-name-border, 2),
+          shadow: functions.zeroPadding($color-dark-lightness-dialogue-name-shadow, 2),
+        ),
+        dialogueMessage: (
+          fore: functions.zeroPadding($color-dark-lightness-dialogue-message-fore, 2),
+          back: functions.zeroPadding($color-dark-lightness-dialogue-message-back, 2),
+          border: functions.zeroPadding($color-dark-lightness-dialogue-message-border, 2),
+        ),
+      ),
+      header: (
+        fore: functions.zeroPadding($color-dark-lightness-header-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-header-back, 2),
+        shadow: functions.zeroPadding($color-dark-lightness-header-shadow, 2),
+      ),
+      label: (
+        fore: functions.zeroPadding($color-dark-lightness-label-fore, 2),
+      ),
+      link: (
+        fore: functions.zeroPadding($color-dark-lightness-link-fore, 2),
+      ),
+      loader: (
+        fore: functions.zeroPadding($color-dark-lightness-loader-fore, 2),
+      ),
+      message: (
+        fore: functions.zeroPadding($color-dark-lightness-message-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-message-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-message-border, 2),
+        messageHeader: (
+          fore:
+            functions.zeroPadding($color-dark-lightness-message-header-fore, 2),
+          back:
+            functions.zeroPadding($color-dark-lightness-message-header-back, 2),
+        ),
+        messageBody: (
+          fore:
+            functions.zeroPadding($color-dark-lightness-message-body-fore, 2),
+          back:
+            functions.zeroPadding($color-dark-lightness-message-body-back, 2),
+        ),
+      ),
+      progress: (
+        fore: functions.zeroPadding($color-dark-lightness-progress-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-progress-back, 2),
+      ),
+    ),
+  //#endregion plain
+  //#region disabled
+  (
+      name: "disabled",
+      fore:
+        functions.zeroPadding(
+          $color-dark-lightness-fore + $color-dark-lightness-offset-disabled-fore,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-dark-lightness-back + $color-lightness-offset-disabled,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-dark-lightness-border + $color-lightness-offset-disabled,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-dark-lightness-placeholder + $color-lightness-offset-disabled,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-dark-lightness-shadow + $color-lightness-offset-disabled,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-fore +
+              $color-dark-lightness-offset-disabled-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-back +
+                $color-lightness-offset-disabled,
+              2
+            ),
+          border:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-border +
+                $color-lightness-offset-disabled,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-fore +
+            $color-dark-lightness-offset-disabled-fore,
+            2
+          ),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-back + $color-lightness-offset-disabled,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-border +
+              $color-lightness-offset-disabled,
+            2
+          ),
+      ),
+      button: (
+        fore:
+          functions.zeroPadding(
+            $color-dark-lightness-button-fore +
+            $color-dark-lightness-offset-disabled-fore,
+            2
+          ),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-button-back + $color-lightness-offset-disabled,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-button-border +
+              $color-lightness-offset-disabled,
+            2
+          ),
+        shadow:
+          functions.zeroPadding(
+            $color-dark-lightness-button-shadow +
+              $color-lightness-offset-disabled,
+            2
+          ),
+      ),
+    ),
+  //#endregion disabled
+  //#region hover
+  (
+      name: "hover",
+      fore:
+        functions.zeroPadding(
+          $color-dark-lightness-fore + $color-lightness-offset-hover,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-dark-lightness-back + $color-lightness-offset-hover,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-dark-lightness-border + $color-lightness-offset-hover,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-dark-lightness-placeholder + $color-lightness-offset-hover,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-dark-lightness-shadow + $color-lightness-offset-hover,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-back +
+                $color-lightness-offset-hover,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-back + $color-lightness-offset-hover,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-border + $color-lightness-offset-hover,
+            2
+          ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-button-back + $color-lightness-offset-hover,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-button-border + $color-lightness-offset-hover,
+            2
+          ),
+        shadow: "50",
+      ),
+    ),
+  //#endregion hover
+  //#region focus
+  (
+      name: "focus",
+      fore: functions.zeroPadding($color-dark-lightness-fore, 2),
+      back: functions.zeroPadding($color-dark-lightness-back, 2),
+      border:
+        functions.zeroPadding(
+          $color-dark-lightness-border + $color-lightness-offset-focus,
+          2
+        ),
+      placeholder: functions.zeroPadding($color-dark-lightness-placeholder, 2),
+      shadow: functions.zeroPadding($color-dark-lightness-shadow, 2),
+      accordion: (
+        accordionSummary: (
+          fore: "95",
+          back: "30",
+          border: "50",
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-button-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-button-border, 2),
+        shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
+      ),
+    ),
+  //#endregion focus
+  //#region active
+  (
+      name: "active",
+      fore:
+        functions.zeroPadding(
+          $color-dark-lightness-fore + $color-lightness-offset-active,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-dark-lightness-back + $color-lightness-offset-active,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-dark-lightness-border + $color-lightness-offset-active,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-dark-lightness-placeholder + $color-lightness-offset-active,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-dark-lightness-shadow + $color-lightness-offset-active,
+          2
+        ),
+      accordion: (
+        accordionSummary: (
+          fore:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-fore,
+              2
+            ),
+          back:
+            functions.zeroPadding(
+              $color-dark-lightness-accordion-summary-back +
+                $color-lightness-offset-active,
+              2
+            ),
+        ),
+      ),
+      badge: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-back + $color-lightness-offset-active,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-badge-border + $color-lightness-offset-active,
+            2
+          ),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back:
+          functions.zeroPadding(
+            $color-dark-lightness-button-back + $color-lightness-offset-active,
+            2
+          ),
+        border:
+          functions.zeroPadding(
+            $color-dark-lightness-button-border + $color-lightness-offset-active,
+            2
+          ),
+        shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
+      ),
+    ),
+  //#endregion active
+  //#region visited
+  (
+      name: "visited",
+      fore:
+        functions.zeroPadding(
+          $color-dark-lightness-fore + $color-lightness-offset-visited,
+          2
+        ),
+      back:
+        functions.zeroPadding(
+          $color-dark-lightness-back + $color-lightness-offset-visited,
+          2
+        ),
+      border:
+        functions.zeroPadding(
+          $color-dark-lightness-border + $color-lightness-offset-visited,
+          2
+        ),
+      placeholder:
+        functions.zeroPadding(
+          $color-dark-lightness-placeholder + $color-lightness-offset-visited,
+          2
+        ),
+      shadow:
+        functions.zeroPadding(
+          $color-dark-lightness-shadow + $color-lightness-offset-visited,
+          2
+        ),
+      badge: (
+        fore: functions.zeroPadding($color-dark-lightness-badge-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-badge-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-badge-border, 2),
+      ),
+      button: (
+        fore: functions.zeroPadding($color-dark-lightness-button-fore, 2),
+        back: functions.zeroPadding($color-dark-lightness-button-back, 2),
+        border: functions.zeroPadding($color-dark-lightness-button-border, 2),
+        shadow: functions.zeroPadding($color-dark-lightness-button-shadow, 2),
+      ),
+      link: (
+        fore:
+          functions.zeroPadding(
+            $color-dark-lightness-link-fore + $color-lightness-offset-visited,
+            2
+          ),
+      ),
+    )
+    //#endregion visited
+);
+//#endregion colorShadesDark
+//#endregion define color shades array
+//#region define colorNames array
+$colors: (
+  (
+    "name": "gray",
+    "hue": $color-hue-gray,
+  ),
+  (
+    "name": "red",
+    "hue": $color-hue-red,
+  ),
+  (
+    "name": "orange",
+    "hue": $color-hue-orange,
+  ),
+  (
+    "name": "yellow",
+    "hue": $color-hue-yellow,
+  ),
+  (
+    "name": "lime",
+    "hue": $color-hue-lime,
+  ),
+  (
+    "name": "green",
+    "hue": $color-hue-green,
+  ),
+  (
+    "name": "cyan",
+    "hue": $color-hue-cyan,
+  ),
+  (
+    "name": "blue",
+    "hue": $color-hue-blue,
+  ),
+  (
+    "name": "violet",
+    "hue": $color-hue-violet,
+  ),
+  (
+    "name": "magenta",
+    "hue": $color-hue-magenta,
+  )
+) !default;
+//#endregion define colorNames array