backgrounds

css

:where(.dot)

:where(.dot) { ... }

:where(.gingham)

:where(.gingham) { ... }

:where(.stripe)

:where(.stripe) { ... }

components

css

:where(.accordion)

:where(.accordion) { ... }

:where(.admin-nav)

:where(.admin-nav) { ... }

:where(.badge)

:where(.badge) { ... }

:where(.button)

:where(.button) { ... }

:where(.card)

:where(.card) { ... }

:where(.checkbox)

:where(.checkbox) { ... }

:where(.code)

:where(.code) { ... }

:where(.dialog)

:where(.dialog) { ... }

:where(.element)

:where(.element) { ... }

:where(.footer)

:where(.footer) { ... }

:where(.hamburger)

:where(.hamburger) { ... }

:where(.header)

:where(.header) { ... }

:where(.heading-1)

:where(.heading-1) { ... }

:where(.heading-2)

:where(.heading-2) { ... }

:where(.heading-3)

:where(.heading-3) { ... }

:where(.heading-4)

:where(.heading-4) { ... }

:where(.heading-5)

:where(.heading-5) { ... }

:where(.heading-6)

:where(.heading-6) { ... }

:where(.icon)

:where(.icon) { ... }

:where(.image)

:where(.image) { ... }

:where(.input)

:where(.input) { ... }

:where(.label)

:where(.label) { ... }

:where(.link)

:where(.link) { ... }

:where(.list)

:where(.list) { ... }

:where(.loader)

:where(.loader) { ... }

:where(.main)

:where(.main) { ... }

:where(.nav)

:where(.nav) { ... }

:where(.paragraph)

:where(.paragraph) { ... }

:where(.pre)

:where(.pre) { ... }

:where(.progress)

:where(.progress) { ... }

:where(.tile)

:where(.tile) { ... }

cssvariables

css

:where(:root)

:where(:root) { ... }

Description

animation cssvariables

:where(:root)

:where(:root) { ... }

Description

border cssvariables

:where(:root)

:where(:root) { ... }

Description

common cssvariables

:where(:root)

:where(:root) { ... }

Description

components/breadcrumb settings

:where(:root)

:where(:root) { ... }

Description

components/dialog settings

:where(:root)

:where(:root) { ... }

Description

components/header settings

:where(:root)

:where(:root) { ... }

Description

typography cssvariables

functions

zeroPadding

@function zeroPadding($num, $length) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	— none	`Number`	— none
`$length`	— none	`Number`	— none

Returns

String

Used by

[function] lightnessNumberToString

strReplace

@function strReplace($str, $substr, $newsubstr, $all: false) { ... }

Description

replace string

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	— none	`String`	— none
`$substr`	— none	`Number`	— none
`$newsubstr`	— none	`Number`	— none
`$all`	— none	`Boolean`	`false`

Returns

String

lightnessNumberToString

@function lightnessNumberToString($num) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	— none	`Number`	— none

Returns

String

Requires

[function] zeroPadding

variables

borderSides

$borderSides: (
  "top",
  "right",
  "bottom",
  "left",
);

Type

List

borderStyles

$borderStyles: (
  "solid",
  "dashed",
  "dotted",
);

Type

List

borderWidths

$borderWidths: (
  "xthin",
  "thin",
  "medium",
  "thick",
  "xthick",
);

Type

List

borderRadiuses

$borderRadiuses: (
  "small",
  "medium",
  "large",
  "circle",
  "pill",
);

Type

List

colorShades

$colorShades: (
  //#region plain
  (
      name: "plain",
      fore: (
        light: $color-light-lightness-fore,
        dark: $color-dark-lightness-fore,
      ),
      back: (
        light: $color-light-lightness-back,
        dark: $color-dark-lightness-back,
      ),
      border: (
        light: $color-light-lightness-border,
        dark: $color-dark-lightness-border,
      ),
      placeholder: (
        light: $color-light-lightness-placeholder,
        dark: $color-dark-lightness-placeholder,
      ),
      shadow: (
        light: $color-light-lightness-shadow,
        dark: $color-dark-lightness-shadow,
      ),
      outline: (
        light: $color-light-lightness-outline,
        dark: $color-dark-lightness-outline,
      ),
      selection: (
        fore: (
          light: $color-light-lightness-selection-fore,
          dark: $color-dark-lightness-selection-fore,
        ),
        back: (
          light: $color-light-lightness-selection-back,
          dark: $color-dark-lightness-selection-back,
        ),
      ),
      //#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,
          ),
        ),
      //#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,
          ),
        ),
      //#endregion gingham
      //#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,
          ),
        ),
      //#endregion stripe
      //#endregion backgrounds
      //#region components
      //#region accordion
      accordion: (
          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,
            ),
            border: (
              light: $color-light-lightness-accordion-summary-border,
              dark: $color-dark-lightness-accordion-summary-border,
            ),
          ),
          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 admin-nav
      adminNav: (
          fore: (
            light: $color-light-lightness-admin-nav-fore,
            dark: $color-dark-lightness-admin-nav-fore,
          ),
          back: (
            light: $color-light-lightness-admin-nav-back,
            dark: $color-dark-lightness-admin-nav-back,
          ),
          border: (
            light: $color-light-lightness-admin-nav-border,
            dark: $color-dark-lightness-admin-nav-border,
          ),
          adminNavBrand: (
            fore: (
              light: $color-light-lightness-admin-nav-brand-fore,
              dark: $color-dark-lightness-admin-nav-brand-fore,
            ),
            back: (
              light: $color-light-lightness-admin-nav-brand-back,
              dark: $color-dark-lightness-admin-nav-brand-back,
            ),
            border: (
              light: $color-light-lightness-admin-nav-brand-border,
              dark: $color-dark-lightness-admin-nav-brand-border,
            ),
          ),
          adminNavMenu: (
            fore: (
              light: $color-light-lightness-admin-nav-menu-fore,
              dark: $color-dark-lightness-admin-nav-menu-fore,
            ),
            back: (
              light: $color-light-lightness-admin-nav-menu-back,
              dark: $color-dark-lightness-admin-nav-menu-back,
            ),
            border: (
              light: $color-light-lightness-admin-nav-menu-border,
              dark: $color-dark-lightness-admin-nav-menu-border,
            ),
            adminNavMenuItem: (
              fore: (
                light: $color-light-lightness-admin-nav-menu-item-fore,
                dark: $color-dark-lightness-admin-nav-menu-item-fore,
              ),
              back: (
                light: $color-light-lightness-admin-nav-menu-item-back,
                dark: $color-dark-lightness-admin-nav-menu-item-back,
              ),
              border: (
                light: $color-light-lightness-admin-nav-menu-item-border,
                dark: $color-dark-lightness-admin-nav-menu-item-border,
              ),
            ),
          ),
        ),
      //#endregion admin-nav
      //#region badge
      badge: (
          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,
          ),
        ),
      //#endregion badge
      //#region blockquote
      blockquote: (
          fore: (
            light: $color-light-lightness-blockquote-fore,
            dark: $color-dark-lightness-blockquote-fore,
          ),
          back: (
            light: $color-light-lightness-blockquote-back,
            dark: $color-dark-lightness-blockquote-back,
          ),
          border: (
            light: $color-light-lightness-blockquote-border,
            dark: $color-dark-lightness-blockquote-border,
          ),
        ),
      //#endregion blockquote
      //#region breadcrumb
      breadcrumb: (
          fore: (
            light: $color-light-lightness-breadcrumb-fore,
            dark: $color-dark-lightness-breadcrumb-fore,
          ),
          breadcrumbItem: (
            fore: (
              light: $color-light-lightness-breadcrumb-item-fore,
              dark: $color-dark-lightness-breadcrumb-item-fore,
            ),
          ),
          breadcrumbDivider: (
            fore: (
              light: $color-light-lightness-breadcrumb-divider-fore,
              dark: $color-dark-lightness-breadcrumb-divider-fore,
            ),
          ),
        ),
      //#endregion breadcrumb
      //#region button
      button: (
          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,
          ),
        ),
      //#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: (
              light: $color-light-lightness-card-header-back,
              dark: $color-dark-lightness-card-header-back,
            ),
          ),
          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: (
              light: $color-light-lightness-card-footer-back,
              dark: $color-dark-lightness-card-footer-back,
            ),
          ),
        ),
      //#endregion card
      //#region dialog
      dialog: (
          fore: (
            light: $color-light-lightness-dialog-fore,
            dark: $color-dark-lightness-dialog-fore,
          ),
          back: (
            light: $color-light-lightness-dialog-back,
            dark: $color-dark-lightness-dialog-back,
          ),
          border: (
            light: $color-light-lightness-dialog-border,
            dark: $color-dark-lightness-dialog-border,
          ),
          dialogAvatar: (
            fore: (
              light: $color-light-lightness-dialog-avatar-fore,
              dark: $color-dark-lightness-dialog-avatar-fore,
            ),
            back: (
              light: $color-light-lightness-dialog-avatar-back,
              dark: $color-dark-lightness-dialog-avatar-back,
            ),
            border: (
              light: $color-light-lightness-dialog-avatar-border,
              dark: $color-dark-lightness-dialog-avatar-border,
            ),
          ),
          dialogName: (
            fore: (
              light: $color-light-lightness-dialog-name-fore,
              dark: $color-dark-lightness-dialog-name-fore,
            ),
            back: (
              light: $color-light-lightness-dialog-name-back,
              dark: $color-dark-lightness-dialog-name-back,
            ),
            border: (
              light: $color-light-lightness-dialog-name-border,
              dark: $color-dark-lightness-dialog-name-border,
            ),
            shadow: (
              light: $color-light-lightness-dialog-name-shadow,
              dark: $color-dark-lightness-dialog-name-shadow,
            ),
          ),
          dialogMessage: (
            fore: (
              light: $color-light-lightness-dialog-message-fore,
              dark: $color-dark-lightness-dialog-message-fore,
            ),
            back: (
              light: $color-light-lightness-dialog-message-back,
              dark: $color-dark-lightness-dialog-message-back,
            ),
            border: (
              light: $color-light-lightness-dialog-message-border,
              dark: $color-dark-lightness-dialog-message-border,
            ),
          ),
        ),
      //#endregion dialog
      //#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,
          ),
        ),
      //#endregion header
      //#region label
      label: (
          fore: (
            light: $color-light-lightness-label-fore,
            dark: $color-dark-lightness-label-fore,
          ),
        ),
      //#endregion label
      //#region loader
      loader: (
          fore: (
            light: $color-light-lightness-loader-fore,
            dark: $color-dark-lightness-loader-fore,
          ),
        ),
      //#endregion loader
      //#region link
      link: (
          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,
          ),
          outline: (
            light: $color-light-lightness-input-outline,
            dark: $color-dark-lightness-input-outline,
          ),
        ),
      //#endregion input
      //#region message
      message: (
          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: (
            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,
          ),
        ),
      tile: (
        fore: (
          light: $color-light-lightness-tile-fore,
          dark: $color-dark-lightness-tile-fore,
        ),
        back: (
          light: $color-light-lightness-tile-back,
          dark: $color-dark-lightness-tile-back,
        ),
        shadow: (
          light: $color-light-lightness-tile-shadow,
          dark: $color-dark-lightness-tile-shadow,
        ),
        tileHeader: (
          fore: (
            light: $color-light-lightness-tile-header-fore,
            dark: $color-dark-lightness-tile-header-fore,
          ),
          back: (
            light: $color-light-lightness-tile-header-back,
            dark: $color-dark-lightness-tile-header-back,
          ),
          border: (
            light: $color-light-lightness-tile-header-border,
            dark: $color-dark-lightness-tile-header-border,
          ),
        ),
      ),
      //#endregion components
    ),
  //#endregion plain
  //#region disabled
  (
      name: "disabled",
      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,
      ),
      //#region accordion
      accordion: (
          accordionSummary: (
            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,
            ),
            back: (
              light: $color-light-lightness-accordion-summary-back +
                $color-lightness-offset-disabled,
              dark: $color-dark-lightness-accordion-summary-back +
                $color-lightness-offset-disabled,
            ),
            border: (
              light: $color-light-lightness-accordion-summary-border +
                $color-lightness-offset-disabled,
              dark: $color-dark-lightness-accordion-summary-border +
                $color-lightness-offset-disabled,
            ),
          ),
        ),
      //#endregion accordion
      //#region admin-nav
      adminNav: (
          adminNavMenu: (
            adminNavMenuItem: (
              fore: (
                light: $color-light-lightness-admin-nav-menu-item-fore +
                  $color-light-lightness-offset-disabled-fore,
                dark: $color-dark-lightness-admin-nav-menu-item-fore +
                  $color-light-lightness-offset-disabled-fore,
              ),
              back: (
                light: $color-light-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-disabled,
                dark: $color-dark-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-disabled,
              ),
              border: (
                light: $color-light-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-disabled,
                dark: $color-dark-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-disabled,
              ),
            ),
          ),
        ),
      //#endregion admin-nav
      //#region badge
      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,
          ),
          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,
          ),
        ),
      //#endregion badge
      //#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: (
            light: $color-light-lightness-button-back +
              $color-lightness-offset-disabled,
            dark: $color-dark-lightness-button-back +
              $color-lightness-offset-disabled,
          ),
          border: (
            light: $color-light-lightness-button-border +
              $color-lightness-offset-disabled,
            dark: $color-dark-lightness-button-border +
              $color-lightness-offset-disabled,
          ),
          shadow: (
            light: $color-light-lightness-button-shadow +
              $color-lightness-offset-disabled,
            dark: $color-dark-lightness-button-shadow +
              $color-lightness-offset-disabled,
          ),
        ),
      //#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: (
        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: (
            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,
          ),
        ),
      ),
      //#region admin-nav
      adminNav: (
          adminNavMenu: (
            adminNavMenuItem: (
              fore: (
                light: $color-light-lightness-admin-nav-menu-item-fore +
                  $color-lightness-offset-hover,
                dark: $color-dark-lightness-admin-nav-menu-item-fore +
                  $color-lightness-offset-hover,
              ),
              back: (
                light: $color-light-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-hover,
                dark: $color-dark-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-hover,
              ),
              border: (
                light: $color-light-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-hover,
                dark: $color-dark-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-hover,
              ),
            ),
          ),
        ),
      //#endregion admin-nav
      badge: (
          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: (
          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: (
        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: (
            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,
          ),
        ),
      ),
      //#region admin-nav
      adminNav: (
          adminNavMenu: (
            adminNavMenuItem: (
              fore: (
                light: $color-light-lightness-admin-nav-menu-item-fore,
                dark: $color-dark-lightness-admin-nav-menu-item-fore,
              ),
              back: (
                light: $color-light-lightness-admin-nav-menu-item-back,
                dark: $color-dark-lightness-admin-nav-menu-item-back,
              ),
              border: (
                light: $color-light-lightness-admin-nav-menu-item-border,
                dark: $color-dark-lightness-admin-nav-menu-item-border,
              ),
            ),
          ),
        ),
      //#endregion admin-nav
      badge: (
          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: (
          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,
          ),
        ),
      //#endregion input
      //#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: (
        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: (
            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,
          ),
        ),
      ),
      //#region admin-nav
      adminNav: (
          adminNavMenu: (
            adminNavMenuItem: (
              fore: (
                light: $color-light-lightness-admin-nav-menu-item-fore +
                  $color-lightness-offset-active,
                dark: $color-dark-lightness-admin-nav-menu-item-fore +
                  $color-lightness-offset-active,
              ),
              back: (
                light: $color-light-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-active,
                dark: $color-dark-lightness-admin-nav-menu-item-back +
                  $color-lightness-offset-active,
              ),
              border: (
                light: $color-light-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-active,
                dark: $color-dark-lightness-admin-nav-menu-item-border +
                  $color-lightness-offset-active,
              ),
            ),
          ),
        ),
      //#endregion admin-nav
      badge: (
          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: (
          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: (
        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: (
          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: (
          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: (
          light: $color-light-lightness-link-fore +
            $color-lightness-offset-visited,
          dark: $color-dark-lightness-link-fore +
            $color-lightness-offset-visited,
        ),
      ),
    ) //#endregion visited
) !default;

Type

List

colors

$colors: (
  "gray",
  "red",
  "coral",
  "orange",
  "yellow",
  "lime",
  "green",
  "cyan",
  "blue",
  "violet",
  "magenta"
) !default;

Type

List

colorsWithProperties

$colorsWithProperties: (
  (
    "name": "gray",
    "hue": $color-hue-gray,
  ),
  (
    "name": "red",
    "hue": $color-hue-red,
  ),
  (
    "name": "coral",
    "hue": $color-hue-coral,
  ),
  (
    "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;

Type

List

prefix

$prefix: "smarpy-" !default;

Description

css-variable prefix

Type

String

output-color-class

$output-color-class: true !default;

Description

output color class

Type

Boolean

output-size-class

$output-size-class: true !default;

Description

output size class

Type

Boolean

output-border-width-class

$output-border-width-class: true !default;

Description

output border-width class

Type

Boolean

output-border-style-class

$output-border-style-class: true !default;

Description

output border-style class

Type

Boolean