npm - noctemyth - Versions diffs - 0.2.0 → 0.3.0 - Mend

noctemyth 0.2.0 → 0.3.0

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 (62) hide show

package/dist/css/noctemyth-skelton.css +3126 -5336
package/dist/css/noctemyth-skelton.css.map +1 -1
package/dist/css/noctemyth-skelton.min.css +3126 -5336
package/dist/css/noctemyth-skelton.min.css.map +1 -1
package/dist/css/noctemyth-utilities.css +38455 -77487
package/dist/css/noctemyth-utilities.css.map +1 -1
package/dist/css/noctemyth-utilities.min.css +38455 -77487
package/dist/css/noctemyth-utilities.min.css.map +1 -1
package/dist/css/noctemyth.css +22250 -37070
package/dist/css/noctemyth.css.map +1 -1
package/dist/css/noctemyth.min.css +5326 -22994
package/dist/css/noctemyth.min.css.map +1 -1
package/package.json +8 -8
package/src/backgrounds/dot.scss +39 -15
package/src/backgrounds/gingham.scss +35 -18
package/src/backgrounds/rhombus.scss +58 -19
package/src/backgrounds/stripe.scss +30 -9
package/src/backgrounds/zigzag.scss +43 -18
package/src/base/dub.scss +15 -2
package/src/base/element.scss +1 -1
package/src/components/accordion.scss +254 -88
package/src/components/badge.scss +215 -63
package/src/components/blockquote.scss +74 -25
package/src/components/breadcrumbs.scss +66 -15
package/src/components/button.scss +204 -76
package/src/components/card.scss +204 -47
package/src/components/dialogue.scss +209 -140
package/src/components/div.scss +1 -1
package/src/components/footer.scss +28 -5
package/src/components/hamburger.scss +89 -50
package/src/components/header.scss +71 -5
package/src/components/heading.scss +6 -6
package/src/components/image.scss +1 -0
package/src/components/input.scss +141 -69
package/src/components/label.scss +51 -3
package/src/components/link.scss +72 -9
package/src/components/list.scss +2 -2
package/src/components/loader.scss +18 -7
package/src/components/main.scss +1 -1
package/src/components/message.scss +142 -23
package/src/components/modal.scss +26 -7
package/src/components/nav.scss +655 -279
package/src/components/paragraph.scss +1 -1
package/src/components/progress.scss +40 -15
package/src/components/section.scss +1 -1
package/src/components/span.scss +1 -1
package/src/css-variables/color.scss +582 -465
package/src/css-variables/components/dialogue.scss +2 -2
package/src/css-variables/miscellaneous.scss +1 -1
package/src/functions/color.scss +13 -0
package/src/functions/index.scss +1 -0
package/src/functions/string.scss +12 -0
package/src/layouts/centering.scss +1 -1
package/src/layouts/columns.scss +3 -2
package/src/layouts/container.scss +1 -1
package/src/mixins/color.scss +0 -32
package/src/mixins/element.scss +2 -2
package/src/mixins/responsive.scss +2 -1
package/src/utilities/color.scss +2 -6
package/src/variables/color.scss +949 -909
package/src/variables/components/dialogue.scss +2 -2
package/src/variables/miscellaneous.scss +1 -1

package/src/variables/color.scss CHANGED Viewed

@@ -39,6 +39,9 @@ $color-light-lightness-border: 70 !default;
 $color-light-lightness-placeholder: 70 !default;
 $color-light-lightness-shadow: 70 !default;
+$color-light-lightness-selection-fore: 5 !default;
+$color-light-lightness-selection-back: 70 !default;
 //#region color-light-lightness-dot
 $color-light-lightness-dot-fore: 85 !default;
 $color-light-lightness-dot-back: 95 !default;
@@ -64,7 +67,7 @@ $color-light-lightness-zigzag-fore: 85 !default;
 $color-light-lightness-zigzag-back: 95 !default;
 //#endregion color-light-lightness-zigzag
-//#region color-dark-lightness-accordion
+//#region color-light-lightness-accordion
 $color-light-lightness-accordion-fore: 5 !default;
 $color-light-lightness-accordion-back: 95 !default;
 $color-light-lightness-accordion-border: 70 !default;
@@ -74,7 +77,7 @@ $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
+//#endregion color-light-lightness-accordion
 //#region color-light-lightness-button
 $color-light-lightness-button-fore: 5 !default;
@@ -114,7 +117,7 @@ $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
+//#region color-light-lightness-dialogue
 $color-light-lightness-dialogue-fore: 5 !default;
 $color-light-lightness-dialogue-back: 95 !default;
 $color-light-lightness-dialogue-border: 70 !default;
@@ -129,7 +132,7 @@ $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
+//#endregion color-light-lightness-dialogue
 //#region color-light-lightness-header
 $color-light-lightness-header-fore: 5 !default;
@@ -141,6 +144,13 @@ $color-light-lightness-header-shadow: 70 !default;
 $color-light-lightness-label-fore: 60 !default;
 //#endregion color-light-lightness-label
+//#region color-light-lightness-input
+$color-light-lightness-input-fore: 5 !default;
+$color-light-lightness-input-back: 95 !default;
+$color-light-lightness-input-border: 60 !default;
+$color-light-lightness-input-placeholder: 60 !default;
+//#endregion color-light-lightness-input
 //#region color-light-lightness-link
 $color-light-lightness-link-fore: 60 !default;
 //#endregion color-light-lightness-link
@@ -159,6 +169,14 @@ $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-nav
+$color-light-lightness-nav-fore: 5 !default;
+$color-light-lightness-nav-back: 95 !default;
+$color-light-lightness-nav-border: 70 !default;
+$color-light-lightness-nav-menu-item-fore: 05 !default;
+$color-light-lightness-nav-menu-item-shadow: 80 !default;
+//#endregion color-light-lightness-nav
 //#region color-light-lightness-progress
 $color-light-lightness-progress-fore: 70 !default;
 $color-light-lightness-progress-back: 95 !default;
@@ -174,6 +192,9 @@ $color-dark-lightness-border: 50 !default;
 $color-dark-lightness-placeholder: 50 !default;
 $color-dark-lightness-shadow: 50 !default;
+$color-dark-lightness-selection-fore: 95 !default;
+$color-dark-lightness-selection-back: 30 !default;
 //#region color-dark-lightness-dot
 $color-dark-lightness-dot-fore: 5 !default;
 $color-dark-lightness-dot-back: 15 !default;
@@ -211,23 +232,23 @@ $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
+//#region color-dark-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
+//#endregion color-dark-lightness-badge
-//#region color-light-lightness-blockquote
+//#region color-dark-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
+//#endregion color-dark-lightness-blockquote
-//#region color-light-lightness-blockquote
+//#region color-dark-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
+//#endregion color-dark-lightness-blockquote
 //#region color-dark-lightness-button
 $color-dark-lightness-button-fore: 95 !default;
@@ -272,6 +293,13 @@ $color-dark-lightness-header-back: 30 !default;
 $color-dark-lightness-header-shadow: 30 !default;
 //#endregion color-dark-lightness-header
+//#region color-dark-lightness-input
+$color-dark-lightness-input-fore: 95 !default;
+$color-dark-lightness-input-back: 5 !default;
+$color-dark-lightness-input-border: 40 !default;
+$color-dark-lightness-input-placeholder: 40 !default;
+//#endregion color-dark-lightness-input
 //#region color-dark-lightness-label
 $color-dark-lightness-label-fore: 70 !default;
 //#endregion color-dark-lightness-label
@@ -298,6 +326,14 @@ $color-dark-lightness-message-body-fore: 95 !default;
 $color-dark-lightness-message-body-back: 5 !default;
 //#endregion color-dark-lightness-card
+//#region color-dark-lightness-nav
+$color-dark-lightness-nav-fore: 95 !default;
+$color-dark-lightness-nav-back: 5 !default;
+$color-dark-lightness-nav-border: 30 !default;
+$color-dark-lightness-nav-menu-item-fore: 95 !default;
+$color-dark-lightness-nav-menu-item-shadow: 40 !default;
+//#endregion color-dark-lightness-nav
 //#region color-light-lightness-progress
 $color-dark-lightness-progress-fore: 80 !default;
 $color-dark-lightness-progress-back: 5 !default;
@@ -317,1010 +353,976 @@ $color-lightness-offset-visited: 0 !default;
 //#endregion color-lightness-offset
-//#region colorShadesLight
+//#region colorShades
-$colorShadesLight: (
+$colorShades: (
   //#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
-            ),
-        ),
+      fore: (
+        light: $color-light-lightness-fore,
+        dark: $color-dark-lightness-fore,
       ),
-      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),
+      back: (
+        light: $color-light-lightness-back,
+        dark: $color-dark-lightness-back,
       ),
-      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),
-        ),
+      border: (
+        light: $color-light-lightness-border,
+        dark: $color-dark-lightness-border,
       ),
-      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),
+      placeholder: (
+        light: $color-light-lightness-placeholder,
+        dark: $color-dark-lightness-placeholder,
       ),
-      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),
-        ),
+      shadow: (
+        light: $color-light-lightness-shadow,
+        dark: $color-dark-lightness-shadow,
       ),
-      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),
+      selection: (
+        fore: (
+          light: $color-light-lightness-selection-fore,
+          dark: $color-dark-lightness-selection-fore,
         ),
-      ),
-      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),
+        back: (
+          light: $color-light-lightness-selection-back,
+          dark: $color-dark-lightness-selection-back,
         ),
       ),
-      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
+      //#region backgrounds
+      //#region dot
+      dot: (
+          fore: (
+            light: $color-light-lightness-dot-fore,
+            dark: $color-dark-lightness-dot-fore,
+          ),
+          back: (
+            light: $color-light-lightness-dot-back,
+            dark: $color-dark-lightness-dot-back,
+          ),
         ),
-      back:
-        functions.zeroPadding(
-          $color-light-lightness-back + $color-lightness-offset-disabled,
-          2
+      //#endregion dot
+      //#region gingham
+      gingham: (
+          fore: (
+            light: $color-light-lightness-gingham-fore,
+            dark: $color-dark-lightness-gingham-fore,
+          ),
+          back: (
+            light: $color-light-lightness-gingham-back,
+            dark: $color-dark-lightness-gingham-back,
+          ),
         ),
-      border:
-        functions.zeroPadding(
-          $color-light-lightness-border + $color-lightness-offset-disabled,
-          2
+      //#endregion gingham
+      //#region rhombus
+      rhombus: (
+          fore: (
+            light: $color-light-lightness-rhombus-fore,
+            dark: $color-dark-lightness-rhombus-fore,
+          ),
+          back: (
+            light: $color-light-lightness-rhombus-back,
+            dark: $color-dark-lightness-rhombus-back,
+          ),
         ),
-      placeholder:
-        functions.zeroPadding(
-          $color-light-lightness-placeholder + $color-lightness-offset-disabled,
-          2
+      //#endregion rhombus
+      //#region stripe
+      stripe: (
+          fore: (
+            light: $color-light-lightness-stripe-fore,
+            dark: $color-dark-lightness-stripe-fore,
+          ),
+          back: (
+            light: $color-light-lightness-stripe-back,
+            dark: $color-dark-lightness-stripe-back,
+          ),
         ),
-      shadow:
-        functions.zeroPadding(
-          $color-light-lightness-shadow + $color-lightness-offset-disabled,
-          2
+      //#endregion stripe
+      //#region zigzag
+      zigzag: (
+          fore: (
+            light: $color-light-lightness-zigzag-fore,
+            dark: $color-dark-lightness-zigzag-fore,
+          ),
+          back: (
+            light: $color-light-lightness-zigzag-back,
+            dark: $color-dark-lightness-zigzag-back,
+          ),
         ),
+      //#endregion zigzag
+      //#endregion backgrounds
+      //#region components
+      //#region accordion
       accordion: (
-        accordionSummary: (
-          fore:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-fore +
-                $color-light-lightness-offset-disabled-fore,
-              2
+          fore: (
+            light: $color-light-lightness-accordion-fore,
+            dark: $color-dark-lightness-accordion-fore,
+          ),
+          back: (
+            light: $color-light-lightness-accordion-back,
+            dark: $color-dark-lightness-accordion-back,
+          ),
+          border: (
+            light: $color-light-lightness-accordion-border,
+            dark: $color-dark-lightness-accordion-border,
+          ),
+          accordionSummary: (
+            fore: (
+              light: $color-light-lightness-accordion-summary-fore,
+              dark: $color-dark-lightness-accordion-summary-fore,
+            ),
+            back: (
+              light: $color-light-lightness-accordion-summary-back,
+              dark: $color-dark-lightness-accordion-summary-back,
             ),
-          back:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-back +
-                $color-lightness-offset-disabled,
-              2
+            border: (
+              light: $color-light-lightness-accordion-summary-border,
+              dark: $color-dark-lightness-accordion-summary-border,
             ),
-          border:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-border +
-                $color-lightness-offset-disabled,
-              2
+          ),
+          accordionDetails: (
+            fore: (
+              light: $color-light-lightness-accordion-details-fore,
+              dark: $color-dark-lightness-accordion-details-fore,
+            ),
+            back: (
+              light: $color-light-lightness-accordion-details-back,
+              dark: $color-dark-lightness-accordion-details-back,
+            ),
+            border: (
+              light: $color-light-lightness-accordion-details-border,
+              dark: $color-dark-lightness-accordion-details-border,
             ),
+          ),
         ),
-      ),
+      //#endregion accordion
+      //#region badge
       badge: (
-        fore:
-          functions.zeroPadding(
-            $color-light-lightness-badge-fore +
-              $color-light-lightness-offset-disabled-fore,
-            2
+          fore: (
+            light: $color-light-lightness-badge-fore,
+            dark: $color-dark-lightness-badge-fore,
           ),
-        back:
-          functions.zeroPadding(
-            $color-light-lightness-badge-back + $color-lightness-offset-disabled,
-            2
+          back: (
+            light: $color-light-lightness-badge-back,
+            dark: $color-dark-lightness-badge-back,
           ),
-        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
+          border: (
+            light: $color-light-lightness-badge-border,
+            dark: $color-dark-lightness-badge-border,
           ),
-        back:
-          functions.zeroPadding(
-            $color-light-lightness-button-back +
-              $color-lightness-offset-disabled,
-            2
+        ),
+      //#endregion badge
+      //#region blockquote
+      blockquote: (
+          fore: (
+            light: $color-light-lightness-blockquote-fore,
+            dark: $color-dark-lightness-blockquote-fore,
           ),
-        border:
-          functions.zeroPadding(
-            $color-light-lightness-button-border +
-              $color-lightness-offset-disabled,
-            2
+          back: (
+            light: $color-light-lightness-blockquote-back,
+            dark: $color-dark-lightness-blockquote-back,
           ),
-        shadow:
-          functions.zeroPadding(
-            $color-light-lightness-button-shadow +
-              $color-lightness-offset-disabled,
-            2
+          border: (
+            light: $color-light-lightness-blockquote-border,
+            dark: $color-dark-lightness-blockquote-border,
           ),
-      ),
-    ),
-  //#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
+      //#endregion blockquote
+      //#region breadcrumbs
+      breadcrumbs: (
+          fore: (
+            light: $color-light-lightness-breadcrumbs-fore,
+            dark: $color-dark-lightness-breadcrumbs-fore,
+          ),
+          breadcrumb: (
+            fore: (
+              light: $color-light-lightness-breadcrumb-fore,
+              dark: $color-dark-lightness-breadcrumb-fore,
             ),
-          back:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-back +
-                $color-lightness-offset-hover,
-              2
+          ),
+          breadcrumbDivider: (
+            fore: (
+              light: $color-light-lightness-breadcrumb-divider-fore,
+              dark: $color-dark-lightness-breadcrumb-divider-fore,
             ),
+          ),
         ),
-      ),
-      badge: (
-        fore: functions.zeroPadding($color-light-lightness-badge-fore, 2),
-        back:
-          functions.zeroPadding(
-            $color-light-lightness-badge-back + $color-lightness-offset-hover,
-            2
+      //#endregion breadcrumbs
+      //#region button
+      button: (
+          fore: (
+            light: $color-light-lightness-button-fore,
+            dark: $color-dark-lightness-button-fore,
           ),
-        border:
-          functions.zeroPadding(
-            $color-light-lightness-badge-border + $color-lightness-offset-hover,
-            2
+          back: (
+            light: $color-light-lightness-button-back,
+            dark: $color-dark-lightness-button-back,
           ),
-      ),
-      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
+          border: (
+            light: $color-light-lightness-button-border,
+            dark: $color-dark-lightness-button-border,
+          ),
+          shadow: (
+            light: $color-light-lightness-button-shadow,
+            dark: $color-dark-lightness-button-shadow,
+          ),
+        ),
+      //#endregion button
+      //#region card
+      card: (
+          fore: (
+            light: $color-light-lightness-card-fore,
+            dark: $color-dark-lightness-card-fore,
+          ),
+          back: (
+            light: $color-light-lightness-card-back,
+            dark: $color-dark-lightness-card-back,
+          ),
+          border: (
+            light: $color-light-lightness-card-border,
+            dark: $color-dark-lightness-card-border,
+          ),
+          shadow: (
+            light: $color-light-lightness-card-shadow,
+            dark: $color-dark-lightness-card-shadow,
+          ),
+          cardHeader: (
+            fore: (
+              light: $color-light-lightness-card-header-fore,
+              dark: $color-dark-lightness-card-header-fore,
             ),
-          back:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-back,
-              2
+            back: (
+              light: $color-light-lightness-card-header-back,
+              dark: $color-dark-lightness-card-header-back,
             ),
-        ),
-      ),
-      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
+          ),
+          cardBody: (
+            fore: (
+              light: $color-light-lightness-card-body-fore,
+              dark: $color-dark-lightness-card-body-fore,
+            ),
+            back: (
+              light: $color-light-lightness-card-body-back,
+              dark: $color-dark-lightness-card-body-back,
+            ),
+          ),
+          cardFooter: (
+            fore: (
+              light: $color-light-lightness-card-footer-fore,
+              dark: $color-dark-lightness-card-footer-fore,
             ),
-          back:
-            functions.zeroPadding(
-              $color-light-lightness-accordion-summary-back +
-                $color-lightness-offset-active,
-              2
+            back: (
+              light: $color-light-lightness-card-footer-back,
+              dark: $color-dark-lightness-card-footer-back,
             ),
+          ),
         ),
-      ),
-      badge: (
-        fore: functions.zeroPadding($color-light-lightness-button-fore, 2),
-        back:
-          functions.zeroPadding(
-            $color-light-lightness-badge-back + $color-lightness-offset-active,
-            2
+      //#endregion card
+      //#region dialogue
+      dialogue: (
+          fore: (
+            light: $color-light-lightness-dialogue-fore,
+            dark: $color-dark-lightness-dialogue-fore,
           ),
-        border:
-          functions.zeroPadding(
-            $color-light-lightness-badge-border + $color-lightness-offset-active,
-            2
+          back: (
+            light: $color-light-lightness-dialogue-back,
+            dark: $color-dark-lightness-dialogue-back,
           ),
-      ),
-      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
+          border: (
+            light: $color-light-lightness-dialogue-border,
+            dark: $color-dark-lightness-dialogue-border,
           ),
-        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
+          dialogueAvatar: (
+            fore: (
+              light: $color-light-lightness-dialogue-avatar-fore,
+              dark: $color-dark-lightness-dialogue-avatar-fore,
             ),
-          back:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-summary-back,
-              2
+            back: (
+              light: $color-light-lightness-dialogue-avatar-back,
+              dark: $color-dark-lightness-dialogue-avatar-back,
             ),
-          border:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-summary-border,
-              2
+            border: (
+              light: $color-light-lightness-dialogue-avatar-border,
+              dark: $color-dark-lightness-dialogue-avatar-border,
             ),
-        ),
-        accordionDetails: (
-          fore:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-details-fore,
-              2
+          ),
+          dialogueName: (
+            fore: (
+              light: $color-light-lightness-dialogue-name-fore,
+              dark: $color-dark-lightness-dialogue-name-fore,
             ),
-          back:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-details-back,
-              2
+            back: (
+              light: $color-light-lightness-dialogue-name-back,
+              dark: $color-dark-lightness-dialogue-name-back,
             ),
-          border:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-details-border,
-              2
+            border: (
+              light: $color-light-lightness-dialogue-name-border,
+              dark: $color-dark-lightness-dialogue-name-border,
             ),
+            shadow: (
+              light: $color-light-lightness-dialogue-name-shadow,
+              dark: $color-dark-lightness-dialogue-name-shadow,
+            ),
+          ),
+          dialogueMessage: (
+            fore: (
+              light: $color-light-lightness-dialogue-message-fore,
+              dark: $color-dark-lightness-dialogue-message-fore,
+            ),
+            back: (
+              light: $color-light-lightness-dialogue-message-back,
+              dark: $color-dark-lightness-dialogue-message-back,
+            ),
+            border: (
+              light: $color-light-lightness-dialogue-message-border,
+              dark: $color-dark-lightness-dialogue-message-border,
+            ),
+          ),
         ),
-      ),
-      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),
+      //#endregion dialogue
+      //#region header
+      header: (
+          fore: (
+            light: $color-light-lightness-header-fore,
+            dark: $color-dark-lightness-header-fore,
+          ),
+          back: (
+            light: $color-light-lightness-header-back,
+            dark: $color-dark-lightness-header-back,
+          ),
+          shadow: (
+            light: $color-light-lightness-header-shadow,
+            dark: $color-dark-lightness-header-shadow,
+          ),
         ),
-      ),
-      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),
+      //#endregion header
+      //#region label
+      label: (
+          fore: (
+            light: $color-light-lightness-label-fore,
+            dark: $color-dark-lightness-label-fore,
+          ),
         ),
-      ),
-      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),
+      //#endregion label
+      //#region loader
+      loader: (
+          fore: (
+            light: $color-light-lightness-loader-fore,
+            dark: $color-dark-lightness-loader-fore,
+          ),
         ),
-      ),
-      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),
-      ),
+      //#endregion loader
+      //#region link
       link: (
-        fore: functions.zeroPadding($color-dark-lightness-link-fore, 2),
-      ),
-      loader: (
-        fore: functions.zeroPadding($color-dark-lightness-loader-fore, 2),
-      ),
+          fore: (
+            light: $color-light-lightness-link-fore,
+            dark: $color-dark-lightness-link-fore,
+          ),
+        ),
+      //#endregion link
+      //#region input
+      input: (
+          fore: (
+            light: $color-light-lightness-input-fore,
+            dark: $color-dark-lightness-input-fore,
+          ),
+          back: (
+            light: $color-light-lightness-input-back,
+            dark: $color-dark-lightness-input-back,
+          ),
+          border: (
+            light: $color-light-lightness-input-border,
+            dark: $color-dark-lightness-input-border,
+          ),
+          placeholder: (
+            light: $color-light-lightness-input-placeholder,
+            dark: $color-dark-lightness-input-placeholder,
+          ),
+        ),
+      //#endregion input
+      //#region message
       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),
+          fore: (
+            light: $color-light-lightness-message-fore,
+            dark: $color-dark-lightness-message-fore,
+          ),
+          back: (
+            light: $color-light-lightness-message-back,
+            dark: $color-dark-lightness-message-back,
+          ),
+          border: (
+            light: $color-light-lightness-message-border,
+            dark: $color-dark-lightness-message-border,
+          ),
+          messageHeader: (
+            fore: (
+              light: $color-light-lightness-message-header-fore,
+              dark: $color-dark-lightness-message-header-fore,
+            ),
+            back: (
+              light: $color-light-lightness-message-header-back,
+              dark: $color-dark-lightness-message-header-back,
+            ),
+          ),
+          messageBody: (
+            fore: (
+              light: $color-light-lightness-message-body-fore,
+              dark: $color-dark-lightness-message-body-fore,
+            ),
+            back: (
+              light: $color-light-lightness-message-body-back,
+              dark: $color-dark-lightness-message-body-back,
+            ),
+          ),
         ),
-      ),
+      //#endregion message
+      //#region nav
+      nav: (
+          fore: (
+            light: $color-light-lightness-nav-fore,
+            dark: $color-dark-lightness-nav-fore,
+          ),
+          back: (
+            light: $color-light-lightness-nav-back,
+            dark: $color-dark-lightness-nav-back,
+          ),
+          border: (
+            light: $color-light-lightness-nav-border,
+            dark: $color-dark-lightness-nav-border,
+          ),
+          navMenu: (
+            navMenuItem: (
+              fore: (
+                light: $color-light-lightness-nav-fore,
+                dark: $color-dark-lightness-nav-fore,
+              ),
+              shadow: (
+                light: $color-light-lightness-nav-menu-item-shadow,
+                dark: $color-dark-lightness-nav-menu-item-shadow,
+              ),
+            ),
+          ),
+        ),
+      //#endregion nav
       progress: (
-        fore: functions.zeroPadding($color-dark-lightness-progress-fore, 2),
-        back: functions.zeroPadding($color-dark-lightness-progress-back, 2),
-      ),
+          fore: (
+            light: $color-light-lightness-progress-fore,
+            dark: $color-dark-lightness-progress-fore,
+          ),
+          back: (
+            light: $color-light-lightness-progress-back,
+            dark: $color-dark-lightness-progress-back,
+          ),
+        ),
+      //#endregion components
     ),
   //#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
-        ),
+      fore: (
+        light: $color-light-lightness-fore +
+          $color-light-lightness-offset-disabled-fore,
+        dark: $color-dark-lightness-fore +
+          $color-dark-lightness-offset-disabled-fore,
+      ),
+      back: (
+        light: $color-light-lightness-back + $color-lightness-offset-disabled,
+        dark: $color-dark-lightness-back + $color-lightness-offset-disabled,
+      ),
+      border: (
+        light: $color-light-lightness-border + $color-lightness-offset-disabled,
+        dark: $color-dark-lightness-border + $color-lightness-offset-disabled,
+      ),
+      placeholder: (
+        light: $color-light-lightness-placeholder +
+          $color-lightness-offset-disabled,
+        dark: $color-dark-lightness-placeholder +
+          $color-lightness-offset-disabled,
+      ),
+      shadow: (
+        light: $color-light-lightness-shadow + $color-lightness-offset-disabled,
+        dark: $color-dark-lightness-shadow + $color-lightness-offset-disabled,
+      ),
       accordion: (
         accordionSummary: (
-          fore:
-            functions.zeroPadding(
-              $color-dark-lightness-accordion-summary-fore +
+          fore: (
+            light: $color-light-lightness-accordion-summary-fore +
+              $color-light-lightness-offset-disabled-fore,
+            dark: $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
+          back: (
+            light: $color-light-lightness-accordion-summary-back +
+              $color-lightness-offset-disabled,
+            dark: $color-dark-lightness-accordion-summary-back +
+              $color-lightness-offset-disabled,
           ),
-        border:
-          functions.zeroPadding(
-            $color-dark-lightness-badge-border +
+          border: (
+            light: $color-light-lightness-accordion-summary-border +
+              $color-lightness-offset-disabled,
+            dark: $color-dark-lightness-accordion-summary-border +
               $color-lightness-offset-disabled,
-            2
           ),
+        ),
       ),
-      button: (
-        fore:
-          functions.zeroPadding(
-            $color-dark-lightness-button-fore +
+      badge: (
+        fore: (
+          light: $color-light-lightness-badge-fore +
+            $color-light-lightness-offset-disabled-fore,
+          dark: $color-dark-lightness-badge-fore +
             $color-dark-lightness-offset-disabled-fore,
-            2
+        ),
+        back: (
+          light: $color-light-lightness-badge-back +
+            $color-lightness-offset-disabled,
+          dark: $color-dark-lightness-badge-back +
+            $color-lightness-offset-disabled,
+        ),
+        border: (
+          light: $color-light-lightness-badge-border +
+            $color-lightness-offset-disabled,
+          dark: $color-dark-lightness-badge-border +
+            $color-lightness-offset-disabled,
+        ),
+      ),
+      //#region button
+      button: (
+          fore: (
+            light: $color-light-lightness-button-fore +
+              $color-light-lightness-offset-disabled-fore,
+            dark: $color-dark-lightness-button-fore +
+              $color-dark-lightness-offset-disabled-fore,
           ),
-        back:
-          functions.zeroPadding(
-            $color-dark-lightness-button-back + $color-lightness-offset-disabled,
-            2
+          back: (
+            light: $color-light-lightness-button-back +
+              $color-lightness-offset-disabled,
+            dark: $color-dark-lightness-button-back +
+              $color-lightness-offset-disabled,
           ),
-        border:
-          functions.zeroPadding(
-            $color-dark-lightness-button-border +
+          border: (
+            light: $color-light-lightness-button-border +
+              $color-lightness-offset-disabled,
+            dark: $color-dark-lightness-button-border +
               $color-lightness-offset-disabled,
-            2
           ),
-        shadow:
-          functions.zeroPadding(
-            $color-dark-lightness-button-shadow +
+          shadow: (
+            light: $color-light-lightness-button-shadow +
+              $color-lightness-offset-disabled,
+            dark: $color-dark-lightness-button-shadow +
               $color-lightness-offset-disabled,
-            2
           ),
-      ),
+        ),
+      //#endregion button
+      //#region nav
+      nav: (
+          navMenu: (
+            navMenuItem: (
+              fore: (
+                light: $color-light-lightness-nav-fore +
+                  $color-light-lightness-offset-disabled-fore,
+                dark: $color-dark-lightness-nav-fore +
+                  $color-light-lightness-offset-disabled-fore,
+              ),
+              shadow: (
+                light: $color-light-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-disabled,
+                dark: $color-dark-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-disabled,
+              ),
+            ),
+          ),
+        ),
+      //#endregion nav
     ),
   //#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
-        ),
+      fore: (
+        light: $color-light-lightness-fore + $color-lightness-offset-hover,
+        dark: $color-dark-lightness-fore + $color-lightness-offset-hover,
+      ),
+      back: (
+        light: $color-light-lightness-back + $color-lightness-offset-hover,
+        dark: $color-dark-lightness-back + $color-lightness-offset-hover,
+      ),
+      border: (
+        light: $color-light-lightness-border + $color-lightness-offset-hover,
+        dark: $color-dark-lightness-border + $color-lightness-offset-hover,
+      ),
+      placeholder: (
+        light: $color-light-lightness-placeholder +
+          $color-lightness-offset-hover,
+        dark: $color-dark-lightness-placeholder + $color-lightness-offset-hover,
+      ),
+      shadow: (
+        light: $color-light-lightness-shadow + $color-lightness-offset-hover,
+        dark: $color-dark-lightness-shadow + $color-lightness-offset-hover,
+      ),
       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
-            ),
+          fore: (
+            light: $color-light-lightness-accordion-summary-fore +
+              $color-lightness-offset-hover,
+            dark: $color-dark-lightness-accordion-summary-fore +
+              $color-lightness-offset-hover,
+          ),
+          back: (
+            light: $color-light-lightness-accordion-summary-back +
+              $color-lightness-offset-hover,
+            dark: $color-dark-lightness-accordion-summary-back +
+              $color-lightness-offset-hover,
+          ),
+          border: (
+            light: $color-light-lightness-accordion-summary-border +
+              $color-lightness-offset-hover,
+            dark: $color-dark-lightness-accordion-summary-border +
+              $color-lightness-offset-hover,
+          ),
         ),
       ),
       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
-          ),
+        fore: (
+          light: $color-light-lightness-badge-fore,
+          dark: $color-dark-lightness-badge-fore + $color-lightness-offset-hover,
+        ),
+        back: (
+          light: $color-light-lightness-badge-back +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-badge-back + $color-lightness-offset-hover,
+        ),
+        border: (
+          light: $color-light-lightness-badge-border +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-badge-border +
+            $color-lightness-offset-hover,
+        ),
       ),
       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",
-      ),
+        fore: (
+          light: $color-light-lightness-button-fore +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-button-fore +
+            $color-lightness-offset-hover,
+        ),
+        back: (
+          light: $color-light-lightness-button-back +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-button-back +
+            $color-lightness-offset-hover,
+        ),
+        border: (
+          light: $color-light-lightness-button-border +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-button-border +
+            $color-lightness-offset-hover,
+        ),
+        shadow: (
+          light: $color-light-lightness-button-shadow +
+            $color-lightness-offset-hover,
+          dark: $color-dark-lightness-button-shadow +
+            $color-lightness-offset-hover,
+        ),
+      ),
+      //#region nav
+      nav: (
+          navMenu: (
+            navMenuItem: (
+              fore: (
+                light: $color-light-lightness-nav-fore +
+                  $color-lightness-offset-hover,
+                dark: $color-dark-lightness-nav-fore +
+                  $color-lightness-offset-hover,
+              ),
+              shadow: (
+                light: $color-light-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-hover,
+                dark: $color-dark-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-hover,
+              ),
+            ),
+          ),
+        ),
+      //#endregion nav
     ),
   //#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),
+      fore: (
+        light: $color-light-lightness-fore + $color-lightness-offset-focus,
+        dark: $color-dark-lightness-fore + $color-lightness-offset-focus,
+      ),
+      back: (
+        light: $color-light-lightness-back + $color-lightness-offset-focus,
+        dark: $color-dark-lightness-back + $color-lightness-offset-focus,
+      ),
+      border: (
+        light: $color-light-lightness-border + $color-lightness-offset-focus,
+        dark: $color-dark-lightness-border + $color-lightness-offset-focus,
+      ),
+      placeholder: (
+        light: $color-light-lightness-placeholder +
+          $color-lightness-offset-focus,
+        dark: $color-dark-lightness-placeholder + $color-lightness-offset-focus,
+      ),
+      shadow: (
+        light: $color-light-lightness-shadow + $color-lightness-offset-focus,
+        dark: $color-dark-lightness-shadow + $color-lightness-offset-focus,
+      ),
       accordion: (
         accordionSummary: (
-          fore: "95",
-          back: "30",
-          border: "50",
+          fore: (
+            light: $color-light-lightness-accordion-summary-fore,
+            dark: $color-dark-lightness-accordion-summary-fore,
+          ),
+          back: (
+            light: $color-light-lightness-accordion-summary-back,
+            dark: $color-dark-lightness-accordion-summary-back,
+          ),
+          border: (
+            light: $color-light-lightness-accordion-summary-border,
+            dark: $color-dark-lightness-accordion-summary-border,
+          ),
         ),
       ),
       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),
+        fore: (
+          light: $color-light-lightness-badge-fore,
+          dark: $color-dark-lightness-badge-fore,
+        ),
+        back: (
+          light: $color-light-lightness-badge-back,
+          dark: $color-dark-lightness-badge-back,
+        ),
+        border: (
+          light: $color-light-lightness-badge-border,
+          dark: $color-dark-lightness-badge-border,
+        ),
       ),
       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),
+        fore: (
+          light: $color-light-lightness-button-fore,
+          dark: $color-dark-lightness-button-fore,
+        ),
+        back: (
+          light: $color-light-lightness-button-back,
+          dark: $color-dark-lightness-button-back,
+        ),
+        border: (
+          light: $color-light-lightness-button-border,
+          dark: $color-dark-lightness-button-border,
+        ),
+        shadow: (
+          light: $color-light-lightness-button-shadow,
+          dark: $color-dark-lightness-button-shadow,
+        ),
       ),
+      //#region input
+      input: (
+          back: (
+            light: $color-light-lightness-input-back,
+            dark: $color-dark-lightness-input-back,
+          ),
+          border: (
+            light: $color-light-lightness-input-border +
+              $color-lightness-offset-focus,
+            dark: $color-dark-lightness-input-border +
+              $color-lightness-offset-focus,
+          ),
+        ),
+      //#region nav
+      nav: (
+          navMenu: (
+            navMenuItem: (
+              fore: (
+                light: $color-light-lightness-nav-fore,
+                dark: $color-dark-lightness-nav-fore,
+              ),
+              shadow: (
+                light: $color-light-lightness-nav-menu-item-shadow,
+                dark: $color-dark-lightness-nav-menu-item-shadow,
+              ),
+            ),
+          ),
+        ),
+      //#endregion nav
     ),
   //#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
-        ),
+      fore: (
+        light: $color-light-lightness-fore + $color-lightness-offset-active,
+        dark: $color-dark-lightness-fore + $color-lightness-offset-active,
+      ),
+      back: (
+        light: $color-light-lightness-back + $color-lightness-offset-active,
+        dark: $color-dark-lightness-back + $color-lightness-offset-active,
+      ),
+      border: (
+        light: $color-light-lightness-border + $color-lightness-offset-active,
+        dark: $color-dark-lightness-border + $color-lightness-offset-active,
+      ),
+      placeholder: (
+        light: $color-light-lightness-placeholder +
+          $color-lightness-offset-active,
+        dark: $color-dark-lightness-placeholder + $color-lightness-offset-active,
+      ),
+      shadow: (
+        light: $color-light-lightness-shadow + $color-lightness-offset-active,
+        dark: $color-dark-lightness-shadow + $color-lightness-offset-active,
+      ),
       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
-            ),
+          fore: (
+            light: $color-light-lightness-accordion-summary-fore +
+              $color-lightness-offset-active,
+            dark: $color-dark-lightness-accordion-summary-fore +
+              $color-lightness-offset-active,
+          ),
+          back: (
+            light: $color-light-lightness-accordion-summary-back +
+              $color-lightness-offset-active,
+            dark: $color-dark-lightness-accordion-summary-back +
+              $color-lightness-offset-active,
+          ),
         ),
       ),
       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
-          ),
+        fore: (
+          light: $color-light-lightness-badge-fore,
+          dark: $color-dark-lightness-badge-fore,
+        ),
+        back: (
+          light: $color-light-lightness-badge-back +
+            $color-lightness-offset-active,
+          dark: $color-dark-lightness-badge-back +
+            $color-lightness-offset-active,
+        ),
+        border: (
+          light: $color-light-lightness-badge-border +
+            $color-lightness-offset-active,
+          dark: $color-dark-lightness-badge-border +
+            $color-lightness-offset-active,
+        ),
       ),
       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),
-      ),
+        fore: (
+          light: $color-light-lightness-button-fore,
+          dark: $color-dark-lightness-button-fore,
+        ),
+        back: (
+          light: $color-light-lightness-button-back +
+            $color-lightness-offset-active,
+          dark: $color-dark-lightness-button-back +
+            $color-lightness-offset-active,
+        ),
+        border: (
+          light: $color-light-lightness-button-border +
+            $color-lightness-offset-active,
+          dark: $color-dark-lightness-button-border +
+            $color-lightness-offset-active,
+        ),
+        shadow: (
+          light: $color-light-lightness-button-shadow +
+            $color-lightness-offset-active,
+          dark: $color-dark-lightness-button-shadow +
+            $color-lightness-offset-active,
+        ),
+      ),
+      //#region nav
+      nav: (
+          navMenu: (
+            navMenuItem: (
+              fore: (
+                light: $color-light-lightness-nav-fore +
+                  $color-lightness-offset-active,
+                dark: $color-dark-lightness-nav-fore +
+                  $color-lightness-offset-active,
+              ),
+              shadow: (
+                light: $color-light-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-active,
+                dark: $color-dark-lightness-nav-menu-item-shadow +
+                  $color-lightness-offset-active,
+              ),
+            ),
+          ),
+        ),
+      //#endregion nav
     ),
   //#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
-        ),
+      fore: (
+        light: $color-light-lightness-fore + $color-lightness-offset-visited,
+        dark: $color-dark-lightness-fore + $color-lightness-offset-visited,
+      ),
+      back: (
+        light: $color-light-lightness-back + $color-lightness-offset-visited,
+        dark: $color-dark-lightness-back + $color-lightness-offset-visited,
+      ),
+      border: (
+        light: $color-light-lightness-border + $color-lightness-offset-visited,
+        dark: $color-dark-lightness-border + $color-lightness-offset-visited,
+      ),
+      placeholder: (
+        light: $color-light-lightness-placeholder +
+          $color-lightness-offset-visited,
+        dark: $color-dark-lightness-placeholder +
+          $color-lightness-offset-visited,
+      ),
+      shadow: (
+        light: $color-light-lightness-shadow + $color-lightness-offset-visited,
+        dark: $color-dark-lightness-shadow + $color-lightness-offset-visited,
+      ),
       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),
+        fore: (
+          light: $color-light-lightness-badge-fore,
+          dark: $color-dark-lightness-badge-fore,
+        ),
+        back: (
+          light: $color-light-lightness-badge-back,
+          dark: $color-dark-lightness-badge-back,
+        ),
+        border: (
+          light: $color-light-lightness-badge-border,
+          dark: $color-dark-lightness-badge-border,
+        ),
       ),
       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),
+        fore: (
+          light: $color-light-lightness-button-fore,
+          dark: $color-dark-lightness-button-fore,
+        ),
+        back: (
+          light: $color-light-lightness-button-back,
+          dark: $color-dark-lightness-button-back,
+        ),
+        border: (
+          light: $color-light-lightness-button-border,
+          dark: $color-dark-lightness-button-border,
+        ),
+        shadow: (
+          light: $color-light-lightness-button-shadow,
+          dark: $color-dark-lightness-button-shadow,
+        ),
       ),
       link: (
-        fore:
-          functions.zeroPadding(
-            $color-dark-lightness-link-fore + $color-lightness-offset-visited,
-            2
-          ),
+        fore: (
+          light: $color-light-lightness-link-fore +
+            $color-lightness-offset-visited,
+          dark: $color-dark-lightness-link-fore +
+            $color-lightness-offset-visited,
+        ),
       ),
-    )
-    //#endregion visited
+    ) //#endregion visited
 );
-//#endregion colorShadesDark
+//#endregion colorShades
 //#endregion define color shades array
@@ -1328,48 +1330,86 @@ $colorShadesDark: (
 $colors: (
   (
-    "name": "gray",
-    "hue": $color-hue-gray,
+    name: "gray",
+    hue: $color-hue-gray,
+  ),
+  (
+    name: "red",
+    hue: $color-hue-red,
+  ),
+  (
+    name: "coral",
+    hue: $color-hue-coral,
   ),
   (
-    "name": "red",
-    "hue": $color-hue-red,
+    name: "orange",
+    hue: $color-hue-orange,
   ),
   (
-    "name": "coral",
-    "hue": $color-hue-coral,
+    name: "yellow",
+    hue: $color-hue-yellow,
   ),
   (
-    "name": "orange",
-    "hue": $color-hue-orange,
+    name: "lime",
+    hue: $color-hue-lime,
   ),
   (
-    "name": "yellow",
-    "hue": $color-hue-yellow,
+    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;
+$semanticColors: (
+  (
+    name: "primary",
+    colorName: "violet",
+    lightnessOffset: 0,
   ),
   (
-    "name": "lime",
-    "hue": $color-hue-lime,
+    name: "secondary",
+    colorName: "gray",
+    lightnessOffset: -10,
   ),
   (
-    "name": "green",
-    "hue": $color-hue-green,
+    name: "tertiary",
+    colorName: "gray",
+    lightnessOffset: -20,
   ),
   (
-    "name": "cyan",
-    "hue": $color-hue-cyan,
+    name: "info",
+    colorName: "blue",
+    lightnessOffset: 0,
   ),
   (
-    "name": "blue",
-    "hue": $color-hue-blue,
+    name: "success",
+    colorName: "green",
+    lightnessOffset: 0,
   ),
   (
-    "name": "violet",
-    "hue": $color-hue-violet,
+    name: "warning",
+    colorName: "yellow",
+    lightnessOffset: 0,
   ),
   (
-    "name": "magenta",
-    "hue": $color-hue-magenta,
+    name: "danger",
+    colorName: "red",
+    lightnessOffset: 0,
   )
 ) !default;