1// Sass Color Variables 2$black: #000; 3$white: #fff; 4 5$blue-100: #eff2fb; 6$blue-500: #2d60e5; 7 8$green-100: #ecfdf1; 9$green-500: #0a7d06; 10 11$red-100: #feeeed; 12$red-500: #da1416; 13 14$yellow-100: #fff8e4; 15$yellow-500: #efc100; 16 17$gray-100: #f4f4f4; 18$gray-200: #e6e6e6; 19$gray-300: #d8d8d8; 20$gray-400: #cccccc; 21$gray-500: #b3b3b3; 22$gray-600: #999999; 23$gray-700: #666666; 24$gray-800: #3f3f3f; 25$gray-900: #161616; 26 27// Sass Base Color Variables 28$blue: $blue-500; 29$green: $green-500; 30$red: $red-500; 31$yellow: $yellow-500; 32 33// Bootstrap will generate CSS variables for 34// all of the colors in this map. 35// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables 36$colors: ( 37 "blue": $blue, 38 "green": $green, 39 "red": $red, 40 "yellow": $yellow, 41); 42 43// Sass Theme Color Variables 44// Can be used as variants 45$danger: $red; 46$dark: $gray-900; 47$info: $blue; 48$light: $gray-100; 49$primary: $blue; 50$secondary: $gray-800; 51$success: $green; 52$warning: $yellow; 53 54// Sass Color Variable Accents 55// Used for component styles and are 56// not available as variants 57$danger-light: $red-100; 58$info-light: $blue-100; 59$warning-light: $yellow-100; 60$success-light: $green-100; 61 62// Bootstrap will generate CSS variables for 63// all of the colors in this map. 64// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables 65$theme-colors: ( 66 "primary": $primary, 67 "secondary": $secondary, 68 "dark": $dark, 69 "light": $light, 70 "danger": $danger, 71 "info": $info, 72 "success": $success, 73 "warning": $warning 74); 75