mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
140 lines
5.0 KiB
Sass
140 lines
5.0 KiB
Sass
// Jinja2-rendered theme elements
|
|
$hg-primary: {{ colors.primary }}
|
|
$hg-secondary: {{ colors.secondary }}
|
|
$hg-danger: {{ colors.danger }}
|
|
$hg-warning: {{ colors.warning }}
|
|
$hg-background: {{ colors.background }}
|
|
$hg-font-primary: {{ font.primary.name }}
|
|
$hg-font-primary-size: {{ font.primary.size }}
|
|
$hg-font-mono: {{ font.mono.name }}
|
|
$hg-font-mono-size: {{ font.mono.size }}
|
|
|
|
// Functions
|
|
@function findTextColor($color)
|
|
$inverted: invert($color)
|
|
@if (lightness($color) > 55%)
|
|
$text-color: scale-color($inverted, $lightness: -90%)
|
|
@return grayscale($text-color)
|
|
@else
|
|
$text-color: scale-color($inverted, $lightness: 90%)
|
|
@return grayscale($text-color)
|
|
|
|
@function findOverlayColor($color)
|
|
@if (lightness($color) > 55%)
|
|
$darker-color: scale-color($color, $lightness: -3%)
|
|
@return grayscale($darker-color)
|
|
@else
|
|
$darker-color: scale-color($color, $lightness: 5%)
|
|
@return grayscale($darker-color)
|
|
|
|
@function findSubtleColor($color)
|
|
@if (lightness($color) > 55%)
|
|
$subtle-color: scale-color($color, $lightness: -3%)
|
|
@return grayscale($subtle-color)
|
|
@else
|
|
$subtle-color: scale-color($color, $lightness: 20%)
|
|
@return grayscale($subtle-color)
|
|
|
|
@function findInvertedColor($color)
|
|
$inverted: invert($color)
|
|
@if (lightness($inverted) > 55%)
|
|
$border: scale-color($inverted, $lightness: -3%)
|
|
@return grayscale($border)
|
|
@else
|
|
$border: scale-color($inverted, $lightness: 3%)
|
|
@return grayscale($border)
|
|
|
|
@function findFieldColor($color)
|
|
@if (lightness($color) > 55%)
|
|
@return $color
|
|
@else
|
|
$darker-color: scale-color($color, $lightness: 5%)
|
|
@return grayscale($darker-color)
|
|
|
|
@function findSubtleText($color)
|
|
@if (lightness($color) > 55%)
|
|
$subtle-color: scale-color($color, $lightness: -20%)
|
|
@return grayscale($subtle-color)
|
|
@else
|
|
$subtle-color: scale-color($color, $lightness: 40%)
|
|
@return grayscale($subtle-color)
|
|
|
|
// Body Color
|
|
$body-bg: $hg-background
|
|
$body-color: findTextColor($body-bg)
|
|
|
|
// Global variables
|
|
$hg-overlay: findOverlayColor($hg-background)
|
|
$hg-inverted: findInvertedColor($hg-background)
|
|
$hg-field: findFieldColor($hg-background)
|
|
$hg-border: rgba(findInvertedColor($hg-overlay), .2)
|
|
$hg-primary-color: findTextColor($hg-primary)
|
|
|
|
// App variables
|
|
$hg-loading: $hg-overlay
|
|
$hg-footer: $hg-overlay
|
|
$hg-overlay-bg: $hg-overlay
|
|
$hg-overlay-color: findTextColor($hg-overlay-bg)
|
|
$hg-inverted-bg: $hg-inverted
|
|
$hg-inverted-color: findTextColor($hg-inverted-bg)
|
|
$hg-field-bg: $hg-field
|
|
$hg-field-color: findTextColor($hg-field-bg)
|
|
|
|
// Bootstrap Overrides
|
|
|
|
//// Components
|
|
$component-active-color: findTextColor($hg-primary)
|
|
|
|
//// Flags
|
|
$enable-responsive-font-sizes: true
|
|
$enable-validation-icons: false
|
|
$theme-colors: ("primary": $hg-primary, "secondary": $hg-secondary, "danger": $hg-danger, "warning": $hg-warning, "light": findTextColor(black), "dark": findTextColor(white), "overlay": $hg-overlay)
|
|
|
|
//// Fonts/Text
|
|
$font-family-sans-serif: $hg-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: $hg-font-mono, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
|
|
$headings-font-weight: 400
|
|
$font-size-base: $hg-font-primary-size
|
|
|
|
//// Borders
|
|
$border-radius: .5rem
|
|
$border-radius-lg: .7rem
|
|
$border-radius-sm: .4rem
|
|
|
|
//// Popovers
|
|
$popover-bg: $hg-field-bg
|
|
$popover-border-color: $hg-border
|
|
$popover-body-color: $hg-field-color
|
|
|
|
//// Cards
|
|
$card-bg: $hg-field-bg
|
|
$card-color: $hg-field-color
|
|
$card-border-color: $hg-border
|
|
|
|
//// Dropdowns
|
|
$dropdown-bg: $hg-field-bg
|
|
$dropdown-color: $hg-field-color
|
|
$dropdown-divider-bg: $hg-border
|
|
$dropdown-border-color: $hg-border
|
|
$dropdown-header-color: findSubtleText($dropdown-color)
|
|
$dropdown-link-color: $hg-field-color
|
|
$dropdown-link-hover-bg: $hg-primary
|
|
$dropdown-link-hover-color: $hg-primary-color
|
|
$dropdown-link-active-bg: $hg-primary
|
|
$dropdown-link-active-color: $hg-primary-color
|
|
|
|
//// Forms
|
|
$input-bg: $hg-field-bg
|
|
$input-color: $hg-field-color
|
|
$input-border-color: $hg-border
|
|
$input-placeholder-color: findSubtleText($hg-field-color)
|
|
$input-btn-focus-box-shadow: none
|
|
$input-focus-bg: findSubtleColor($input-bg)
|
|
$input-focus-color: $input-color
|
|
$input-focus-border-color: findOverlayColor($hg-border)
|
|
|
|
//// Code
|
|
$code-color: $hg-secondary
|
|
$kbd-bg: findOverlayColor($hg-overlay)
|
|
$kbd-color: $hg-overlay-color
|
|
$pre-color: $body-color |