luda 0.1.5 → 0.1.6

data/assets/stylesheets/luda/_core/_variables.sass

@@ -1,710 +1,710 @@
-// sass-lint:disable max-file-line-count
-// sass-lint:disable max-line-length
-// sass-lint:disable space-after-comma
-
-
-
-// global variables
-$breakpoint-width-pxs:        (s: 0, m: 768px, l: 1200px) !default
-$breakpoint-aspect-ratios:    (p: 0, l: 1.0001) !default
-$breakpoint-resolutions:      (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
-
-
-$space-base-rem:     1rem !default
-$space-tiny-rem:      $space-base-rem / 2 !default
-$space-small-rem:     $space-base-rem !default
-$space-medium-rem:    $space-base-rem * 2 !default
-$space-large-rem:     $space-base-rem * 4 !default
-
-
-
-$z-index-low:             -1 !default
-$z-index-normal:          0 !default
-$z-index-high:            1 !default
-$z-index-higher:          2 !default
-$z-index-much-higher:     3 !default
-$z-index-highest:         4 !default
-
-
-
-$opacity-emphasis:      1 !default
-$opacity-main:          0.9 !default
-$opacity-muted:         0.618 !default
-$opacity-more-muted:    0.382 !default
-$opacity-most-muted:    0.1 !default
-$opacity-disabled:      $opacity-muted
-
-
-
-$color-primary:             hsba(340, 54, 98) !default
-$color-secondary:           hsba(0, 0, 56) !default
-$color-danger:              hsba(0, 82, 82) !default
-$color-dark:                hsba(0, 0, 32) !default
-$color-light:               hsba(0, 0, 100) !default
-$color-emphasis:            $color-dark !default
-$color-main:                lighten($color-dark, 10%) !default
-$color-muted:               lighten($color-dark, 50%) !default
-$color-inverse-emphasis:    $color-light !default
-$color-inverse-main:        rgba($color-light, $opacity-main) !default
-$color-inverse-muted:       rgba($color-light, $opacity-muted) !default
-
-
-
-$background-color-primary:       $color-primary !default
-$background-color-secondary:     lighten($color-secondary, 30%) !default
-$background-color-danger:        $color-danger !default
-$background-color-dark:          $color-dark !default
-$background-color-light:         $color-light !default
-$background-emphasis:            lighten($background-color-primary, 22%) !default
-$background-main:                $background-color-light !default
-$background-muted:               darken($background-color-light, 3%) !default
-$background-inverse-emphasis:    lighten($background-color-primary, 22%) !default
-$background-inverse-main:        $background-color-dark !default
-$background-inverse-muted:       lighten($background-color-dark, 3%) !default
-
-
-
-$line-color-primary:             $color-primary !default
-$line-color-secondary:           lighten($color-secondary, 30%) !default
-$line-color-danger:              $color-danger !default
-$line-color-dark:                $color-dark !default
-$line-color-light:               $color-light !default
-$line-color-emphasis:            $line-color-primary !default
-$line-color-main:                lighten($line-color-dark, 60%) !default
-$line-color-muted:               lighten($line-color-dark, 40%) !default
-$line-color-inverse-emphasis:    $line-color-primary !default
-$line-color-inverse-main:        rgba($line-color-light, $opacity-main) !default
-$line-color-inverse-muted:       rgba($line-color-light, $opacity-muted) !default
-
-
-
-$border-radius-sharp:      0 !default
-$border-radius-rounded:    2px !default
-$border-radius-circle:     9999px !default
-$border-radius-main:       $border-radius-sharp !default
-
-
-
-// variables for base
-$base-cursor:                     default !default
-$base-word-break:                 break-word !default
-$base-text-underline-position:    under !default
-$base-text-rendering:             optimizeLegibility !default
-$base-webkit-font-smoothing:      antialiased !default
-$base-moz-font-smoothing:         grayscale !default
-// for windows phone add <meta name="msapplication-tap-highlight" content="no"> in head
-$base-tap-highlight-color:        transparent !default
-$base-webkit-touch-callout:       none !default
-
-
-
-$base-html-background:    $background-inverse-muted !default
-
-
-
-$base-body-min-height:    100vh !default
-$base-body-background:    $background-main !default
-
-
-
-$base-selection-color:               $color-inverse-main !default
-$base-selection-background-color:    $background-color-dark !default
-
-
-
-// variables for behaviours
-$focus-outline-style:        dashed !default
-$focus-outline-width-px:     2px !default
-$focus-outline-color:        $line-color-muted !default
-$focus-outline-offset-px:    - $focus-outline-width-px !default
-
-
-
-// variables for elements
-$badge-offset-top-em:     -0.4em !default
-$badge-offset-left-em:    0.4em !default
-$badge-height-em:         1.2em !default
-$badge-padding-em:        0.4em !default
-$badge-background:        $background-color-primary !default
-$badge-color:             $color-inverse-emphasis !default
-
-
-
-$button-height-rem:                     3rem !default
-$button-small-height-rem:               2rem !default
-$button-large-height-rem:               4rem !default
-$button-helvertical-padding-em:         strip-unit($space-small-rem) * 1em !default
-$button-typography-size-level:          5 !default
-$button-small-typography-size-level:    6 !default
-$button-large-typography-size-level:    4 !default
-$button-border-width:                   1px !default
-$button-border-style:                   solid !default
-$button-border-radius:                  $border-radius-main !default
-
-
-
-$button-primary-color:                  $color-inverse-main !default
-$button-primary-hover-color:            null !default
-$button-primary-active-color:           null !default
-$button-primary-background:             $background-color-primary !default
-$button-primary-hover-background:       darken($background-color-primary, 2%) !default
-$button-primary-active-background:      darken($background-color-primary, 4%) !default
-$button-primary-border-color:           null !default
-$button-primary-hover-border-color:     null !default
-$button-primary-active-border-color:    null !default
-$button-primary-box-shadow:             null !default
-$button-primary-hover-box-shadow:       null !default
-$button-primary-active-box-shadow:      null !default
-
-
-
-$button-secondary-color:                  $color-main !default
-$button-secondary-hover-color:            null !default
-$button-secondary-active-color:           null !default
-$button-secondary-background:             $background-color-secondary !default
-$button-secondary-hover-background:       darken($background-color-secondary, 2%) !default
-$button-secondary-active-background:      darken($background-color-secondary, 4%) !default
-$button-secondary-border-color:           null !default
-$button-secondary-hover-border-color:     null !default
-$button-secondary-active-border-color:    null !default
-$button-secondary-box-shadow:             null !default
-$button-secondary-hover-box-shadow:       null !default
-$button-secondary-active-box-shadow:      null !default
-
-
-
-$button-danger-color:                  $color-inverse-main !default
-$button-danger-hover-color:            null !default
-$button-danger-active-color:           null !default
-$button-danger-background:             $background-color-danger !default
-$button-danger-hover-background:       darken($background-color-danger, 2%) !default
-$button-danger-active-background:      darken($background-color-danger, 4%) !default
-$button-danger-border-color:           null !default
-$button-danger-hover-border-color:     null !default
-$button-danger-active-border-color:    null !default
-$button-danger-box-shadow:             null !default
-$button-danger-hover-box-shadow:       null !default
-$button-danger-active-box-shadow:      null !default
-
-
-
-$button-dark-color:                  $color-inverse-main !default
-$button-dark-hover-color:            null !default
-$button-dark-active-color:           null !default
-$button-dark-background:             $background-color-dark !default
-$button-dark-hover-background:       darken($background-color-dark, 2%) !default
-$button-dark-active-background:      darken($background-color-dark, 4%) !default
-$button-dark-border-color:           null !default
-$button-dark-hover-border-color:     null !default
-$button-dark-active-border-color:    null !default
-$button-dark-box-shadow:             null !default
-$button-dark-hover-box-shadow:       null !default
-$button-dark-active-box-shadow:      null !default
-
-
-
-$button-light-color:                  $color-main !default
-$button-light-hover-color:            null !default
-$button-light-active-color:           null !default
-$button-light-background:             $background-color-light !default
-$button-light-hover-background:       darken($background-color-light, 2%) !default
-$button-light-active-background:      darken($background-color-light, 4%) !default
-$button-light-border-color:           null !default
-$button-light-hover-border-color:     null !default
-$button-light-active-border-color:    null !default
-$button-light-box-shadow:             null !default
-$button-light-hover-box-shadow:       null !default
-$button-light-active-box-shadow:      null !default
-
-
-
-$button-hollow-primary-color:                  $color-primary !default
-$button-hollow-primary-hover-color:            existing($button-primary-hover-color, $button-primary-color) !default
-$button-hollow-primary-active-color:           existing($button-primary-active-color, $button-hollow-primary-hover-color) !default
-$button-hollow-primary-hover-background:       existing($button-primary-hover-background, $button-primary-background) !default
-$button-hollow-primary-active-background:      existing($button-primary-active-background, $button-hollow-primary-hover-background) !default
-$button-hollow-primary-border-color:           null !default
-$button-hollow-primary-hover-border-color:     existing($button-primary-hover-border-color, $button-primary-border-color, transparent) !default
-$button-hollow-primary-active-border-color:    existing($button-primary-active-border-color, $button-hollow-primary-hover-border-color) !default
-$button-hollow-primary-box-shadow:             $button-primary-box-shadow !default
-$button-hollow-primary-hover-box-shadow:       $button-primary-hover-box-shadow !default
-$button-hollow-primary-active-box-shadow:      $button-primary-active-box-shadow !default
-
-
-
-$button-hollow-secondary-color:                  $color-main !default
-$button-hollow-secondary-hover-color:            existing($button-secondary-hover-color, $button-secondary-color) !default
-$button-hollow-secondary-active-color:           existing($button-secondary-active-color, $button-hollow-secondary-hover-color) !default
-$button-hollow-secondary-hover-background:       existing($button-secondary-hover-background, $button-secondary-background) !default
-$button-hollow-secondary-active-background:      existing($button-secondary-active-background, $button-hollow-secondary-hover-background) !default
-$button-hollow-secondary-border-color:           $line-color-secondary !default
-$button-hollow-secondary-hover-border-color:     existing($button-secondary-hover-border-color, $button-secondary-border-color, transparent) !default
-$button-hollow-secondary-active-border-color:    existing($button-secondary-active-border-color, $button-hollow-secondary-hover-border-color) !default
-$button-hollow-secondary-box-shadow:             $button-secondary-box-shadow !default
-$button-hollow-secondary-hover-box-shadow:       $button-secondary-hover-box-shadow !default
-$button-hollow-secondary-active-box-shadow:      $button-secondary-active-box-shadow !default
-
-
-
-$button-hollow-danger-color:                  $color-danger !default
-$button-hollow-danger-hover-color:            existing($button-danger-hover-color, $button-danger-color) !default
-$button-hollow-danger-active-color:           existing($button-danger-active-color, $button-hollow-danger-hover-color) !default
-$button-hollow-danger-hover-background:       existing($button-danger-hover-background, $button-danger-background) !default
-$button-hollow-danger-active-background:      existing($button-danger-active-background, $button-hollow-danger-hover-background) !default
-$button-hollow-danger-border-color:           null !default
-$button-hollow-danger-hover-border-color:     existing($button-danger-hover-border-color, $button-danger-border-color, transparent) !default
-$button-hollow-danger-active-border-color:    existing($button-danger-active-border-color, $button-hollow-danger-hover-border-color) !default
-$button-hollow-danger-box-shadow:             $button-danger-box-shadow !default
-$button-hollow-danger-hover-box-shadow:       $button-danger-hover-box-shadow !default
-$button-hollow-danger-active-box-shadow:      $button-danger-active-box-shadow !default
-
-
-
-$button-hollow-dark-color:                  $color-dark !default
-$button-hollow-dark-hover-color:            existing($button-dark-hover-color, $button-dark-color) !default
-$button-hollow-dark-active-color:           existing($button-dark-active-color, $button-hollow-dark-hover-color) !default
-$button-hollow-dark-hover-background:       existing($button-dark-hover-background, $button-dark-background) !default
-$button-hollow-dark-active-background:      existing($button-dark-active-background, $button-hollow-dark-hover-background) !default
-$button-hollow-dark-border-color:           null !default
-$button-hollow-dark-hover-border-color:     existing($button-dark-hover-border-color, $button-dark-border-color, transparent) !default
-$button-hollow-dark-active-border-color:    existing($button-dark-active-border-color, $button-hollow-dark-hover-border-color) !default
-$button-hollow-dark-box-shadow:             $button-dark-box-shadow !default
-$button-hollow-dark-hover-box-shadow:       $button-dark-hover-box-shadow !default
-$button-hollow-dark-active-box-shadow:      $button-dark-active-box-shadow !default
-
-
-
-$button-hollow-light-color:                  $color-light !default
-$button-hollow-light-hover-color:            existing($button-light-hover-color, $button-light-color) !default
-$button-hollow-light-active-color:           existing($button-light-active-color, $button-hollow-light-hover-color) !default
-$button-hollow-light-hover-background:       existing($button-light-hover-background, $button-light-background) !default
-$button-hollow-light-active-background:      existing($button-light-active-background, $button-hollow-light-hover-background) !default
-$button-hollow-light-border-color:           null !default
-$button-hollow-light-hover-border-color:     existing($button-light-hover-border-color, $button-light-border-color, transparent) !default
-$button-hollow-light-active-border-color:    existing($button-light-active-border-color, $button-hollow-light-hover-border-color) !default
-$button-hollow-light-box-shadow:             $button-light-box-shadow !default
-$button-hollow-light-hover-box-shadow:       $button-light-hover-box-shadow !default
-$button-hollow-light-active-box-shadow:      $button-light-active-box-shadow !default
-
-
-
-$button-text-primary-color:                 $color-primary !default
-$button-text-primary-hover-color:           darken($color-primary, 10%) !default
-$button-text-primary-active-color:          $button-text-primary-hover-color !default
-$button-text-primary-text-shadow:           null !default
-$button-text-primary-hover-text-shadow:     null !default
-$button-text-primary-active-text-shadow:    null !default
-
-
-
-$button-text-secondary-color:                 $color-secondary !default
-$button-text-secondary-hover-color:           darken($color-secondary, 10%) !default
-$button-text-secondary-active-color:          $button-text-secondary-hover-color !default
-$button-text-secondary-text-shadow:           null !default
-$button-text-secondary-hover-text-shadow:     null !default
-$button-text-secondary-active-text-shadow:    null !default
-
-
-
-$button-text-danger-color:                 $color-danger !default
-$button-text-danger-hover-color:           darken($color-danger, 5%) !default
-$button-text-danger-active-color:          $button-text-danger-hover-color !default
-$button-text-danger-text-shadow:           null !default
-$button-text-danger-hover-text-shadow:     null !default
-$button-text-danger-active-text-shadow:    null !default
-
-
-
-$button-text-dark-color:                 lighten($color-dark, 10%) !default
-$button-text-dark-hover-color:           $color-dark !default
-$button-text-dark-active-color:          $button-text-dark-hover-color !default
-$button-text-dark-text-shadow:           null !default
-$button-text-dark-hover-text-shadow:     null !default
-$button-text-dark-active-text-shadow:    null !default
-
-
-
-$button-text-light-color:                 rgba($color-light, $opacity-muted) !default
-$button-text-light-hover-color:           $color-light !default
-$button-text-light-active-color:          $button-text-light-hover-color !default
-$button-text-light-text-shadow:           null !default
-$button-text-light-hover-text-shadow:     null !default
-$button-text-light-active-text-shadow:    null !default
-
-
-
-$container-max-width-px:    1366px !default
-$container-padding-rem:     $space-medium-rem $space-small-rem !default
-
-
-
-$form-label-typography-size-level:          5 !default
-$form-label-small-typography-size-level:    6 !default
-$form-label-large-typography-size-level:    4 !default
-$form-label-color:                          $color-emphasis !default
-$form-label-required-content:               " | Required" !default
-$form-label-required-color:                 $color-danger !default
-
-
-
-$form-element-inline-width-rem:               18rem !default
-$form-element-small-inline-width-rem:         14rem !default
-$form-element-large-inline-width-rem:         22rem !default
-$form-element-typography-size-level:          5 !default
-$form-element-small-typography-size-level:    6 !default
-$form-element-large-typography-size-level:    4 !default
-$form-element-color:                          $color-main !default
-$form-element-error-color:                    null !default
-$form-element-focus-color:                    null !default
-$form-element-background:                     $background-main !default
-$form-element-focus-background:               null !default
-$form-element-error-background:               null !default
-$form-element-border-width:                   1px !default
-$form-element-border-style:                   solid !default
-$form-element-border-radius:                  $border-radius-main !default
-$form-element-border-color:                   $line-color-main !default
-$form-element-error-border-color:             $line-color-danger !default
-$form-element-focus-border-color:             $line-color-primary !default
-$form-element-box-shadow:                     null !default
-$form-element-focus-box-shadow:               null !default
-$form-element-error-box-shadow:               null !default
-$form-element-icon-size-em:                   1.286em !default
-$form-element-icon-color:                     $form-element-border-color !default
-$form-element-error-icon-color:               $form-element-error-border-color !default
-$form-element-focus-icon-color:               $form-element-focus-border-color !default
-
-
-
-$form-element-text-helvertical-padding-em:    strip-unit($space-small-rem) * 1em !default
-$form-element-textfield-height-rem:           3rem !default
-$form-element-small-textfield-height-rem:     2rem !default
-$form-element-large-textfield-height-rem:     4rem !default
-$form-element-textarea-height-rem:            9rem !default
-$form-element-small-textarea-height-rem:      6rem !default
-$form-element-large-textarea-height-rem:      12rem !default
-
-
-
-$form-element-checkfield-height-em:        1.4em !default
-$form-element-checked-icon-color:          $form-element-color !default
-$form-element-error-checked-icon-color:    null !default
-$form-element-focus-checked-icon-color:    null !default
-
-
-
-$form-element-track-height-em:             0.4em !default
-$form-element-track-background:            darken($background-muted, 4%) !default !default
-$form-element-focus-track-background:      null !default
-$form-element-error-track-background:      null !default
-$form-element-track-border-radius:         $border-radius-main !default
-$form-element-thumb-height-em:             1.4em !default
-$form-element-thumb-width-em:              1.4em !default
-$form-element-thumb-background:            $form-element-track-background !default
-$form-element-error-thumb-background:      null !default
-$form-element-focus-thumb-background:      $background-color-primary !default
-$form-element-thumb-border-radius:         100% !default
-$form-element-thumb-border-color:          transparent !default
-$form-element-error-thumb-border-color:    $form-element-error-border-color !default
-$form-element-focus-thumb-border-color:    null !default
-
-
-
-$form-element-helper-typography-size-level:          6 !default
-$form-element-small-helper-typography-size-level:    null !default
-$form-element-large-helper-typography-size-level:    5 !default
-$form-element-hint-message-color:                    $color-muted !default
-$form-element-error-message-color:                   $color-danger !default
-$form-element-placeholder-color:                     $color-muted !default
-$form-element-error-placeholder-color:               null !default
-$form-element-focus-placeholder-color:               null !default
-
-
-
-$form-element-search-icon:     '<svg viewBox="0 0 1000 1000"><path fill="#fill" d="M983.1,908.7L702.1,625.9c114.2-150.9,102.6-366.6-35-504.2c-150.3-150.3-394.1-150.3-544.4,0c-150.3,150.3-150.3,394,0,544.4c137.5,137.5,353.1,149.2,504,35.2l281,282.8c9.2,9.2,24.2,9.2,33.5,0l41.9-41.9C992.3,932.9,992.3,917.9,983.1,908.7L983.1,908.7z M194.1,596.9c-110.4-110.4-110.4-289.4,0-399.7c110.4-110.4,289.4-110.4,399.8,0c110.4,110.4,110.4,289.3,0,399.7C483.4,707.3,304.5,707.3,194.1,596.9L194.1,596.9z"/></svg>' !default
-$form-element-select-icon:     '<svg viewBox="0 0 18 18"><path fill="#fill" d="M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z"></path></svg>' !default
-$form-element-add-icon:        '<svg viewBox="-100 0 600 500"><path fill="#fill" d="M465.064,207.566l0.028,0H284.436V27.25c0-14.84-12.016-27.248-26.856-27.248h-23.116c-14.836,0-26.904,12.408-26.904,27.248v180.316H26.908c-14.832,0-26.908,12-26.908,26.844v23.248c0,14.832,12.072,26.78,26.908,26.78h180.656v180.968c0,14.832,12.064,26.592,26.904,26.592h23.116c14.84,0,26.856-11.764,26.856-26.592V284.438h180.624c14.84,0,26.936-11.952,26.936-26.78V234.41C492,219.566,479.904,207.566,465.064,207.566z"/></svg>' !default
-$form-element-checked-icon:    '<svg viewBox="-150 -150 800 800"><path fill="#fill" d="M487.75,78.125c-13-13-33-13-46,0l-272,272l-114-113c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10l295-294C500.75,112.125,500.75,91.125,487.75,78.125z"/></svg>' !default
-
-
-
-$grid-columns:             12 !default
-$grid-gutter-width-rem:    $space-medium-rem !default
-
-
-
-$icon-size-em:                1.15em !default
-$icon-stroke-width:           2px !default
-$icon-firefox-line-height:    1.11 !default
-
-
-
-$overlay-background:    rgba($background-color-dark, $opacity-main) !default
-
-
-
-$progress-height-rem:                   2rem !default
-$progress-border-radius:                $border-radius-main !default
-$progress-background:                   $background-muted !default
-$progress-bar-typography-size-level:    6 !default
-$progress-bar-min-width-em:             3em !default
-$progress-bar-padding:                  0 $space-tiny-rem !default
-$progress-bar-background:               $background-color-primary !default
-$progress-bar-color:                    $color-inverse-main !default
-
-
-
-$scrollbar-width-breakpoint:                    m !default
-$scrollbar-breakpoint-vertical-width-rem:       0.5rem !default
-$scrollbar-breakpoint-horizontal-height-rem:    0.5rem !default
-$scrollbar-thumb-background:                    rgba($color-muted, $opacity-more-muted) !default
-$scrollbar-thumb-border-radius:                 0.5rem !default
-$scrollbar-ie-edge-overflow-style:              -ms-autohiding-scrollbar !default
-
-
-
-$table-cell-padding-rem:        $space-small-rem !default
-$table-border-style:            solid !default
-$table-border-width:            1px !default
-$table-border-color:            $line-color-main !default
-$table-border-radius:           null !default
-$table-head-background:         $background-muted !default
-$table-head-color:              $color-emphasis !default
-$table-body-color:              $color-main !default
-$table-row-even-background:     $background-muted !default
-$table-row-odd-background:      $background-main !default
-$table-row-hover-background:    $background-emphasis !default
-$table-row-hover-color:         null !default
-
-
-
-$typography-size-scale-ratio:    constant-get(scale-ratios, minor-third) !default
-
-
-
-$typography-main-size-px:                  14px !default
-$typography-main-size-level:               5 !default
-$typography-main-line-height-ratio:        26 / 14 !default
-$typography-main:                          constant-get(typography-stacks, sans-serif) !default
-$typography-main-baseline-offset-ratio:    constant-get(baseline-offset-ratios, "Helvetica Neue") !default
-$typography-main-color:                    $color-main !default
-
-
-
-$typography-lead:                          null !default
-$typography-lead-baseline-offset-ratio:    $typography-main-baseline-offset-ratio !default
-$typography-lead-color:                    $color-emphasis !default
-$typography-lead-font-weight:              700 !default
-
-
-
-$typography-code:                          constant-get(typography-stacks, code) !default
-$typography-code-baseline-offset-ratio:    constant-get(baseline-offset-ratios, "Courier New") !default
-$typography-block-code-size-level:         6 !default
-
-
-
-$typography-quote:                          null !default
-$typography-quote-baseline-offset-ratio:    $typography-main-baseline-offset-ratio !default
-$typography-block-quote-size-level:         4 !default
-
-
-
-$typography-mark-padding-em:       0.2em 0.4em !default
-$typography-mark-background:       $background-emphasis !default
-$typography-mark-color:            $color-primary !default
-$typography-mark-border-radius:    $border-radius-main !default
-
-
-
-$typography-link-text-decoration:           underline !default
-$typography-link-hover-text-decoration:     null !default
-$typography-link-active-text-decoration:    null !default
-$typography-link-color:                     $color-main !default
-$typography-link-hover-color:               $color-emphasis !default
-$typography-link-active-color:              null !default
-$typography-link-light-color:               $color-inverse-main !default
-$typography-link-light-hover-color:         $color-inverse-emphasis !default
-$typography-link-light-active-color:        null !default
-
-
-
-$typography-code-block-padding-rem:    0 $space-medium-rem !default
-$typography-code-padding-em:           0.2em 0.4em !default
-$typography-code-background:           $background-muted !default
-$typography-code-color:                $color-main !default
-$typography-code-border-radius:        null !default
-
-
-
-$typography-cite-color:                      $color-muted !default
-$typography-quote-block-padding-rem:         3 * $space-small-rem $space-large-rem $space-medium-rem !default
-$typography-quote-block-p-margin-rem:        0 auto $space-small-rem !default
-$typography-quote-block-cite-lead-height:    1px !default
-
-
-
-$typography-sub-sup-size:            100% / $typography-size-scale-ratio !default
-$typography-sub-bottom-offset-em:    -0.25em !default
-$typography-sup-top-offset-em:       -0.5em !default
-
-
-
-$typography-list-nested-padding-em:    0 0 0 strip-unit($space-medium-rem) * 1em !default
-
-
-$turbolinks-progress-bar-height-px:     2px !default
-$turbolinks-progress-bar-background:    $background-color-primary !default
-
-
-
-// variables for collections
-$alert-padding-rem:               $space-small-rem !default
-$alert-border-radius:             0 !default
-$alert-background:                $background-color-dark !default
-$alert-box-shadow:                null !default
-$alert-action-margin-left-rem:    $space-small-rem !default
-$alert-title-color:               $color-inverse-emphasis !default
-$alert-content-color:             $color-inverse-main !default
-
-
-
-$avatar-image-size-rem:                              3rem !default
-$avatar-large-image-size-rem:                        6rem !default
-$avatar-small-image-size-rem:                        2rem !default
-$avatar-image-border-radius:                         100% !default
-$avatar-default-image-background-size:               50% auto !default
-$avatar-default-image:                               svg-icon('<svg viewBox="0 0 512 512"><path fill="#fill" d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 c59.551,0,108,48.448,108,108S315.551,256,256,256z"/></svg>',$line-color-muted) !default
-$avatar-media-description-height-rem:                3rem !default
-$avatar-media-description-padding-top-rem:           0.3rem !default
-$avatar-media-description-padding-left-rem:          0.5rem !default
-$avatar-large-media-description-height-rem:          4rem !default
-$avatar-large-media-description-padding-top-rem:     0.6rem !default
-$avatar-large-media-description-padding-left-rem:    0.5rem !default
-$avatar-small-media-description-height-rem:          null !default
-$avatar-small-media-description-padding-top-rem:     null !default
-$avatar-small-media-description-padding-left-rem:    null !default
-$avatar-name-typography-size-level:                  5 !default
-$avatar-large-name-typography-size-level:            4 !default
-$avatar-small-name-typography-size-level:            6 !default
-$avatar-description-typography-size-level:           6 !default
-$avatar-large-description-typography-size-level:     5 !default
-$avatar-small-description-typography-size-level:     null !default
-$avatar-name-color:                                  null !default
-$avatar-description-color:                           null !default
-
-
-
-$breadcrumb-padding-rem:            $space-small-rem 0 !default
-$breadcrumb-color:                  $color-muted !default
-$breadcrumb-children-padding-em:    0 strip-unit($space-tiny-rem) * 1em !default
-$breadcrumb-children-spliter:       "/" !default
-
-
-
-$button-group-children-margin-rem:    0 $space-small-rem $space-small-rem 0 !default
-
-
-
-$button-icon-size-em:                 1.286em !default
-$button-icon-top-size-em:             1.5em !default
-$button-icon-left-margin-em:          0 0.4em 0 0 !default
-$button-icon-right-margin-em:         0 0 0 0.4em !default
-$button-icon-top-margin-em:           0 0 0.15em 0 !default
-$button-icon-top-height-rem:          4rem !default
-$button-large-icon-top-height-rem:    5rem !default
-$button-small-icon-top-height-rem:    3rem !default
-
-
-
-$carousel-width-breakpoint:                              m !default
-$carousel-aspect-ratio:                                  16 / 9 !default
-$carousel-control-indicators-top-rem:                    $space-small-rem !default
-$carousel-control-indicators-right-rem:                  $space-small-rem !default
-$carousel-control-indicator-height-rem:                  0.2rem !default
-$carousel-indicator-outline-offset-px:                   2px !default
-$carousel-description-padding-rem:                       $space-small-rem !default
-$carousel-breakpoint-control-indicators-top-rem:         $space-medium-rem !default
-$carousel-breakpoint-control-indicators-right-rem:       $space-medium-rem !default
-$carousel-breakpoint-control-prev-left-rem:              $space-small-rem !default
-$carousel-breakpoint-control-next-right-rem:             $space-small-rem !default
-$carousel-breakpoint-description-padding-rem:            $space-medium-rem !default
-$carousel-background:                                    $background-muted !default
-$carousel-description-background:                        linear-gradient(180deg, transparent 0, rgba($background-color-dark, $opacity-most-muted) 2rem) !default
-$carousel-description-color:                             $color-inverse-main !default
-$carousel-control-opacity:                               $opacity-main !default
-$carousel-control-disabled-opacity:                      $opacity-more-muted !default
-$carousel-control-opacity-transition-duration:           0.5s !default
-$carousel-control-opacity-transition-timing-function:    ease !default
-$carousel-transition-duration:                           1s !default
-$carousel-transition-timing-function:                    ease !default
-$carousel-ani-opacity-transition-duration:               1s !default
-$carousel-ani-opacity-transition-timing-function:        ease !default
-
-
-
-$dropdown-width-breakpoint:               m !default
-$dropdown-static-menu-margin-left-rem:    $space-small-rem !default
-$dropdown-absolute-max-height-rem:        33rem !default
-$dropdown-absolute-drop-gap-rem:          $space-tiny-rem !default
-$dropdown-absolute-border-radius:         0 !default
-$dropdown-absolute-fixed-background:      $background-main !default
-$dropdown-absolute-box-shadow:            null !default
-
-
-
-$form-group-element-vertical-margin-rem:    $space-small-rem !default
-
-
-
-$media-content-aspect-ratio:    16 / 9 !default
-$media-border-radius:           $border-radius-main !default
-$media-background-color:        $background-muted !default
-$media-description-color:       $color-muted !default
-
-
-
-$modal-padding-rem:                $space-medium-rem !default
-$modal-in-overlay-max-width-px:    600px !default
-$modal-in-overlay-min-width-px:    320px !default
-$modal-background:                 $background-muted !default
-$modal-border-radius:              $border-radius-main !default
-$modal-box-shadow:                 null !default
-
-
-
-$nav-width-breakpoint:         m !default
-$nav-padding-rem:              $space-tiny-rem $space-small-rem !default
-$nav-logo-margin-rem:          0 $space-small-rem !default
-$nav-open-margin-rem:          0 0 0 auto !default
-$nav-close-margin-rem:         $space-small-rem $space-small-rem 0 auto !default
-$nav-search-margin-rem:        $space-medium-rem !default
-$nav-items-margin-rem:         $space-small-rem !default
-$nav-sub-items-margin-rem:     $nav-items-margin-rem !default
-$nav-logo-image-height-rem:    2rem !default
-$nav-background:               $background-color-dark !default
-
-
-
-$nav-header-box-shadow:                         null !default
-$nav-header-breakpoint-search-margin-rem:       0 $space-small-rem !default
-$nav-header-breakpoint-items-margin-rem:        0 auto 0 0 !default
-$nav-header-breakpoint-sub-items-margin-rem:    0 !default
-$nav-header-breakpoint-search-width-rem:        16rem !default
-$nav-header-breakpoint-dropdown-background:     $nav-background !default
-
-
-
-$nav-aside-box-shadow:                          $nav-header-box-shadow !default
-$nav-aside-breakpoint-padding-rem:              0 !default
-$nav-aside-breakpoint-logo-margin-rem:          3 * $space-small-rem $space-medium-rem $space-small-rem !default
-$nav-aside-breakpoint-logo-image-height-rem:    7rem !default
-$nav-aside-breakpoint-logo-image-width-rem:     9rem !default
-$nav-aside-breakpoint-min-width-rem:            18rem !default
-$nav-aside-breakpoint-max-width-rem:            20rem !default
-$nav-aside-breakpoint-box-shadow:               null !default
-
-
-
-$tab-panes-padding-top-rem:       null !default
-$tab-panes-padding-bottom-rem:    null !default
+// sass-lint:disable max-file-line-count
+// sass-lint:disable max-line-length
+// sass-lint:disable space-after-comma
+
+
+
+// global variables
+$breakpoint-width-pxs:        (s: 0, m: 768px, l: 1200px) !default
+$breakpoint-aspect-ratios:    (p: 0, l: 1.0001) !default
+$breakpoint-resolutions:      (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
+
+
+$space-base-rem:     1rem !default
+$space-tiny-rem:      $space-base-rem / 2 !default
+$space-small-rem:     $space-base-rem !default
+$space-medium-rem:    $space-base-rem * 2 !default
+$space-large-rem:     $space-base-rem * 4 !default
+
+
+
+$z-index-low:             -1 !default
+$z-index-normal:          0 !default
+$z-index-high:            1 !default
+$z-index-higher:          2 !default
+$z-index-much-higher:     3 !default
+$z-index-highest:         4 !default
+
+
+
+$opacity-emphasis:      1 !default
+$opacity-main:          0.9 !default
+$opacity-muted:         0.618 !default
+$opacity-more-muted:    0.382 !default
+$opacity-most-muted:    0.1 !default
+$opacity-disabled:      $opacity-muted
+
+
+
+$color-primary:             hsba(340, 54, 98) !default
+$color-secondary:           hsba(0, 0, 56) !default
+$color-danger:              hsba(0, 82, 82) !default
+$color-dark:                hsba(0, 0, 32) !default
+$color-light:               hsba(0, 0, 100) !default
+$color-emphasis:            $color-dark !default
+$color-main:                lighten($color-dark, 10%) !default
+$color-muted:               lighten($color-dark, 50%) !default
+$color-inverse-emphasis:    $color-light !default
+$color-inverse-main:        rgba($color-light, $opacity-main) !default
+$color-inverse-muted:       rgba($color-light, $opacity-muted) !default
+
+
+
+$background-color-primary:       $color-primary !default
+$background-color-secondary:     lighten($color-secondary, 30%) !default
+$background-color-danger:        $color-danger !default
+$background-color-dark:          $color-dark !default
+$background-color-light:         $color-light !default
+$background-emphasis:            lighten($background-color-primary, 22%) !default
+$background-main:                $background-color-light !default
+$background-muted:               darken($background-color-light, 3%) !default
+$background-inverse-emphasis:    lighten($background-color-primary, 22%) !default
+$background-inverse-main:        $background-color-dark !default
+$background-inverse-muted:       lighten($background-color-dark, 3%) !default
+
+
+
+$line-color-primary:             $color-primary !default
+$line-color-secondary:           lighten($color-secondary, 30%) !default
+$line-color-danger:              $color-danger !default
+$line-color-dark:                $color-dark !default
+$line-color-light:               $color-light !default
+$line-color-emphasis:            $line-color-primary !default
+$line-color-main:                lighten($line-color-dark, 60%) !default
+$line-color-muted:               lighten($line-color-dark, 40%) !default
+$line-color-inverse-emphasis:    $line-color-primary !default
+$line-color-inverse-main:        rgba($line-color-light, $opacity-main) !default
+$line-color-inverse-muted:       rgba($line-color-light, $opacity-muted) !default
+
+
+
+$border-radius-sharp:      0 !default
+$border-radius-rounded:    2px !default
+$border-radius-circle:     9999px !default
+$border-radius-main:       $border-radius-sharp !default
+
+
+
+// variables for base
+$base-cursor:                     default !default
+$base-word-break:                 break-word !default
+$base-text-underline-position:    under !default
+$base-text-rendering:             optimizeLegibility !default
+$base-webkit-font-smoothing:      antialiased !default
+$base-moz-font-smoothing:         grayscale !default
+// for windows phone add <meta name="msapplication-tap-highlight" content="no"> in head
+$base-tap-highlight-color:        transparent !default
+$base-webkit-touch-callout:       none !default
+
+
+
+$base-html-background:    $background-inverse-muted !default
+
+
+
+$base-body-min-height:    100vh !default
+$base-body-background:    $background-main !default
+
+
+
+$base-selection-color:               $color-inverse-main !default
+$base-selection-background-color:    $background-color-dark !default
+
+
+
+// variables for behaviours
+$focus-outline-style:        dashed !default
+$focus-outline-width-px:     2px !default
+$focus-outline-color:        $line-color-muted !default
+$focus-outline-offset-px:    - $focus-outline-width-px !default
+
+
+
+// variables for elements
+$badge-offset-top-em:     -0.4em !default
+$badge-offset-left-em:    0.4em !default
+$badge-height-em:         1.2em !default
+$badge-padding-em:        0.4em !default
+$badge-background:        $background-color-primary !default
+$badge-color:             $color-inverse-emphasis !default
+
+
+
+$button-height-rem:                     3rem !default
+$button-small-height-rem:               2rem !default
+$button-large-height-rem:               4rem !default
+$button-helvertical-padding-em:         strip-unit($space-small-rem) * 1em !default
+$button-typography-size-level:          5 !default
+$button-small-typography-size-level:    6 !default
+$button-large-typography-size-level:    4 !default
+$button-border-width:                   1px !default
+$button-border-style:                   solid !default
+$button-border-radius:                  $border-radius-main !default
+
+
+
+$button-primary-color:                  $color-inverse-main !default
+$button-primary-hover-color:            null !default
+$button-primary-active-color:           null !default
+$button-primary-background:             $background-color-primary !default
+$button-primary-hover-background:       darken($background-color-primary, 2%) !default
+$button-primary-active-background:      darken($background-color-primary, 4%) !default
+$button-primary-border-color:           null !default
+$button-primary-hover-border-color:     null !default
+$button-primary-active-border-color:    null !default
+$button-primary-box-shadow:             null !default
+$button-primary-hover-box-shadow:       null !default
+$button-primary-active-box-shadow:      null !default
+
+
+
+$button-secondary-color:                  $color-main !default
+$button-secondary-hover-color:            null !default
+$button-secondary-active-color:           null !default
+$button-secondary-background:             $background-color-secondary !default
+$button-secondary-hover-background:       darken($background-color-secondary, 2%) !default
+$button-secondary-active-background:      darken($background-color-secondary, 4%) !default
+$button-secondary-border-color:           null !default
+$button-secondary-hover-border-color:     null !default
+$button-secondary-active-border-color:    null !default
+$button-secondary-box-shadow:             null !default
+$button-secondary-hover-box-shadow:       null !default
+$button-secondary-active-box-shadow:      null !default
+
+
+
+$button-danger-color:                  $color-inverse-main !default
+$button-danger-hover-color:            null !default
+$button-danger-active-color:           null !default
+$button-danger-background:             $background-color-danger !default
+$button-danger-hover-background:       darken($background-color-danger, 2%) !default
+$button-danger-active-background:      darken($background-color-danger, 4%) !default
+$button-danger-border-color:           null !default
+$button-danger-hover-border-color:     null !default
+$button-danger-active-border-color:    null !default
+$button-danger-box-shadow:             null !default
+$button-danger-hover-box-shadow:       null !default
+$button-danger-active-box-shadow:      null !default
+
+
+
+$button-dark-color:                  $color-inverse-main !default
+$button-dark-hover-color:            null !default
+$button-dark-active-color:           null !default
+$button-dark-background:             $background-color-dark !default
+$button-dark-hover-background:       darken($background-color-dark, 2%) !default
+$button-dark-active-background:      darken($background-color-dark, 4%) !default
+$button-dark-border-color:           null !default
+$button-dark-hover-border-color:     null !default
+$button-dark-active-border-color:    null !default
+$button-dark-box-shadow:             null !default
+$button-dark-hover-box-shadow:       null !default
+$button-dark-active-box-shadow:      null !default
+
+
+
+$button-light-color:                  $color-main !default
+$button-light-hover-color:            null !default
+$button-light-active-color:           null !default
+$button-light-background:             $background-color-light !default
+$button-light-hover-background:       darken($background-color-light, 2%) !default
+$button-light-active-background:      darken($background-color-light, 4%) !default
+$button-light-border-color:           null !default
+$button-light-hover-border-color:     null !default
+$button-light-active-border-color:    null !default
+$button-light-box-shadow:             null !default
+$button-light-hover-box-shadow:       null !default
+$button-light-active-box-shadow:      null !default
+
+
+
+$button-hollow-primary-color:                  $color-primary !default
+$button-hollow-primary-hover-color:            existing($button-primary-hover-color, $button-primary-color) !default
+$button-hollow-primary-active-color:           existing($button-primary-active-color, $button-hollow-primary-hover-color) !default
+$button-hollow-primary-hover-background:       existing($button-primary-hover-background, $button-primary-background) !default
+$button-hollow-primary-active-background:      existing($button-primary-active-background, $button-hollow-primary-hover-background) !default
+$button-hollow-primary-border-color:           null !default
+$button-hollow-primary-hover-border-color:     existing($button-primary-hover-border-color, $button-primary-border-color, transparent) !default
+$button-hollow-primary-active-border-color:    existing($button-primary-active-border-color, $button-hollow-primary-hover-border-color) !default
+$button-hollow-primary-box-shadow:             $button-primary-box-shadow !default
+$button-hollow-primary-hover-box-shadow:       $button-primary-hover-box-shadow !default
+$button-hollow-primary-active-box-shadow:      $button-primary-active-box-shadow !default
+
+
+
+$button-hollow-secondary-color:                  $color-main !default
+$button-hollow-secondary-hover-color:            existing($button-secondary-hover-color, $button-secondary-color) !default
+$button-hollow-secondary-active-color:           existing($button-secondary-active-color, $button-hollow-secondary-hover-color) !default
+$button-hollow-secondary-hover-background:       existing($button-secondary-hover-background, $button-secondary-background) !default
+$button-hollow-secondary-active-background:      existing($button-secondary-active-background, $button-hollow-secondary-hover-background) !default
+$button-hollow-secondary-border-color:           $line-color-secondary !default
+$button-hollow-secondary-hover-border-color:     existing($button-secondary-hover-border-color, $button-secondary-border-color, transparent) !default
+$button-hollow-secondary-active-border-color:    existing($button-secondary-active-border-color, $button-hollow-secondary-hover-border-color) !default
+$button-hollow-secondary-box-shadow:             $button-secondary-box-shadow !default
+$button-hollow-secondary-hover-box-shadow:       $button-secondary-hover-box-shadow !default
+$button-hollow-secondary-active-box-shadow:      $button-secondary-active-box-shadow !default
+
+
+
+$button-hollow-danger-color:                  $color-danger !default
+$button-hollow-danger-hover-color:            existing($button-danger-hover-color, $button-danger-color) !default
+$button-hollow-danger-active-color:           existing($button-danger-active-color, $button-hollow-danger-hover-color) !default
+$button-hollow-danger-hover-background:       existing($button-danger-hover-background, $button-danger-background) !default
+$button-hollow-danger-active-background:      existing($button-danger-active-background, $button-hollow-danger-hover-background) !default
+$button-hollow-danger-border-color:           null !default
+$button-hollow-danger-hover-border-color:     existing($button-danger-hover-border-color, $button-danger-border-color, transparent) !default
+$button-hollow-danger-active-border-color:    existing($button-danger-active-border-color, $button-hollow-danger-hover-border-color) !default
+$button-hollow-danger-box-shadow:             $button-danger-box-shadow !default
+$button-hollow-danger-hover-box-shadow:       $button-danger-hover-box-shadow !default
+$button-hollow-danger-active-box-shadow:      $button-danger-active-box-shadow !default
+
+
+
+$button-hollow-dark-color:                  $color-dark !default
+$button-hollow-dark-hover-color:            existing($button-dark-hover-color, $button-dark-color) !default
+$button-hollow-dark-active-color:           existing($button-dark-active-color, $button-hollow-dark-hover-color) !default
+$button-hollow-dark-hover-background:       existing($button-dark-hover-background, $button-dark-background) !default
+$button-hollow-dark-active-background:      existing($button-dark-active-background, $button-hollow-dark-hover-background) !default
+$button-hollow-dark-border-color:           null !default
+$button-hollow-dark-hover-border-color:     existing($button-dark-hover-border-color, $button-dark-border-color, transparent) !default
+$button-hollow-dark-active-border-color:    existing($button-dark-active-border-color, $button-hollow-dark-hover-border-color) !default
+$button-hollow-dark-box-shadow:             $button-dark-box-shadow !default
+$button-hollow-dark-hover-box-shadow:       $button-dark-hover-box-shadow !default
+$button-hollow-dark-active-box-shadow:      $button-dark-active-box-shadow !default
+
+
+
+$button-hollow-light-color:                  $color-light !default
+$button-hollow-light-hover-color:            existing($button-light-hover-color, $button-light-color) !default
+$button-hollow-light-active-color:           existing($button-light-active-color, $button-hollow-light-hover-color) !default
+$button-hollow-light-hover-background:       existing($button-light-hover-background, $button-light-background) !default
+$button-hollow-light-active-background:      existing($button-light-active-background, $button-hollow-light-hover-background) !default
+$button-hollow-light-border-color:           null !default
+$button-hollow-light-hover-border-color:     existing($button-light-hover-border-color, $button-light-border-color, transparent) !default
+$button-hollow-light-active-border-color:    existing($button-light-active-border-color, $button-hollow-light-hover-border-color) !default
+$button-hollow-light-box-shadow:             $button-light-box-shadow !default
+$button-hollow-light-hover-box-shadow:       $button-light-hover-box-shadow !default
+$button-hollow-light-active-box-shadow:      $button-light-active-box-shadow !default
+
+
+
+$button-text-primary-color:                 $color-primary !default
+$button-text-primary-hover-color:           darken($color-primary, 10%) !default
+$button-text-primary-active-color:          $button-text-primary-hover-color !default
+$button-text-primary-text-shadow:           null !default
+$button-text-primary-hover-text-shadow:     null !default
+$button-text-primary-active-text-shadow:    null !default
+
+
+
+$button-text-secondary-color:                 $color-secondary !default
+$button-text-secondary-hover-color:           darken($color-secondary, 10%) !default
+$button-text-secondary-active-color:          $button-text-secondary-hover-color !default
+$button-text-secondary-text-shadow:           null !default
+$button-text-secondary-hover-text-shadow:     null !default
+$button-text-secondary-active-text-shadow:    null !default
+
+
+
+$button-text-danger-color:                 $color-danger !default
+$button-text-danger-hover-color:           darken($color-danger, 5%) !default
+$button-text-danger-active-color:          $button-text-danger-hover-color !default
+$button-text-danger-text-shadow:           null !default
+$button-text-danger-hover-text-shadow:     null !default
+$button-text-danger-active-text-shadow:    null !default
+
+
+
+$button-text-dark-color:                 lighten($color-dark, 10%) !default
+$button-text-dark-hover-color:           $color-dark !default
+$button-text-dark-active-color:          $button-text-dark-hover-color !default
+$button-text-dark-text-shadow:           null !default
+$button-text-dark-hover-text-shadow:     null !default
+$button-text-dark-active-text-shadow:    null !default
+
+
+
+$button-text-light-color:                 rgba($color-light, $opacity-muted) !default
+$button-text-light-hover-color:           $color-light !default
+$button-text-light-active-color:          $button-text-light-hover-color !default
+$button-text-light-text-shadow:           null !default
+$button-text-light-hover-text-shadow:     null !default
+$button-text-light-active-text-shadow:    null !default
+
+
+
+$container-max-width-px:    1366px !default
+$container-padding-rem:     $space-medium-rem $space-small-rem !default
+
+
+
+$form-label-typography-size-level:          5 !default
+$form-label-small-typography-size-level:    6 !default
+$form-label-large-typography-size-level:    4 !default
+$form-label-color:                          $color-emphasis !default
+$form-label-required-content:               " | Required" !default
+$form-label-required-color:                 $color-danger !default
+
+
+
+$form-element-inline-width-rem:               18rem !default
+$form-element-small-inline-width-rem:         14rem !default
+$form-element-large-inline-width-rem:         22rem !default
+$form-element-typography-size-level:          5 !default
+$form-element-small-typography-size-level:    6 !default
+$form-element-large-typography-size-level:    4 !default
+$form-element-color:                          $color-main !default
+$form-element-error-color:                    null !default
+$form-element-focus-color:                    null !default
+$form-element-background:                     $background-main !default
+$form-element-focus-background:               null !default
+$form-element-error-background:               null !default
+$form-element-border-width:                   1px !default
+$form-element-border-style:                   solid !default
+$form-element-border-radius:                  $border-radius-main !default
+$form-element-border-color:                   $line-color-main !default
+$form-element-error-border-color:             $line-color-danger !default
+$form-element-focus-border-color:             $line-color-primary !default
+$form-element-box-shadow:                     null !default
+$form-element-focus-box-shadow:               null !default
+$form-element-error-box-shadow:               null !default
+$form-element-icon-size-em:                   1.286em !default
+$form-element-icon-color:                     $form-element-border-color !default
+$form-element-error-icon-color:               $form-element-error-border-color !default
+$form-element-focus-icon-color:               $form-element-focus-border-color !default
+
+
+
+$form-element-text-helvertical-padding-em:    strip-unit($space-small-rem) * 1em !default
+$form-element-textfield-height-rem:           3rem !default
+$form-element-small-textfield-height-rem:     2rem !default
+$form-element-large-textfield-height-rem:     4rem !default
+$form-element-textarea-height-rem:            9rem !default
+$form-element-small-textarea-height-rem:      6rem !default
+$form-element-large-textarea-height-rem:      12rem !default
+
+
+
+$form-element-checkfield-height-em:        1.4em !default
+$form-element-checked-icon-color:          $form-element-color !default
+$form-element-error-checked-icon-color:    null !default
+$form-element-focus-checked-icon-color:    null !default
+
+
+
+$form-element-track-height-em:             0.4em !default
+$form-element-track-background:            darken($background-muted, 4%) !default !default
+$form-element-focus-track-background:      null !default
+$form-element-error-track-background:      null !default
+$form-element-track-border-radius:         $border-radius-main !default
+$form-element-thumb-height-em:             1.4em !default
+$form-element-thumb-width-em:              1.4em !default
+$form-element-thumb-background:            $form-element-track-background !default
+$form-element-error-thumb-background:      null !default
+$form-element-focus-thumb-background:      $background-color-primary !default
+$form-element-thumb-border-radius:         100% !default
+$form-element-thumb-border-color:          transparent !default
+$form-element-error-thumb-border-color:    $form-element-error-border-color !default
+$form-element-focus-thumb-border-color:    null !default
+
+
+
+$form-element-helper-typography-size-level:          6 !default
+$form-element-small-helper-typography-size-level:    null !default
+$form-element-large-helper-typography-size-level:    5 !default
+$form-element-hint-message-color:                    $color-muted !default
+$form-element-error-message-color:                   $color-danger !default
+$form-element-placeholder-color:                     $color-muted !default
+$form-element-error-placeholder-color:               null !default
+$form-element-focus-placeholder-color:               null !default
+
+
+
+$form-element-search-icon:     '<svg viewBox="0 0 1000 1000"><path fill="#fill" d="M983.1,908.7L702.1,625.9c114.2-150.9,102.6-366.6-35-504.2c-150.3-150.3-394.1-150.3-544.4,0c-150.3,150.3-150.3,394,0,544.4c137.5,137.5,353.1,149.2,504,35.2l281,282.8c9.2,9.2,24.2,9.2,33.5,0l41.9-41.9C992.3,932.9,992.3,917.9,983.1,908.7L983.1,908.7z M194.1,596.9c-110.4-110.4-110.4-289.4,0-399.7c110.4-110.4,289.4-110.4,399.8,0c110.4,110.4,110.4,289.3,0,399.7C483.4,707.3,304.5,707.3,194.1,596.9L194.1,596.9z"/></svg>' !default
+$form-element-select-icon:     '<svg viewBox="0 0 18 18"><path fill="#fill" d="M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z"></path></svg>' !default
+$form-element-add-icon:        '<svg viewBox="-100 0 600 500"><path fill="#fill" d="M465.064,207.566l0.028,0H284.436V27.25c0-14.84-12.016-27.248-26.856-27.248h-23.116c-14.836,0-26.904,12.408-26.904,27.248v180.316H26.908c-14.832,0-26.908,12-26.908,26.844v23.248c0,14.832,12.072,26.78,26.908,26.78h180.656v180.968c0,14.832,12.064,26.592,26.904,26.592h23.116c14.84,0,26.856-11.764,26.856-26.592V284.438h180.624c14.84,0,26.936-11.952,26.936-26.78V234.41C492,219.566,479.904,207.566,465.064,207.566z"/></svg>' !default
+$form-element-checked-icon:    '<svg viewBox="-150 -150 800 800"><path fill="#fill" d="M487.75,78.125c-13-13-33-13-46,0l-272,272l-114-113c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10l295-294C500.75,112.125,500.75,91.125,487.75,78.125z"/></svg>' !default
+
+
+
+$grid-columns:             12 !default
+$grid-gutter-width-rem:    $space-medium-rem !default
+
+
+
+$icon-size-em:                1.15em !default
+$icon-stroke-width:           2px !default
+$icon-firefox-line-height:    1.11 !default
+
+
+
+$overlay-background:    rgba($background-color-dark, $opacity-main) !default
+
+
+
+$progress-height-rem:                   2rem !default
+$progress-border-radius:                $border-radius-main !default
+$progress-background:                   $background-muted !default
+$progress-bar-typography-size-level:    6 !default
+$progress-bar-min-width-em:             3em !default
+$progress-bar-padding:                  0 $space-tiny-rem !default
+$progress-bar-background:               $background-color-primary !default
+$progress-bar-color:                    $color-inverse-main !default
+
+
+
+$scrollbar-width-breakpoint:                    m !default
+$scrollbar-breakpoint-vertical-width-rem:       0.5rem !default
+$scrollbar-breakpoint-horizontal-height-rem:    0.5rem !default
+$scrollbar-thumb-background:                    rgba($color-muted, $opacity-more-muted) !default
+$scrollbar-thumb-border-radius:                 0.5rem !default
+$scrollbar-ie-edge-overflow-style:              -ms-autohiding-scrollbar !default
+
+
+
+$table-cell-padding-rem:        $space-small-rem !default
+$table-border-style:            solid !default
+$table-border-width:            1px !default
+$table-border-color:            $line-color-main !default
+$table-border-radius:           null !default
+$table-head-background:         $background-muted !default
+$table-head-color:              $color-emphasis !default
+$table-body-color:              $color-main !default
+$table-row-even-background:     $background-muted !default
+$table-row-odd-background:      $background-main !default
+$table-row-hover-background:    $background-emphasis !default
+$table-row-hover-color:         null !default
+
+
+
+$typography-size-scale-ratio:    constant-get(scale-ratios, minor-third) !default
+
+
+
+$typography-main-size-px:                  14px !default
+$typography-main-size-level:               5 !default
+$typography-main-line-height-ratio:        26 / 14 !default
+$typography-main:                          constant-get(typography-stacks, sans-serif) !default
+$typography-main-baseline-offset-ratio:    constant-get(baseline-offset-ratios, "Helvetica Neue") !default
+$typography-main-color:                    $color-main !default
+
+
+
+$typography-lead:                          null !default
+$typography-lead-baseline-offset-ratio:    $typography-main-baseline-offset-ratio !default
+$typography-lead-color:                    $color-emphasis !default
+$typography-lead-font-weight:              700 !default
+
+
+
+$typography-code:                          constant-get(typography-stacks, code) !default
+$typography-code-baseline-offset-ratio:    constant-get(baseline-offset-ratios, "Courier New") !default
+$typography-block-code-size-level:         6 !default
+
+
+
+$typography-quote:                          null !default
+$typography-quote-baseline-offset-ratio:    $typography-main-baseline-offset-ratio !default
+$typography-block-quote-size-level:         4 !default
+
+
+
+$typography-mark-padding-em:       0.2em 0.4em !default
+$typography-mark-background:       $background-emphasis !default
+$typography-mark-color:            $color-primary !default
+$typography-mark-border-radius:    $border-radius-main !default
+
+
+
+$typography-link-text-decoration:           underline !default
+$typography-link-hover-text-decoration:     null !default
+$typography-link-active-text-decoration:    null !default
+$typography-link-color:                     $color-main !default
+$typography-link-hover-color:               $color-emphasis !default
+$typography-link-active-color:              null !default
+$typography-link-light-color:               $color-inverse-main !default
+$typography-link-light-hover-color:         $color-inverse-emphasis !default
+$typography-link-light-active-color:        null !default
+
+
+
+$typography-code-block-padding-rem:    0 $space-medium-rem !default
+$typography-code-padding-em:           0.2em 0.4em !default
+$typography-code-background:           $background-muted !default
+$typography-code-color:                $color-main !default
+$typography-code-border-radius:        null !default
+
+
+
+$typography-cite-color:                      $color-muted !default
+$typography-quote-block-padding-rem:         3 * $space-small-rem $space-large-rem $space-medium-rem !default
+$typography-quote-block-p-margin-rem:        0 auto $space-small-rem !default
+$typography-quote-block-cite-lead-height:    1px !default
+
+
+
+$typography-sub-sup-size:            100% / $typography-size-scale-ratio !default
+$typography-sub-bottom-offset-em:    -0.25em !default
+$typography-sup-top-offset-em:       -0.5em !default
+
+
+
+$typography-list-nested-padding-em:    0 0 0 strip-unit($space-medium-rem) * 1em !default
+
+
+$turbolinks-progress-bar-height-px:     2px !default
+$turbolinks-progress-bar-background:    $background-color-primary !default
+
+
+
+// variables for collections
+$alert-padding-rem:               $space-small-rem !default
+$alert-border-radius:             0 !default
+$alert-background:                $background-color-dark !default
+$alert-box-shadow:                null !default
+$alert-action-margin-left-rem:    $space-small-rem !default
+$alert-title-color:               $color-inverse-emphasis !default
+$alert-content-color:             $color-inverse-main !default
+
+
+
+$avatar-image-size-rem:                              3rem !default
+$avatar-large-image-size-rem:                        6rem !default
+$avatar-small-image-size-rem:                        2rem !default
+$avatar-image-border-radius:                         100% !default
+$avatar-default-image-background-size:               50% auto !default
+$avatar-default-image:                               svg-icon('<svg viewBox="0 0 512 512"><path fill="#fill" d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 c59.551,0,108,48.448,108,108S315.551,256,256,256z"/></svg>',$line-color-muted) !default
+$avatar-media-description-height-rem:                3rem !default
+$avatar-media-description-padding-top-rem:           0.3rem !default
+$avatar-media-description-padding-left-rem:          0.5rem !default
+$avatar-large-media-description-height-rem:          4rem !default
+$avatar-large-media-description-padding-top-rem:     0.6rem !default
+$avatar-large-media-description-padding-left-rem:    0.5rem !default
+$avatar-small-media-description-height-rem:          null !default
+$avatar-small-media-description-padding-top-rem:     null !default
+$avatar-small-media-description-padding-left-rem:    null !default
+$avatar-name-typography-size-level:                  5 !default
+$avatar-large-name-typography-size-level:            4 !default
+$avatar-small-name-typography-size-level:            6 !default
+$avatar-description-typography-size-level:           6 !default
+$avatar-large-description-typography-size-level:     5 !default
+$avatar-small-description-typography-size-level:     null !default
+$avatar-name-color:                                  null !default
+$avatar-description-color:                           null !default
+
+
+
+$breadcrumb-padding-rem:            $space-small-rem 0 !default
+$breadcrumb-color:                  $color-muted !default
+$breadcrumb-children-padding-em:    0 strip-unit($space-tiny-rem) * 1em !default
+$breadcrumb-children-spliter:       "/" !default
+
+
+
+$button-group-children-margin-rem:    0 $space-small-rem $space-small-rem 0 !default
+
+
+
+$button-icon-size-em:                 1.286em !default
+$button-icon-top-size-em:             1.5em !default
+$button-icon-left-margin-em:          0 0.4em 0 0 !default
+$button-icon-right-margin-em:         0 0 0 0.4em !default
+$button-icon-top-margin-em:           0 0 0.15em 0 !default
+$button-icon-top-height-rem:          4rem !default
+$button-large-icon-top-height-rem:    5rem !default
+$button-small-icon-top-height-rem:    3rem !default
+
+
+
+$carousel-width-breakpoint:                              m !default
+$carousel-aspect-ratio:                                  16 / 9 !default
+$carousel-control-indicators-top-rem:                    $space-small-rem !default
+$carousel-control-indicators-right-rem:                  $space-small-rem !default
+$carousel-control-indicator-height-rem:                  0.2rem !default
+$carousel-indicator-outline-offset-px:                   2px !default
+$carousel-description-padding-rem:                       $space-small-rem !default
+$carousel-breakpoint-control-indicators-top-rem:         $space-medium-rem !default
+$carousel-breakpoint-control-indicators-right-rem:       $space-medium-rem !default
+$carousel-breakpoint-control-prev-left-rem:              $space-small-rem !default
+$carousel-breakpoint-control-next-right-rem:             $space-small-rem !default
+$carousel-breakpoint-description-padding-rem:            $space-medium-rem !default
+$carousel-background:                                    $background-muted !default
+$carousel-description-background:                        linear-gradient(180deg, transparent 0, rgba($background-color-dark, $opacity-most-muted) 2rem) !default
+$carousel-description-color:                             $color-inverse-main !default
+$carousel-control-opacity:                               $opacity-main !default
+$carousel-control-disabled-opacity:                      $opacity-more-muted !default
+$carousel-control-opacity-transition-duration:           0.5s !default
+$carousel-control-opacity-transition-timing-function:    ease !default
+$carousel-transition-duration:                           1s !default
+$carousel-transition-timing-function:                    ease !default
+$carousel-ani-opacity-transition-duration:               1s !default
+$carousel-ani-opacity-transition-timing-function:        ease !default
+
+
+
+$dropdown-width-breakpoint:               m !default
+$dropdown-static-menu-margin-left-rem:    $space-small-rem !default
+$dropdown-absolute-max-height-rem:        33rem !default
+$dropdown-absolute-drop-gap-rem:          $space-tiny-rem !default
+$dropdown-absolute-border-radius:         0 !default
+$dropdown-absolute-fixed-background:      $background-main !default
+$dropdown-absolute-box-shadow:            null !default
+
+
+
+$form-group-element-vertical-margin-rem:    $space-small-rem !default
+
+
+
+$media-content-aspect-ratio:    16 / 9 !default
+$media-border-radius:           $border-radius-main !default
+$media-background-color:        $background-muted !default
+$media-description-color:       $color-muted !default
+
+
+
+$modal-padding-rem:                $space-medium-rem !default
+$modal-in-overlay-max-width-px:    600px !default
+$modal-in-overlay-min-width-px:    320px !default
+$modal-background:                 $background-muted !default
+$modal-border-radius:              $border-radius-main !default
+$modal-box-shadow:                 null !default
+
+
+
+$nav-width-breakpoint:         m !default
+$nav-padding-rem:              $space-tiny-rem $space-small-rem !default
+$nav-logo-margin-rem:          0 $space-small-rem !default
+$nav-open-margin-rem:          0 0 0 auto !default
+$nav-close-margin-rem:         $space-small-rem $space-small-rem 0 auto !default
+$nav-search-margin-rem:        $space-medium-rem !default
+$nav-items-margin-rem:         $space-small-rem !default
+$nav-sub-items-margin-rem:     $nav-items-margin-rem !default
+$nav-logo-image-height-rem:    2rem !default
+$nav-background:               $background-color-dark !default
+
+
+
+$nav-header-box-shadow:                         null !default
+$nav-header-breakpoint-search-margin-rem:       0 $space-small-rem !default
+$nav-header-breakpoint-items-margin-rem:        0 auto 0 0 !default
+$nav-header-breakpoint-sub-items-margin-rem:    0 !default
+$nav-header-breakpoint-search-width-rem:        16rem !default
+$nav-header-breakpoint-dropdown-background:     $nav-background !default
+
+
+
+$nav-aside-box-shadow:                          $nav-header-box-shadow !default
+$nav-aside-breakpoint-padding-rem:              0 !default
+$nav-aside-breakpoint-logo-margin-rem:          3 * $space-small-rem $space-medium-rem $space-small-rem !default
+$nav-aside-breakpoint-logo-image-height-rem:    7rem !default
+$nav-aside-breakpoint-logo-image-width-rem:     9rem !default
+$nav-aside-breakpoint-min-width-rem:            18rem !default
+$nav-aside-breakpoint-max-width-rem:            20rem !default
+$nav-aside-breakpoint-box-shadow:               null !default
+
+
+
+$tab-panes-padding-top-rem:       null !default
+$tab-panes-padding-bottom-rem:    null !default
 $tab-panes-background:            $background-main !default