frontend/css/variables/_trestle.scss
// Default theme
$theme-bg: theme-color("primary");
$error-bg: theme-color("danger");
// Header
$header-bg: white;
$header-color: #333333;
$header-height: 50px;
// Footer
$footer-bg: #f9f9f9;
$footer-color: #888888;
// Sidebar
$sidebar-bg: #222222;
$sidebar-hover-bg: #1a1a1a;
$sidebar-active-bg: #393939;
$sidebar-active-border: 4px;
$sidebar-link-color: #919191;
$sidebar-group-color: #595959;
$sidebar-toggle-bg: rgba(black, 0.25);
$sidebar-toggle-color: rgba(white, 0.5);
$sidebar-mobile-toggle-bg: transparent;
$sidebar-mobile-toggle-color: white;
$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);
$sidebar-mobile-toggle-active-bg: rgba($sidebar-mobile-toggle-color, 0.1);
$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border;
$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
$sidebar-width: 250px;
$sidebar-width-collapsed: 54px;
$sidebar-transition-duration: 250ms;
$sidebar-font-size-scale: 0.925;
// Content
$content-header-bg: #fafafa;
$content-sidebar-bg: #f9f9f9;
$content-sidebar-width: 285px;
$main-content-header-bg: $content-sidebar-bg;
$main-content-header-padding: 12px 20px;
$main-content-header-border: 1px solid rgba(black, 0.1);
$main-content-footer-bg: $content-sidebar-bg;
$main-content-footer-padding: 12px 20px;
$main-content-footer-border: 1px solid rgba(black, 0.1);
// Tags
$tag-color: white;
$tag-bg: lighten(theme-color("primary"), 10%);
$tag-border: theme-color("primary");
$tag-hover-color: white;
$tag-hover-bg: theme-color("primary");
$tag-hover-border: darken(theme-color("primary"), 10%);
// Scopes
$scope-padding: 0.25rem 0.675rem;
$scope-color: rgba(black, 0.4);
$scope-bg: rgba(black, 0.035);
$scope-label-color: rgba(black, 0.5);
$scope-hover-color: rgba(black, 0.5);
$scope-hover-bg: rgba(black, 0.05);
$scope-active-color: white;
$scope-active-bg: rgba(black, 0.25);
// Alerts
$alert-success-bg: #7ac47a;
$alert-success-color: white;
$alert-success-border: #66bb66;
$alert-danger-bg: #de7471;
$alert-danger-color: white;
$alert-danger-border: #d85956;
$alert-info-bg: darken(theme-color("info"), 10%);
$alert-info-color: white;
$alert-info-border: darken($alert-info-bg, 10%);
$alert-warning-bg: darken(theme-color("warning"), 5%);
$alert-warning-color: white;
$alert-warning-border: darken($alert-warning-bg, 5%);
$alert-light-bg: theme-color("light");
$alert-light-color: $body-color;
$alert-light-border: darken($alert-light-bg, 5%);
$alert-dark-bg: theme-color("dark");
$alert-dark-color: white;
$alert-dark-border: darken($alert-dark-bg, 10%);
$alert-primary-bg: darken(theme-color("primary"), 5%);
$alert-primary-color: white;
$alert-primary-border: darken($alert-primary-bg, 10%);
// Modals
$modal-header-bg: $theme-bg;
$modal-footer-bg: $content-sidebar-bg;