colors.scss
1 $brand-primary: #007896; 2 $brand-info: #163151; 3 $brand-success: #5dba5a; 4 $brand-warning: #ff9800; 5 $brand-danger: #db5846; 6 7 $dark-rgb: 0, 0, 0; 8 $light-rgb: 255, 255, 255; 9 10 $gray-base: #000; 11 $gray-darker: #1c1c1c; 12 $gray-dark: #333; 13 $gray: #737373; 14 $gray-light: #9a9a9a; 15 $gray-lighter: #ececec; 16 $gray-lightest: #fafafa; 17 18 $theme-light: ( 19 dark-rgb: $dark-rgb, 20 light-rgb: $light-rgb, 21 22 gray-base: $gray-base, 23 gray-darker: $gray-darker, 24 gray-dark: $gray-dark, 25 gray: $gray, 26 gray-light: $gray-light, 27 gray-lighter: $gray-lighter, 28 gray-lightest: $gray-lightest, 29 30 brand-primary: $brand-primary, 31 brand-primary-dark: darken($brand-primary, 6%), 32 brand-primary-darker: darken($brand-primary, 12%), 33 brand-primary-light: lighten($brand-primary, 6%), 34 brand-primary-lighter: lighten($brand-primary, 12%), 35 36 brand-success: $brand-success, 37 brand-success-dark: darken($brand-success, 6%), 38 brand-success-darker: darken($brand-success, 12%), 39 brand-success-light: lighten($brand-success, 6%), 40 brand-success-lighter: lighten($brand-success, 12%), 41 42 brand-info: $brand-info, 43 brand-info-dark: darken($brand-info, 6%), 44 brand-info-darker: darken($brand-info, 12%), 45 brand-info-light: lighten($brand-info, 6%), 46 brand-info-lighter: lighten($brand-info, 12%), 47 48 brand-warning: $brand-warning, 49 brand-warning-dark: darken($brand-warning, 6%), 50 brand-warning-darker: darken($brand-warning, 12%), 51 brand-warning-light: lighten($brand-warning, 6%), 52 brand-warning-lighter: lighten($brand-warning, 12%), 53 54 brand-danger: $brand-danger, 55 brand-danger-dark: darken($brand-danger, 6%), 56 brand-danger-darker: darken($brand-danger, 12%), 57 brand-danger-light: lighten($brand-danger, 6%), 58 brand-danger-lighter: lighten($brand-danger, 12%), 59 60 white-clear: rgba(#fff, 0.8), 61 white-clearer: rgba(#fff, 0.7), 62 white-clearest: rgba(#fff, 0.6), 63 64 body-bg: $gray-lightest, 65 pane-bg: #fff, 66 67 footer-bg: $brand-info, 68 footer-border: $brand-primary, 69 70 text-color: $gray-dark, 71 text-color-inverted: #fff, 72 73 link-color: $brand-primary, 74 link-hover-color: darken($brand-primary, 10%), 75 76 tab-color: $brand-info, 77 tab-border: #ececec, 78 tab-active-color: $brand-primary, 79 tab-active-border: $brand-primary, 80 81 control-bg: #fff, 82 control-color: $gray-dark, 83 control-border: #e5ecf3, 84 control-disabled-bg: $gray-lightest, 85 control-disabled-color: $gray-dark, 86 control-disabled-border: #e6e6e6, 87 control-placeholder: rgba($gray-dark, 0.3), 88 control-inset-shadow: rgba($gray-base, 0.03), 89 control-addon-bg: $gray-lighter, 90 91 loader-light: #fff, 92 loader-dark: $brand-info, 93 94 code-bg: #eff5fe, 95 code-border: #e5ecf3, 96 97 tooltip-bg: $gray-darker, 98 tooltip-color: #fff, 99 100 component-active-color: #fff, 101 component-active-bg: $brand-primary, 102 ); 103 104 $gray-base: #b8bfd0; 105 $gray-darker: #8e97a9; 106 $gray-dark: #4d5463; 107 $gray: #393f4c; 108 $gray-light: #333842; 109 $gray-lighter: #282C34; 110 $gray-lightest: #21252B; 111 112 $theme-dark: ( 113 dark-rgb: $light-rgb, 114 light-rgb: $dark-rgb, 115 116 gray-base: $gray-base, 117 gray-darker: $gray-darker, 118 gray-dark: $gray-dark, 119 gray: $gray, 120 gray-light: $gray-light, 121 gray-lighter: $gray-lighter, 122 gray-lightest: $gray-lightest, 123 124 brand-primary: lighten($brand-primary, 6%), 125 brand-primary-dark: $brand-primary, 126 brand-primary-darker: darken($brand-primary, 6%), 127 brand-primary-light: lighten($brand-primary, 12%), 128 brand-primary-lighter: lighten($brand-primary, 16%), 129 130 brand-success: lighten($brand-success, 6%), 131 brand-success-dark: $brand-success, 132 brand-success-darker: darken($brand-success, 6%), 133 brand-success-light: lighten($brand-success, 12%), 134 brand-success-lighter: lighten($brand-success, 16%), 135 136 brand-info: lighten($brand-info, 6%), 137 brand-info-dark: $brand-info, 138 brand-info-darker: darken($brand-info, 6%), 139 brand-info-light: lighten($brand-info, 12%), 140 brand-info-lighter: lighten($brand-info, 16%), 141 142 brand-warning: lighten($brand-warning, 6%), 143 brand-warning-dark: $brand-warning, 144 brand-warning-darker: darken($brand-warning, 6%), 145 brand-warning-light: lighten($brand-warning, 12%), 146 brand-warning-lighter: lighten($brand-warning, 16%), 147 148 brand-danger: saturate(lighten($brand-danger, 6%), 7%), 149 brand-danger-dark: saturate($brand-danger, 7%), 150 brand-danger-darker: saturate(darken($brand-danger, 6%), 7%), 151 brand-danger-light: saturate(lighten($brand-danger, 12%), 7%), 152 brand-danger-lighter: saturate(lighten($brand-danger, 16%), 7%), 153 154 white-clear: rgba($gray-lightest, 0.9), 155 white-clearer: rgba($gray-lightest, 0.8), 156 white-clearest: rgba($gray-lightest, 0.7), 157 158 body-bg: $gray-lightest, 159 pane-bg: $gray-lighter, 160 161 footer-bg: $gray-light, 162 footer-border: $gray-light, 163 164 text-color: #fff, 165 text-color-inverted: #fff, 166 167 link-color: lighten($brand-primary, 10%), 168 link-hover-color: lighten($brand-primary, 20%), 169 170 tab-color: $gray-base, 171 tab-border: $gray-base, 172 tab-active-color: #fff, 173 tab-active-border: #fff, 174 175 control-bg: $gray, 176 control-color: #FFF, 177 control-border: $gray-dark, 178 control-disabled-bg: rgba($gray-light, 0.5), 179 control-disabled-color: #aaa, 180 control-disabled-border: rgba($gray-light, 0.5), 181 control-placeholder: rgba(#FFF, 0.3), 182 control-inset-shadow: rgba(#FFF, 0.03), 183 control-addon-bg: $gray-dark, 184 185 loader-light: #fff, 186 loader-dark: #fff, 187 188 code-bg: $gray, 189 code-border: $gray-dark, 190 191 tooltip-bg: #1c1c1c, 192 tooltip-color: #FFF, 193 194 component-active-color: $gray-light, 195 component-active-bg: $brand-primary, 196 ); 197 198 $themes: ( 199 ('light', $theme-light), 200 ('dark', $theme-dark) 201 ); 202 203 $color-var-prefix: '--color'; 204 @function color($name) { 205 // First make sure it's a legit color, and error if not 206 @if (map-get($theme-light, $name) == null) { 207 @error 'Color `#{$name}` is not a valid color'; 208 @return false; 209 } 210 211 @return var(#{$color-var-prefix}-#{$name}); 212 } 213 214 @function shade-dark($opacity) { 215 @return rgba(var(#{$color-var-prefix}-dark-rgb), $opacity); 216 } 217 218 @function shade-light($opacity) { 219 @return rgba(var(#{$color-var-prefix}-light-rgb), $opacity); 220 }