// Jinja2-rendered theme elements $hg-primary: {{ colors.primary }} $hg-secondary: {{ colors.secondary }} $hg-danger: {{ colors.danger }} $hg-warning: {{ colors.warning }} $hg-light: {{ colors.light }} $hg-dark: {{ colors.dark }} $hg-background: {{ colors.background }} // Functions @function findTextColor($color) @if (lightness($color) > 55%) @return $hg-dark @else @return $hg-light @function findAltBackgroundColor($color) @if (lightness($color) > 55%) @return $hg-light @else @return $hg-dark @function findFooterColor($color) @if (lightness($color) > 55%) $darker-color: scale-color($hg-light, $lightness: -3%) @return grayscale($darker-color) @else $darker-color: scale-color($hg-dark, $lightness: -3%) @return grayscale($darker-color) // App variables $hg-loading: findAltBackgroundColor($hg-background) $hg-footer: findFooterColor($hg-background) // Theme Overrides $font-family-sans-serif: "{{ font.primary }}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" $font-family-monospace: "{{ font.mono }}", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace $headings-font-weight: 400 $enable-responsive-font-sizes: true $enable-validation-icons: false $theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer) $body-bg: $hg-background $body-color: findTextColor($body-bg) $border-radius: .44rem $border-radius-lg: .4rem $border-radius-sm: .35rem