Merge pull request #2490 from carpentries/feature/change-color-palette

Update color palette for better accessibility

README.md

@@ -215,6 +215,18 @@ pa11y-ci
 
 Pa11y will exit with a failure code if accessibility failures are found. Reports are stored in the `pa11y-ci-report/` folder.
 
+## Edit the CSS theme
+
+The AMY theme is primarily based on Bootstrap 4. 
+
+To update the custom CSS that sits on top of the Bootstrap theme, edit `amy/static/css/amy.css`.
+
+To override Bootstrap 4 defaults such as colors, edit the [Sass](https://sass-lang.com/) file `amy/static/scss/custom_bootstrap.scss` as required, then compile it to CSS:
+```shell
+$ npx sass amy/static/scss/custom_bootstrap.scss amy/static/css/custom_bootstrap.min.css --style compressed
+```
+See the [Bootstrap documentation](https://getbootstrap.com/docs/4.0/getting-started/theming/) for more guidance on overriding Bootstrap defaults.
+
 [bootstrap]: https://getbootstrap.com/
 [contact-address]: mailto:team@carpentries.org
 [django]: https://www.djangoproject.com

amy/static/css/amy.css

@@ -36,12 +36,12 @@ footer {
 
 .banner-local {
     color: #000000;
-    background: linear-gradient(180deg, hsl(56, 100%, 50%), hsl(56, 80%, 50%));
+    background: #ffc107;
 }
 
 .banner-testing {
     color: #FFFFFF;
-    background: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(0, 80%, 50%));
+    background: #dc3545;
 }
 
 .navbar-banner-displacement {

amy/static/scss/custom_bootstrap.scss

@@ -0,0 +1,97 @@
+// custom_bootstrap.scss
+
+// after editing, compile with Sass:
+// $ npx sass amy/static/scss/custom_bootstrap.scss amy/static/css/custom_bootstrap.min.css --style compressed
+
+// Color system
+// Majority taken from Bootstrap 5 palette 
+// https://getbootstrap.com/docs/5.0/customize/color/
+
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d; // hsl(208, 7, 46)
+$gray-650: hsl(209, 8, 38); // custom
+$gray-700: #495057; // hsl(210, 9, 31)
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+
+$blue: #0060f0; // custom for better contrast with .table-striped and .alert-*
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #d63384;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #198754;
+$teal: #20c997;
+$cyan: #0dcaf2; // very slightly custom to be a light enough background to switch to dark text
+
+$colors: (
+    "blue": $blue,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+    "black": $black,
+    "white": $white,
+    "gray": $gray-600,
+    "gray-dark": $gray-800
+);
+
+$primary: $blue ;
+$secondary: $gray-650; // custom for improved contrast everywhere
+$success: $green ;
+$info: $cyan ;
+$warning: $yellow ;
+$danger: $red ;
+$light: $gray-100 ;
+$dark: $gray-800 ; // custom for improved contrast with $blue (i.e. between text & links)
+
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark
+);
+
+// include all of Bootstrap
+
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+// override some color settings
+
+.navbar-expand-lg .navbar-nav .nav-link {
+    color: $gray-500;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link:hover,
+.navbar-dark .navbar-nav .nav-link:focus {
+    color: $white;
+}
+
+.navbar-dark .navbar-nav .show>.nav-link,
+.navbar-dark .navbar-nav .active>.nav-link,
+.navbar-dark .navbar-nav .nav-link.show,
+.navbar-dark .navbar-nav .nav-link.active {
+    color: $white;
+}
+
+// rarely used; prefer .badge-info and .badge-warning
+.text-info,
+.text-warning {
+    background-color: $dark; // necessary for contrast
+}

amy/templates/base.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
-    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/custom_bootstrap.min.css' %}" />
     <link rel="stylesheet" href="{% static 'bootstrap-datepicker3.min.css' %}" />
     <link rel="stylesheet" href="{% static 'css/all.min.css' %}" />{# from font-awesome #}
     <link rel="stylesheet" href="{% static 'dataTables.bootstrap4.min.css' %}" />