Merge pull request #5021 from consul/tenant_colors

Make it easier to have different colors per tenant
2022-11-21 19:01:31 +01:00
parent 398dbd0583 ccbdfb8e78
commit 662cc2678c
23 changed files with 246 additions and 93 deletions
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -14,6 +14,7 @@
 $black: #222 !default;
 $white: #fdfdfd !default;

+$body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;

 $closebutton-color: $black !default;
@@ -89,7 +90,11 @@ $highlight-soft:    #f3f8fd !default;
 $light:             #f5f7fa !default;
 $featured:          #ffdc5c !default;

+$footer:            #f1f1f1 !default;
 $footer-border:     #bfc1c3 !default;
+$main-header:       $brand !default;
+$subnavigation:     $body-background !default;
+$top-links:         $brand-secondary !default;

 $success-bg:        #dff0d8 !default;
 $success-border:    #d6e9c6 !default;
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -633,7 +633,7 @@ code {
    display: block;

    &.is-active {
-      @include brand-text;
+      @include brand-color;
      font-weight: bold;
      text-decoration: underline;
    }
--- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
+++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
@@ -5,7 +5,7 @@
  position: relative;

  li {
-    border-top: 4px solid $brand;
+    @include brand-border(top, 4px);
    display: inline-block;
    font-size: $small-font-size;
    font-weight: bold;
@@ -13,7 +13,7 @@
    text-transform: uppercase;

    &::before {
-      background: $brand;
+      @extend %brand-background;
      border-radius: 50%;
      content: "";
      height: 20px;
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -15,6 +15,7 @@
@import "foundation_and_overrides";
@import "fonts";
@import "icons";
+@import "functions/*";
@import "mixins/*";

@import "admin";
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -20,7 +20,7 @@
  }

  .ballot-list-price {
-    @include brand-text;
+    @include brand-color;
    display: block;
    font-weight: bold;
    margin-top: $line-height / 2;
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -8,7 +8,7 @@
  }

  .heading {
-    @include brand-text;
+    @include brand-color;
    border: 2px solid $border;
    border-radius: rem-calc(6);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
--- a/app/assets/stylesheets/budgets/investments/ballot.scss
+++ b/app/assets/stylesheets/budgets/investments/ballot.scss
@@ -2,8 +2,8 @@

  .button-remove-support {
    @include has-fa-icon(times, solid);
+    @include brand-secondary-color;
    background: #e7eaec;
-    color: $brand-secondary;
    font-weight: bold;
    margin-top: $line-height;

--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -87,7 +87,7 @@

      &[aria-selected="true"],
      &.is-active {
-        @include background-with-text-contrast($brand-secondary);
+        @include brand-secondary-background;
        font-weight: normal;
      }

@@ -98,7 +98,7 @@
    }

    &.current-phase-tab a {
-      @include background-with-text-contrast($brand-secondary);
+      @include brand-secondary-background;
      padding-top: $line-height / 2;
    }
  }
--- a/app/assets/stylesheets/budgets/single_heading.scss
+++ b/app/assets/stylesheets/budgets/single_heading.scss
@@ -4,7 +4,7 @@
  position: relative;

  &::after {
-    background: $brand;
+    @extend %brand-background;
    bottom: 0;
    content: "";
    height: rem-calc(6);
--- a/app/assets/stylesheets/budgets/supports_info.scss
+++ b/app/assets/stylesheets/budgets/supports_info.scss
@@ -48,7 +48,7 @@

  .keep-scrolling {
    @include has-fa-icon(angle-double-down, solid, after);
-    color: $brand;
+    @include brand-color;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
--- a/app/assets/stylesheets/custom/tenants.scss
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -0,0 +1,41 @@
+// If you're using multitenancy, you can override styles for a certain
+// tenant by styling the `<html>` element with the class
+// `tenant-<tenant_name>`. For example, to style the public (main)
+// tenant without these styles affecting any other tenants, use the
+// `.tenant-public` selector.
+//
+// You can use CSS variables to customize the colors. Here's an example
+// changing the brand, buttons, links and main layout colors for just
+// the main tenant.
+//
+// .tenant-public {
+//   --anchor-color: #372;
+//   --anchor-color-hover: #137;
+//   --brand: #153;
+//   --brand-secondary: #134a00;
+//   --button-background-hover: #fa0;
+//   --button-background-hover-contrast: #{$black};
+//   --footer: #e6e6e6;
+//   --main-header: #351;
+//   --top-links: var(--main-header);
+//   --subnavigation: #ffd;
+// }
+//
+// Some colors default to another color, so you don't have to change
+// both colors if you'd like them to be the same. For instance, the
+// `--main-header` and `--anchor-color` colors will use the `--brand`
+// color if `--main-header` or `--anchor-color` are not defined, while
+// the `--top-links` color will use the `--brand-secondary` color if
+// `--top-links` is not defined.
+//
+// If, for instance, you're using a light color for the main header when
+// the default color is a dark one, you should also change the text
+// color. You can do that with a variable ending in `-contrast`, like:
+//
+// .tenant-public {
+//   --main-header: #{$white};
+//   --main-header-contrast: #{$black};
+// }
+//
+// NOTE: If you are **not** using mulitenancy, we recommend overwriting
+// SCSS variables in the `_consul_custom_overrides.scss` file instead
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -332,7 +332,7 @@
  }

  .is-active {
-    @include brand-text;
+    @include brand-color;
    position: relative;

    &::before {
@@ -347,11 +347,11 @@
    }

    a {
-      @include brand-text;
+      @include brand-color;
    }

    [class^="icon-"] {
-      @include brand-text;
+      @include brand-color;
    }
  }

@@ -365,7 +365,7 @@
    border-bottom: 2px solid;

    .has-tip {
-      @include brand-text;
+      @include brand-color;
      font-weight: bold;
    }
  }
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -20,7 +20,7 @@
  thead {

    tr th {
-      border: 1px solid $brand;
+      @include brand-border;
    }
  }
 }
--- a/app/assets/stylesheets/functions/reverse_list.scss
+++ b/app/assets/stylesheets/functions/reverse_list.scss
@@ -0,0 +1,9 @@
+@function reverse-list($list) {
+  $reversed: [];
+
+  @for $i from length($list) * -1 through -1 {
+    $reversed: append($reversed, nth($list, abs($i)));
+  }
+
+  @return $reversed;
+}
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -95,10 +95,7 @@ p {
 }

 a {
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
+  @include link;
 }

 a,
@@ -125,8 +122,6 @@ button,

 .button {
  @extend %button;
-  @include inverted-selection;
-  background: $brand;

  &.medium {
    font-size: $small-font-size;
@@ -135,8 +130,15 @@ button,

 .button.hollow {
  @include normal-selection;
+  @include anchor-color;
  border: 1px solid;
-  color: $anchor-color;
+
+  &:hover,
+  &:focus {
+    $hover-color: scale-color($anchor-color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+    color: var(--anchor-color-hover, $hover-color);
+  }
 }

 .button.hollow.error {
@@ -260,7 +262,7 @@ button,
    }

    &.is-active {
-      @include brand-text;
+      @include brand-color;
      border-bottom: 2px solid;
      padding-bottom: rem-calc(1);
    }
@@ -287,7 +289,7 @@ button,
      padding: 0;

      &.is-active {
-        @include brand-text;
+        @include brand-color;
        font-weight: bold;
      }
    }
@@ -297,7 +299,7 @@ button,
    }

    &.is-active {
-      @include brand-text;
+      @include brand-color;
      border-bottom: 2px solid;
    }
  }
@@ -359,14 +361,14 @@ button,
    position: relative;

    &:hover {
-      @include brand-text;
+      @include brand-color;
      background: none;
      text-decoration: none;
    }

    &[aria-selected="true"],
    &.is-active {
-      @include brand-text;
+      @include brand-color;
      border-bottom: 0;
      font-weight: bold;

@@ -519,7 +521,7 @@ body > header,
      padding: rem-calc(6);

      [type="submit"] {
-        @include brand-text;
+        @include brand-color;
        background: none;
        border: 0;
        cursor: pointer;
@@ -547,7 +549,7 @@ body > header,
  }

  .top-bar {
-    @extend %brand-background;
+    @include background-with-text-contrast($main-header, [main-header, brand]);
  }
 }

@@ -599,7 +601,7 @@ body > header,
      text-align: left;

      @include breakpoint(medium) {
-        @include brand-text;
+        @include brand-color;
        background: $body-background;
        text-align: center;
      }
@@ -690,7 +692,7 @@ body > header,
 }

 .top-links {
-  @include background-with-text-contrast($brand-secondary);
+  @include background-with-text-contrast($top-links, [top-links, brand-secondary]);
  display: flex;
  flex-wrap: wrap;
  font-size: $small-font-size;
@@ -734,6 +736,7 @@ body > header,
  flex-direction: column;

  @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation, subnavigation);
    flex-direction: row;
    padding-bottom: 0;

@@ -769,11 +772,11 @@ body > header,
      width: auto;

      &:hover {
-        color: $anchor-color;
+        @include anchor-color;
      }

      &.is-active {
-        @include brand-text;
+        @include brand-color;
        border-bottom: 2px solid;
        margin-bottom: 1px;
      }
@@ -845,7 +848,7 @@ body > header,
  }

  .is-active {
-    @include brand-text;
+    @include brand-color;
    border-bottom: 2px solid;

    &:hover {
@@ -909,7 +912,7 @@ footer {
 }

 .footer {
-  background: #f1f1f1;
+  @include background-with-text-contrast($footer, footer);
  clear: both;
  margin-top: $line-height * 2;
  padding-bottom: $line-height;
@@ -938,8 +941,8 @@ footer {

 .categories a,
 .geozone a {
+  @include anchor-color;
  background: $highlight;
-  color: $anchor-color;

  &:hover,
  &.is-active {
@@ -948,7 +951,7 @@ footer {
 }

 .sidebar-title {
-  border-top: 2px solid $brand;
+  @include brand-border(top, 2px);
  display: inline-block;
  font-size: rem-calc(16);
  font-weight: bold;
@@ -968,7 +971,7 @@ footer {
 }

 .auth-image {
-  @include background-with-text-contrast($brand);
+  @include brand-background;
  background-repeat: no-repeat;
  background-size: cover;

@@ -1357,8 +1360,8 @@ form {
  }

  &::before {
+    @include brand-color;
    background: $body-background;
-    color: $brand;
    content: "\4d";
    font-family: "icons" !important;
    font-size: $small-font-size;
@@ -2504,8 +2507,8 @@ table {
  h3 {

    &.title {
+      @include brand-border(top, 4px);
      display: inline-block;
-      border-top: 4px solid $brand;
      margin-bottom: 0;
      padding: $line-height / 2 0;
    }
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -20,7 +20,7 @@
    text-decoration: none;

    &:hover {
-      @include brand-text;
+      @include brand-color;
    }
  }
 }
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -134,7 +134,7 @@
    margin-bottom: rem-calc(40);

    .debate-type {
-      @include brand-text;
+      @include brand-color;
      text-transform: uppercase;
      font-weight: 700;
      font-size: $small-font-size;
@@ -145,7 +145,7 @@
    }

    .debate-title a {
-      @include brand-text;
+      @include brand-color;
    }
  }

@@ -194,7 +194,7 @@
    }

    h4 a {
-      @include brand-text;
+      @include brand-color;

      &:hover {
        text-decoration: none;
@@ -211,7 +211,7 @@
    }

    .quiz-next {
-      @include brand-text;
+      @include brand-color;
      background: #ccdbe5;
      font-size: $small-font-size;
      font-weight: bold;
@@ -264,7 +264,7 @@
    }

    .control input:checked ~ .control-indicator {
-      background-color: $brand;
+      @include brand-background;
      border: 0;
    }

--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -1,6 +1,7 @@
@import "mixins/colors";

@mixin base-button {
+  @include button-base;
  font-size: $base-font-size;

  &:focus,
@@ -13,30 +14,61 @@
  }
 }

-%button {
+@mixin regular-button($color: $brand) {
  @include base-button;
+
+  @if $color == $brand {
+    @include brand-background;
+  } @else {
+    @include background-with-text-contrast($color);
+  }
+
+  &:hover,
+  &:focus {
+    @include background-with-text-contrast($button-background-hover, button-background-hover);
+  }
 }

-@mixin regular-button($color: $brand) {
-  @include button($background: $color);
-  @include inverted-selection;
-  @include base-button;
+%button {
+  @include regular-button;
 }

@mixin hollow-button($color: $anchor-color) {
-  @include button($style: hollow, $background: $color);
  @include normal-selection;
  @include base-button;
+  border-color: currentcolor;
+  color: $color;
  margin-bottom: 0;
+
+  @if $color == $anchor-color {
+    @include anchor-color;
+  } @else if $color == $brand {
+    @include brand-color;
+  }
+
+  &:hover,
+  &:focus {
+    $hover-color: scale-color($color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+
+    @if $color == $anchor-color {
+      color: var(--anchor-color-hover, $hover-color);
+    }
+  }
 }

@mixin link {
-  color: $anchor-color;
+  @include anchor-color;
  cursor: pointer;

+  &:hover,
+  &:active,
+  &:focus {
+    @include anchor-color-hover;
+  }
+
  &:hover,
  &:active {
-    color: $anchor-color-hover;
    text-decoration: underline;
  }
 }
@@ -45,7 +77,7 @@
  color: inherit;

  &:hover {
-    color: $anchor-color;
+    @include anchor-color;
  }
 }

--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,19 +1,56 @@
-@mixin background-with-text-contrast($color) {
+@mixin background-with-text-contrast($color, $property-names: null, $check-invert-selection: true) {
  background-color: $color;
  color: color-pick-contrast($color);
-}

-@mixin brand-background($color: $brand, $invert-selection: true) {
-  @include background-with-text-contrast($color);
+  @if $property-names {
+    $background-color: $color;
+    $text-color: color-pick-contrast($color);

-  @if $invert-selection {
-    @include inverted-selection;
+    @each $property-name in reverse-list($property-names) {
+      $background-color: var(--#{$property-name}, #{$background-color});
+      $text-color: var(--#{$property-name}-contrast, #{$text-color});
+    }
+
+    background-color: $background-color;
+    color: $text-color;
+  }
+
+  @if $check-invert-selection {
+    @include inverted-selection($color);
  }
 }

-@mixin brand-text {
+@mixin text-color($color, $property-names: null) {
+  color: $color;
+
+  @if $property-names {
+    $text-color: $color;
+
+    @each $property-name in reverse-list($property-names) {
+      $text-color: var(--#{$property-name}, #{$text-color});
+    }
+
+    color: $text-color;
+  }
+}
+
+@mixin brand-background {
+  @include background-with-text-contrast($brand, brand);
+}
+
+@mixin brand-color {
  @include normal-selection;
-  color: $brand;
+  @include text-color($brand, brand);
+}
+
+@mixin brand-border($position: null, $width: 1px) {
+  @if $position == null {
+    border: $width solid $brand;
+    border: $width solid var(--brand, $brand);
+  } @else {
+    border-#{$position}: $width solid $brand;
+    border-#{$position}: $width solid var(--brand, $brand);
+  }
 }

@mixin body-colors {
@@ -25,25 +62,44 @@

  &::selection,
  *::selection {
-    @include brand-background($invert-selection: false);
+    @include background-with-text-contrast($brand, brand, $check-invert-selection: false);
  }
 }

-@mixin inverted-selection {
-
-  &::selection,
-  *::selection {
-    background-color: rgba(color-pick-contrast($brand), 0.99);
-    color: $brand;
+@mixin inverted-selection($background-color) {
+  @if color-contrast($background-color, $brand) < 4.5 {
+    &::selection,
+    *::selection {
+      background-color: rgba(color-pick-contrast($brand), 0.99);
+      background-color: var(--brand-contrast, rgba(color-pick-contrast($brand), 0.99));
+      color: $brand;
+      color: var(--brand, $brand);
+    }
  }
 }

+@mixin brand-secondary-background {
+  @include background-with-text-contrast($brand-secondary, brand-secondary);
+}
+
+@mixin brand-secondary-color {
+  @include text-color($brand-secondary, brand-secondary);
+}
+
+@mixin anchor-color {
+  @include text-color($anchor-color, [anchor-color, brand]);
+}
+
+@mixin anchor-color-hover {
+  @include text-color($anchor-color-hover, anchor-color-hover);
+}
+
 %brand-background {
  @include brand-background;
 }

-%brand-text {
-  @include brand-text;
+%brand-color {
+  @include brand-color;
 }

 %body-colors {
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -1,6 +1,16 @@
@import "mixins/icons";
@import "mixins/layouts";

+@mixin public-form-header-background($color, $final-color-width) {
+  background-image: linear-gradient(
+    to right,
+    #{$color} 0,
+    #{$color} calc(100% - #{$final-color-width} - 1px),
+    #{$body-background} calc(100% - #{$final-color-width}),
+    #{$body-background} 100%
+  );
+}
+
@mixin public-form-header {
  $border-width: 4px;

@@ -14,8 +24,9 @@
    $icon-size-with-padding: $icon-size + $padding-right;
    $polygon-size: $icon-size / 2;
    @include background-till-left-of-screen;
-    @include brand-background($brand-secondary);
+    @include brand-secondary-background;
    border: $border-width solid $brand-secondary;
+    border: $border-width solid var(--brand-secondary, $brand-secondary);
    border-bottom-right-radius: rem-calc(12);
    border-top-right-radius: rem-calc(12);
    margin-top: $line-height * 2;
@@ -30,14 +41,9 @@

    @include breakpoint(large) {
      $rounding-error: 6px;
+      @include public-form-header-background($brand-secondary, $icon-size-with-padding);
+      @include public-form-header-background(var(--brand-secondary, $brand-secondary), $icon-size-with-padding);
      padding-right: $icon-size-with-padding;
-      background-image: linear-gradient(
-        to right,
-        #{$brand-secondary} 0,
-        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
-        #{$body-background} calc(100% - #{$icon-size-with-padding}),
-        #{$body-background} 100%
-      );

      &::after {
        background: $body-background;
@@ -90,7 +96,7 @@
        }

        &::before {
-          color: $brand-secondary;
+          @include brand-secondary-color;
          display: block;
          font-size: $icon-size;
          right: $padding-right;
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -1516,7 +1516,7 @@ $font-awesome-icons: (

  &:hover,
  &:focus {
-    color: $anchor-color-hover;
+    @include anchor-color-hover;
    text-decoration: none;
  }

--- a/app/assets/stylesheets/pages.scss
+++ b/app/assets/stylesheets/pages.scss
@@ -57,7 +57,7 @@
 .more-info-content {

  h3 {
-    @include brand-text;
+    @include brand-color;
  }

  .additional-info {
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -256,7 +256,7 @@
  aside {

    h2 {
-      border-top: 2px solid $brand;
+      @include brand-border(top, 2px);
      display: inline-block;
      font-size: rem-calc(16);
      margin: -1px 0 rem-calc(12);
@@ -830,7 +830,7 @@
  }

  .is-active {
-    @include brand-text;
+    @include brand-color;

    &::after {
      content: "\6c";
@@ -1082,7 +1082,7 @@
 }

 .current-phase {
-  @include brand-text;
+  @include brand-color;
 }

 .progress-votes {
@@ -1097,7 +1097,7 @@
  }

  .progress-meter {
-    background: $brand;
+    @include brand-background;
    border-radius: rem-calc(12);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
@@ -1119,7 +1119,7 @@
    }

    span {
-      @include brand-text;
+      @include brand-color;
      font-size: $base-font-size;
    }
  }
@@ -1133,7 +1133,7 @@
    white-space: nowrap;

    &::before {
-      color: $brand;
+      @include brand-color;
      content: "\57";
      font-family: "icons";
      font-size: $small-font-size;
@@ -1144,7 +1144,7 @@
    }

    span {
-      @include brand-text;
+      @include brand-color;
      font-size: rem-calc(24);
    }
  }
@@ -1180,7 +1180,7 @@
  }

  .subtitle {
-    border-left: 2px solid $brand;
+    @include brand-border(left, 2px);
    margin: $line-height / 2 0;
    padding-left: $line-height / 2;
  }
@@ -1442,7 +1442,7 @@
  width: $line-height / 2;

  &.is-active {
-    background-color: $brand;
+    @include brand-background;
  }
 }

@@ -1482,7 +1482,7 @@
  cursor: pointer;

  &:hover {
-    @include background-with-text-contrast($brand-secondary);
+    @include brand-secondary-background;
    text-decoration: none;
  }
 }