nfg_ui 0.14.7 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 05a95730f7c2225296befbfe1178af7a29b3a8ed255a50b6b95d592cde3033b9
-  data.tar.gz: d22f8eae5836aafb27de952191c19315b904244f809c424909ff6667c4ba9c07
+  metadata.gz: 419a30a7bba39457a8a302cd76f9869dc8137cb549daeb69bfc43ede1a300faf
+  data.tar.gz: 50ba3bbd9c3656168f9ca6764f34c103e9115fc0ce6518b6428e6ab0c6589f9f
 SHA512:
-  metadata.gz: ccc896b73e6e3e7d3bab1809a1596c999ad0630e956c5d2562cd2dbaa06d5308613accf902995a97db4a1bd8e36220d6ed419897873daebd774a18c2a1825340
-  data.tar.gz: d2508d36d8ce9d01787dd30a4543ebf98d37014ac6d56d6e4433e6e69acf26fd982fbb91455e29dee452e5a1680d2342b1c6e1b67ad12fcd1a45b559006cdf74
+  metadata.gz: 23b514054279cf16d1b3062dd6b42ff032ed2a855b700d555ba172099929c38f92193e39a9459516bf8e5fed191cf0b162eea8ee363cc83378c2566156ffe8aa
+  data.tar.gz: bd49cce363c87b9db04b8ce610ea21794273548d80eb1f195162830f69700311647835100292f74e5223e7645fa7a08e1dc88ae4199f8445e9cdc10943fd9c98

data/app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss

@@ -1,3 +1,9 @@
+//**********
+// NOTE:
+// if $white, $gray-800, or any of the $yiq-* variables are updated,
+// update them here as well: /app/views/nfg_ui/_entity_branding_styles.html.haml
+//**********
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/application.scss

@@ -4,13 +4,13 @@
 @import 'nfg_ui/network_for_good/core/variables';
 
 // NFG Theme - listed individually because we need functions and reboot first
-@import 'nfg_theme/functions';
 @import 'nfg_theme/reboot';
 @import 'nfg_theme/badge';
 @import 'nfg_theme/buttons';
 @import 'nfg_theme/custom-forms';
 @import 'nfg_theme/custom';
 @import 'nfg_theme/forms';
+@import 'nfg_theme/functions';
 @import 'nfg_theme/nav';
 @import 'nfg_theme/navbar';
 @import 'nfg_theme/type';

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_badge.scss

@@ -1,5 +1,5 @@
 // Specific styles for entity branding
 .badge-primary {
-  background: scale-color($primary, $lightness: 80%);
-  border-color: $primary;
+  background: var(--brand-primary-scale-light);
+  border-color: var(--brand-primary);
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_buttons.scss

@@ -1,54 +1,55 @@
 // Specific styles for entity branding
+
 .btn-primary {
-  color: color-yiq($primary);
-  background-color: $primary;
-  border-color: $primary;
+  color: var(--brand-primary-yiq);
+  background-color: var(--brand-primary);
+  border-color: var(--brand-primary);
   &:hover {
-    color: color-yiq(darken($primary, 10%));
-    background-color: darken($primary, 10%);
-    border-color: darken($primary, 10%);
+    color: var(--brand-primary-dark-yiq);
+    background-color: var(--brand-primary-dark);
+    border-color: var(--brand-primary-dark);
   }
   &:focus,
   &.focus {
-    box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8);
+    box-shadow: 0 0 0 $input-btn-focus-width var(--brand-primary-transparent);
   }
   &.disabled, &:disabled {
-    color: color-yiq($primary);
-    background-color: $primary;
-    border-color: $primary;
+    color: var(--brand-primary-yiq);
+    background-color: var(--brand-primary);
+    border-color: var(--brand-primary);
   }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($primary);
-    background-color: $primary;
-    border-color: $primary;
-    box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8);
-    &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8); }
+    color: var(--brand-primary-yiq);
+    background-color: var(--brand-primary);
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 $input-btn-focus-width var(--brand-primary-transparent);
+    &:focus { box-shadow: 0 0 0 $input-btn-focus-width var(--brand-primary-transparent); }
   }
 }
 
 .btn-secondary, .btn-outline-secondary {
-  color: color-yiq($primary, $yiq-text-dark, $primary);
-  &:hover { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
+  color: var(--brand-primary-yiq-text-dark);
+  &:hover { color: var(--brand-primary-yiq-text-dark) !important; }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($primary, $yiq-text-dark, $primary) !important;
+    color: var(--brand-primary-yiq-text-dark) !important;
   }
 }
 
 .btn-link {
-  color: color-yiq($primary, $yiq-text-dark, $primary);
-  &:hover { color: color-yiq(darken($primary, 15%), $yiq-text-dark, darken($primary, 15%)); }
-  &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8); }
+  color: var(--brand-primary-yiq-text-dark);
+  &:hover { color: var(--brand-primary-yiq-text-darkest); }
+  &:focus { box-shadow: 0 0 0 $input-btn-focus-width var(--brand-primary-transparent); }
 }
 
 .bg-dark {
   .btn-primary {
-    h1, h2, h3, h4, h5, h6, p, label { color: color-yiq($primary); }
+    h1, h2, h3, h4, h5, h6, p, label { color: var(--brand-primary-yiq); }
   }
   .btn-outline-secondary {
-    h1, h2, h3, h4, h5, h6, p, label { color: color-yiq($primary, $yiq-text-dark, $primary); }
+    h1, h2, h3, h4, h5, h6, p, label { color: var(--brand-primary-yiq-text-dark); }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_custom-forms.scss

@@ -3,42 +3,42 @@
 .custom-control {
   .custom-control-input {
     &:checked {
-      ~ .custom-control-label, ~ .custom-control-label::before { border-color: $primary; }
+      ~ .custom-control-label, ~ .custom-control-label::before { border-color: var(--brand-primary); }
       ~ .custom-control-label::before {
-        background-color: $primary;
-        box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+        background-color: var(--brand-primary);
+        box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent);
       }
     }
     &:not(:disabled):active ~ .custom-control-label::before {
-      background-color: lighten($primary, 35%);
-      border-color: lighten($primary, 35%);
+      background-color: var(--brand-primary-light);
+      border-color: var(--brand-primary-light);
     }
   }
   &.custom-control-block {
-    .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8); }
+    .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent); }
   }
 }
 
 .custom-select {
   &:active, &:focus {
-    border-color: $primary;
-    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent);
   }
 }
 
 .custom-file-input {
   &:focus ~ .custom-file-label {
-    border-color: $primary;
-    &::after { border-color: $primary; }
+    border-color: var(--brand-primary);
+    &::after { border-color: var(--brand-primary); }
   }
 }
 
 .custom-switch {
   .custom-control-input:checked ~ .custom-control-label {
-    &::after { border-color: $primary; }
+    &::after { border-color: var(--brand-primary); }
     &::before {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--brand-primary);
+      border-color: var(--brand-primary);
     }
   }
 }
@@ -48,7 +48,7 @@
 .custom-control-input {
   .was-validated &:valid {
     &:checked {
-      ~ .custom-control-label::before { background-color: $primary; }
+      ~ .custom-control-label::before { background-color: var(--brand-primary); }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_forms.scss

@@ -1,8 +1,8 @@
 // Specific styles for entity branding
 .form-control {
   &:focus {
-    border-color: $primary;
-    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent);
   }
 }
 
@@ -11,6 +11,6 @@
 .form-control,
 .custom-select {
   .was-validated &:valid {
-    &:focus { border-color: $primary; }
+    &:focus { border-color: var(--brand-primary); }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_functions.scss

@@ -14,16 +14,3 @@
     @return $light;
   }
 }
-
-// This function replaces the hex color code with proper URL-encoding for color in SVG paths
-@function encodecolor($string) {
-  @if type-of($string) == 'color' {
-    $hex: str-slice(ie-hex-str($string), 4);
-    $string:unquote("#{$hex}");
-  }
-  $string: '%23' + $string;
-  @return $string;
-}
-
-// Entity variable for custom select and select2 arrow icons
-$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{encodecolor($primary)}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_nav.scss

@@ -3,7 +3,7 @@
   &.flex-column {
     .nav-link {
       &:hover, &.active {
-        &:after { background: $primary; }
+        &:after { background: var(--brand-primary); }
       }
     }
   }
@@ -11,7 +11,7 @@
 .nav-tabs {
   .nav-link {
     &:hover, &.active {
-      &:after { background: $primary; }
+      &:after { background: var(--brand-primary); }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_navbar.scss

@@ -3,16 +3,16 @@
 .navbar-light {
   .navbar-brand,
   .navbar-toggler {
-    color: color-yiq($primary, $yiq-text-dark, $primary);
-    &:hover, &:focus { color: color-yiq($primary, $yiq-text-dark, $primary); }
+    color: var(--brand-primary-yiq-text-dark);
+    &:hover, &:focus { color: var(--brand-primary-yiq-text-dark); }
   }
   .navbar-nav {
     .nav-link {
-      &:hover, &:focus { color: color-yiq($primary, darken($primary, 10%), $primary); }
+      &:hover, &:focus { color: var(--brand-primary-yiq-text-darker); }
     }
     .open > .nav-link,
     .active > .nav-link,
     .nav-link.open,
-    .nav-link.active { color: color-yiq($primary, darken($primary, 10%), $primary); }
+    .nav-link.active { color: var(--brand-primary-yiq-text-darker); }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_reboot.scss

@@ -1,6 +1,6 @@
 // Specific styles for entity branding
 
 a {
-  color: color-yiq($primary, $yiq-text-dark, $primary);
-  &:not(.btn):hover, &:not(.btn):focus { color: darken($primary, 15%) !important; }
+  color: var(--brand-primary-yiq-text-dark);
+  &:not(.btn):hover, &:not(.btn):focus { color: var(--brand-primary-dark) !important; }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_type.scss

@@ -1,16 +1,16 @@
 // Specific styles for entity branding
 
 a.no-link-color {
-  &:hover, &:active, &:focus { color: $primary !important; }
+  &:hover, &:active, &:focus { color: var(--brand-primary) !important; }
 }
 
-.text-primary { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
+.text-primary { color: var(--brand-primary-yiq-text-dark) !important; }
 
 a.text-primary {
-  color: color-yiq($primary, darken($primary, 15%), $primary) !important;
-  &:hover, &:focus { color: darken($primary, 15%) !important; }
+  color: var(--brand-primary-yiq-text-darker) !important;
+  &:hover, &:focus { color: var(--brand-primary-dark) !important; }
 }
 
 .bg-dark {
-  .text-primary { color: color-yiq($primary, $primary, $yiq-text-light) !important; }
+  .text-primary { color: var(--brand-primary-yiq-text-light) !important; }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_utilities.scss

@@ -1,8 +1,8 @@
 // Specific styles for entity branding
 
 .bg-primary {
-  color: color-yiq($primary) !important;
-  background-color: $primary !important;
+  color: var(--brand-primary-yiq) !important;
+  background-color: var(--brand-primary) !important;
 }
 
-.border-primary { border-color: $primary !important; }
+.border-primary { border-color: var(--brand-primary) !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/custom/_nav_step.scss

@@ -5,16 +5,16 @@
   .nav-item {
 
     &.visited, &.active {
-      &::before { background-color: $primary; }
+      &::before { background-color: var(--brand-primary); }
       .step-indicator {
-        color: color-yiq($primary);
-        background-color: $primary;
-        border-color: $primary;
+        color: var(--brand-primary-yiq);
+        background-color: var(--brand-primary);
+        border-color: var(--brand-primary);
       }
     }
 
     .step-indicator {
-      &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.8); }
+      &::after { box-shadow: 0 0 0 ($spacer * .25) var(--brand-primary-transparent); }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_datetimepicker.scss

@@ -8,8 +8,8 @@
   .next,
   .timepicker-picker a.btn {
     &:hover, &:active, &.active {
-      color: color-yiq($primary) !important;
-      background-color: $primary !important;
+      color: var(--brand-primary-yiq) !important;
+      background-color: var(--brand-primary) !important;
     }
   }
 
@@ -17,8 +17,8 @@
   .today {
     &.active {
       &:hover, &:active {
-        color: color-yiq($primary) !important;
-        background-color: $primary !important;
+        color: var(--brand-primary-yiq) !important;
+        background-color: var(--brand-primary) !important;
       }
     }
   }
@@ -26,19 +26,19 @@
 
 //** Datepicker specific
 .datepicker {
-  .prev, .next { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  .prev, .next { color: var(--brand-primary-yiq-text-dark); }
 }
 
 //** Timepicker picker section
-.timepicker-picker td a { color: color-yiq($primary, $yiq-text-dark, $primary); }
+.timepicker-picker td a { color: var(--brand-primary-yiq-text-dark); }
 
 //** Time/Date Toggle
 .picker-switch.accordion-toggle {
   a {
-    color: color-yiq($primary, $yiq-text-dark, $primary);
+    color: var(--brand-primary-yiq-text-dark);
     &:hover, &:active {
-      color: color-yiq($primary) !important;
-      background-color: $primary !important;
+      color: var(--brand-primary-yiq) !important;
+      background-color: var(--brand-primary) !important;
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_select2.scss

@@ -3,11 +3,11 @@
 .select2-container--default {
   &.select2-container--focus .select2-selection--multiple,
   &.select2-container--open .select2-selection--single {
-    border-color: $primary !important;
-    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+    border-color: var(--brand-primary) !important;
+    box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent);
   }
   .select2-search--dropdown .select2-search__field:focus {
-    border-color: $primary !important;
-    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+    border-color: var(--brand-primary) !important;
+    box-shadow: 0 0 0 ($spacer * .125) var(--brand-primary-transparent);
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_print.scss

@@ -18,3 +18,9 @@
     ul, ol, img { page-break-inside: avoid; }
   }
 }
+
+.page-break {
+  margin-top: ($spacer * 4);
+  margin-bottom: ($spacer * 4);
+  @media print { page-break-after: always; }
+}

data/app/views/nfg_ui/_entity_branding_styles.html.haml

@@ -0,0 +1,54 @@
+- brand_primary = local_assigns[:brand_primary]
+
+:scss
+
+  //**********
+  // NOTE:
+  // if $white, $gray-800, or any of the $yiq-* variables are updated,
+  // update them here as well: /app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss
+  //**********
+
+  // Brings in core variables needed (ex: $yiq-text-dark) because @import doesn't work in auctions (rails_6 branch)
+  // @import 'nfg_ui/network_for_good/core/variables';
+  $yiq-contrasted-threshold:  147;
+  $yiq-text-dark:             #313A3E; // $gray-800
+  $yiq-text-light:            #FFFFFF; // $white
+
+  // Brings in color-yiq function for color contrasts because @import doesn't work in auctions (rails_6 branch)
+  // @import 'nfg_ui/network_for_good/core/entity_branding/nfg_theme/functions';
+  @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+    $r: red($color);
+    $g: green($color);
+    $b: blue($color);
+
+    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+    @if ($yiq >= $yiq-contrasted-threshold) {
+      @return $dark;
+    } @else {
+      @return $light;
+    }
+  }
+
+  // CSS variables that override bootstrap's default colors with the entity's colors
+  $brand-colors: (
+    brand-primary: #{brand_primary},
+    brand-primary-scale-light: scale-color(#{brand_primary}, $lightness: 80%),
+    brand-primary-light: lighten(#{brand_primary}, 35%),
+    brand-primary-dark: darken(#{brand_primary}, 10%),
+    brand-primary-dark-yiq: color-yiq(darken(#{brand_primary}, 10%)),
+    brand-primary-transparent: transparentize(#{brand_primary}, 0.8),
+    brand-primary-yiq: color-yiq(#{brand_primary}),
+    brand-primary-yiq-text-dark: color-yiq(#{brand_primary}, $yiq-text-dark, #{brand_primary}),
+    brand-primary-yiq-text-darker: color-yiq(#{brand_primary}, darken(#{brand_primary}, 10%), #{brand_primary}),
+    brand-primary-yiq-text-darkest: color-yiq(darken(#{brand_primary}, 15%), $yiq-text-dark, darken(#{brand_primary}, 15%)),
+    brand-primary-yiq-text-light: color-yiq(#{brand_primary}, #{brand_primary}, $yiq-text-light)
+  );
+
+  // CSS variables at root
+  :root {
+    // Loop over each name, color
+    @each $name, $color in $brand-colors {
+      --\#{$name}: \#{$color};
+    }
+  }

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.14.7'
+  VERSION = '0.15.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.14.7
+  version: 0.15.0
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -597,6 +597,7 @@ files:
 - app/helpers/nfg_ui/components/email_helpers.rb
 - app/helpers/nfg_ui/components/resource_themes_helper.rb
 - app/helpers/nfg_ui/components/tooltip_helper.rb
+- app/views/nfg_ui/_entity_branding_styles.html.haml
 - app/views/nfg_ui/app_icons/_icons.html.haml
 - app/views/nfg_ui/email/README.md
 - app/views/nfg_ui/email/_alert.html.inky-haml