luda 0.1.5

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

@@ -0,0 +1,240 @@
+// sass-lint:disable max-line-length
+// sass-lint:disable variable-name-format
+$_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-third: 1.2, major-third: 1.25, perfect-fourth: 1.333, augmented-fourth: 1.414, perfect-fifth: 1.5, golden-ratio: 1.618), typography-stacks: (sans-serif: ("Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif), code: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)), baseline-offset-ratios: (Abel: 0.15772, "Abril Fatface": 0.1165, Anton: 0.096, Arial: 0.15332, "Arial Black": 0.10449, "Arial Narrow": 0.13818, Arimo: 0.15332, Arvo: 0.14307, Avenir: 0.183, Baskerville: 0.17407, "Bebas Neue": 0.2, Bitter: 0.165, "Bree Serif": 0.102, Cabin: 0.1425, Courier: 0.171, "Courier New": 0.23389, "Courier Prime": 0.31, "Crimson Text": 0.146, Dosis: 0.105, "Droid Sans": 0.15454, "Droid Serif": 0.15454, "Fira Sans": 0.225, "Fjalla One": 0.11963, Futura: 0.1106, Geneva: 0.125, "Gill Sans": 0.161, Georgia: 0.15112, Helvetica: 0.121, "Helvetica Neue": 0.128, Hind: 0.2455, Impact: 0.10107, Inconsolata: 0.1655, "Indie Flower": 0.25879, Josefin Sans: 0.25, Lato: 0.113, "League Gothic": 0.165, "Libre Baskerville": 0.15, "Libre Franklin": 0.14, Lobster: 0.125, Lora: 0.16235, "Lucida Grande": 0.122, Merriweather: 0.14502, "Merriweather Sans": 0.14502, Montserrat: 0.1415, Muli: 0.1225, "Noto Sans": 0.11206, "Noto Serif": 0.11206, Nunito: 0.171, "Open Sans": 0.11206, "Open Sans Condensed": 0.11206, Oswald: 0.04761, Oxygen: 0.10449, Palatino: 0.231, "Playfair Display": 0.08447, Poppins: 0.205, "PT Sans": 0.188, "PT Sans Narrow": 0.188, "PT Serif": 0.129, Raleway: 0.147, Roboto: 0.1582, "Roboto Condensed": 0.1582, "Roboto Slab": 0.11157, Rosario: 0.141, "San Francisco": 0.122, "Segoe UI": 0.086, "Slabo": 0.18519, "Source Sans Pro": 0.1445, "Source Code Pro": 0.145, "Source Serif Pro": 0.15, "Space Mono": 0.121, Tahoma: 0.10303, Times: 0.175, "Times New Roman": 0.1626, "Titillium Web": 0.1275, "Trebuchet MS": 0.1416, Ubuntu: 0.1285, "Ubuntu Condensed": 0.1285, "Varela Round": 0.184, Verdana: 0.1023, "Yanone Kaffeesatz": 0.1215, Yrsa: 0.25))
+// sass-lint:enable max-line-length
+// sass-lint:enable variable-name-format
+
+@function constant-get($keys...)
+  $value: $_CONSTANTS // sass-lint:disable-line variable-name-format
+  @each $key in $keys
+    @if $value and map-has-key($value, $key)
+      $value: map-get($value, $key)
+    @else
+      $value: null
+  @return $value
+
+@function existing($values...)
+  @each $value in $values
+    @if $value
+      @return $value
+  @return null
+
+@function pow($value, $pow)
+  $pow-value: 1
+  @if $pow > 0
+    @for $i from 1 through $pow
+      $pow-value: $pow-value * $value
+  @else if $pow < 0
+    @for $i from 1 through -$pow
+      $pow-value: $pow-value / $value
+  @return $pow-value
+
+@function hsba($h-hsb, $s-hsb, $b-hsb, $a: 1)
+  $value: null
+  @if $b-hsb == 0
+    $value: hsla(0, 0, 0, $a)
+  @else
+    $l-hsl: $b-hsb / 2 * (2 - $s-hsb / 100)
+    $rotate-deg: if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2)
+    $s-hsl: if($s-hsb == 0, 0, $b-hsb * $s-hsb / $rotate-deg)
+    $value: hsla($h-hsb, $s-hsl, $l-hsl, $a)
+  @return $value
+
+@function _mirror-nth-two($values: null)
+  $right-value: if(length($values) >= 2, nth($values, 2), nth($values, 1))
+  @return $right-value
+
+@function _mirror-nth-three($values: null)
+  $top-value: nth($values, 1)
+  $bottom-value: if(length($values) >= 3, nth($values, 3), $top-value)
+  @return $bottom-value
+
+@function _mirror-nth-four($values: null)
+  $left-value: if(length($values) >= 4, nth($values, 4), null)
+  $left-value: if($left-value, $left-value, _mirror-nth-two($values))
+  @return $left-value
+
+@function mirror-nth($values, $index)
+  $value: null
+  @if $index == 2
+    $value: _mirror-nth-two($values)
+  @else if $index == 3
+    $value: _mirror-nth-three($values)
+  @else if $index == 4
+    $value: _mirror-nth-four($values)
+  @return $value
+
+@function _is-same-unit($values...)
+  $unit-cache: null
+  @each $value in $values
+    $value-unit: $value / strip-unit($value)
+    @if $value-unit != 0
+      @if not $unit-cache
+        $unit-cache: $value-unit
+      @else
+        @if $unit-cache != $value-unit
+          @return false
+  @return true
+
+@function _is-rem($value)
+  @if $value / strip-unit($value) == 1rem
+    @return true
+  @return false
+
+@function strip-unit($value)
+  @return $value / ($value * 0 + 1)
+
+@function px-to-rem($px)
+  @if $px
+    @return $px / _baseline-height-px(1) * 1rem
+  @return null
+
+@function _responsive-class-fix($breakpoint)
+  $first-breakpoint: nth(map-keys($breakpoint-width-pxs), 1)
+  $class-fix: if($breakpoint == $first-breakpoint, null, "-#{$breakpoint}")
+  @return $class-fix
+
+@function _baseline-height-px($count: 1)
+  $baseline: $typography-main-size-px * $typography-main-line-height-ratio / 2
+  $baseline: if($baseline < 12px, 12px, $baseline)
+  @return $baseline * $count
+
+@function _typo-size-px($level)
+  @if $level
+    $pow: $typography-main-size-level - $level
+    $pow-value: pow($typography-size-scale-ratio, $pow)
+    @return round($typography-main-size-px * $pow-value)
+  @else
+    @return null
+
+@function _typo-line-height-px($level)
+  @if $level
+    $baseline-count: 1
+    $font-size: _typo-size-px($level)
+    @while _baseline-height-px($baseline-count) / $font-size < 1.2
+      $baseline-count: $baseline-count + 1
+    @return _baseline-height-px($baseline-count)
+  @else
+    @return null
+
+@function _typo-padding-top-px($level, $typeface-baseline-offset)
+  @if $typeface-baseline-offset
+    $font-size: _typo-size-px($level)
+    $line-height: _typo-line-height-px($level)
+    @return ($line-height - $font-size) / 2 + $font-size * $typeface-baseline-offset
+  @else
+    @return null
+
+@function _typo-padding-bottom-px($level, $typeface-baseline-offset)
+  @if $typeface-baseline-offset
+    $offset-top: _typo-padding-top-px($level, $typeface-baseline-offset)
+    $offset-bottom: 0
+    $baseline-count: 1
+    @while $offset-bottom <= 0
+      $offset-bottom: _baseline-height-px($baseline-count) - $offset-top
+      $baseline-count: $baseline-count + 1
+    @return $offset-bottom
+  @else
+    @return null
+
+@function typo-size($level)
+  @return px-to-rem(_typo-size-px($level))
+
+@function typo-line-height($level)
+  @return px-to-rem(_typo-line-height-px($level))
+
+@function typo-padding-top($level, $typeface-baseline-offset)
+  @return px-to-rem(_typo-padding-top-px($level, $typeface-baseline-offset))
+
+@function typo-padding-bottom($type, $typeface-baseline-offset)
+  @return px-to-rem(_typo-padding-bottom-px($type, $typeface-baseline-offset))
+
+@function _str-replace($string, $search, $replace: "")
+  $index: str-index($string, $search)
+  $sliced: if($index, str-slice($string, 1, $index - 1), null)
+  $replaced-sliced: if($index, str-slice($string, $index + str-length($search)), null)
+  $replaced: if($index, _str-replace($replaced-sliced, $search, $replace), null)
+  @return if($index, $sliced + $replace + $replaced, $string)
+
+@function svg-encode($svg)
+  @if not str-index($svg, xmlns)
+    $svg: _str-replace($svg, "<svg", '<svg xmlns="http://www.w3.org/2000/svg"')
+  $encoded: ""
+  $slice: 2000
+  $index: 0
+  $loops: ceil(str-length($svg) / $slice)
+  @for $i from 1 through $loops
+    $chunk: str-slice($svg, $index, $index + $slice - 1)
+    $chunk: _str-replace($chunk, '"', "'")
+    $chunk: _str-replace($chunk, "%", "%25")
+    $chunk: _str-replace($chunk, "&", "%26")
+    $chunk: _str-replace($chunk, "#", "%23")
+    $chunk: _str-replace($chunk, "{", "%7B")
+    $chunk: _str-replace($chunk, "}", "%7D")
+    $chunk: _str-replace($chunk, "<", "%3C")
+    $chunk: _str-replace($chunk, ">", "%3E")
+    //    The maybe list 
+    //    Keep size and compile time down
+    //    ... only add on documented fail 
+    //  $chunk: _str-replace($chunk, '|', '%7C')
+    //  $chunk: _str-replace($chunk, '[', '%5B')
+    //  $chunk: _str-replace($chunk, ']', '%5D')
+    //  $chunk: _str-replace($chunk, '^', '%5E')
+    //  $chunk: _str-replace($chunk, '`', '%60')
+    //  $chunk: _str-replace($chunk, ';', '%3B')
+    //  $chunk: _str-replace($chunk, '?', '%3F')
+    //  $chunk: _str-replace($chunk, ':', '%3A')
+    //  $chunk: _str-replace($chunk, '@', '%40')
+    //  $chunk: _str-replace($chunk, '=', '%3D')
+    $encoded: #{$encoded}#{$chunk}
+    $index: $index + $slice
+  @return unquote('"data:image/svg+xml,#{$encoded}"')
+
+@function svg-icon($icon: null, $fill: null, $stroke: null)
+  $icon: if($fill, _str-replace($icon, "#fill", "#{$fill}"), $icon)
+  $icon: if($stroke, _str-replace($icon, "#stroke", "#{$stroke}"), $icon)
+  @return svg-encode($icon)
+
+@function _form-icon-margin-top($form-element-textfield-height-rem, $form-element-typography-size-level)
+  $border-bottom-width: mirror-nth($form-element-border-width, 3)
+  $border-top-width: nth($form-element-border-width, 1)
+  $border-bottom-unit-is-rem: _is-rem($border-bottom-width)
+  $border-top-unit-is-rem: _is-rem($border-top-width)
+  $font-size: typo-size($form-element-typography-size-level)
+  $icon-size: $font-size * strip-unit($form-element-icon-size-em)
+  $total-height: ($form-element-textfield-height-rem + $icon-size) / 2
+  $border-unit-is-rem: $border-bottom-unit-is-rem and $border-top-unit-is-rem
+  $border-unit-is-the-same: _is-same-unit($border-bottom-width, $border-top-width)
+  $border-vertical-diff: if($border-unit-is-the-same, ($border-top-width - $border-bottom-width) / 2, null)
+  @if $border-unit-is-rem
+    @return $border-vertical-diff - $total-height
+  @else if $border-unit-is-the-same
+    @if strip-unit($border-vertical-diff) == 0
+      @return - $total-height
+    @return calc(#{$border-vertical-diff} - #{$total-height})
+  @else
+    @return calc(#{$border-top-width / 2} - #{$border-bottom-width / 2} - #{$total-height})
+
+@function form-focus-icon-color()
+  $icon-color: if($form-element-focus-icon-color, $form-element-focus-icon-color, $form-element-icon-color)
+  @return $icon-color
+
+@function form-error-icon-color()
+  $icon-color: if($form-element-error-icon-color, $form-element-error-icon-color, $form-element-icon-color)
+  @return $icon-color
+
+@function form-error-focus-icon-color()
+  $icon-color: if($form-element-focus-icon-color, $form-element-focus-icon-color, $form-element-error-icon-color)
+  @return $icon-color
+
+@function form-focus-background()
+  $background: if($form-element-focus-background, $form-element-focus-background, $form-element-background)
+  @return $background
+
+@function form-error-background()
+  $background: if($form-element-error-background, $form-element-error-background, $form-element-background)
+  @return $background
+
+@function form-error-focus-background()
+  $background: if($form-element-focus-background, $form-element-focus-background, $form-element-error-background)
+  @return $background

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

@@ -0,0 +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
+$tab-panes-background:            $background-main !default