superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/variables/_colors.scss

@@ -1,81 +1,119 @@
 // variables/colors.scss
-// -----------------------------------------------------
-
+// -------------------------------------------------------------------------
+
+// Refernce Colours
+$ref-color-primary:         hsla(198, 50%, 50%, 1);
+$ref-color-success:         hsla(120, 40%, 50%, 1);
+$ref-color-alert:           hsla(358, 79%, 50%, 1);
+$ref-color-warning:         hsla(35, 100%, 50%, 1);
+$ref-color-highlight:       hsla(291, 64%, 50%, 1);
+$ref-color-neutral:         hsla(0,    0%, 50%, 1);
+
+// Refernce Colours -- DARK BGs & Lines
+$ref-color-cool-grey--00:   hsl(214, 13%, 12%);
+$ref-color-cool-grey--01:   hsl(214, 13%, 16%);
+$ref-color-cool-grey--02:   hsl(214, 13%, 20%);
+$ref-color-cool-grey--03:   hsl(214, 13%, 25%);
+$ref-color-cool-grey--04:   hsl(214, 13%, 30%);
+
+// Refernce Colours -- LIGHT BGs & Lines
+$ref-color-light-grey--00:  hsl(214, 13%, 100%);
+$ref-color-light-grey--01:  hsl(214, 13%, 96%);
+$ref-color-light-grey--02:  hsl(214, 13%, 92%);
+$ref-color-light-grey--03:  hsl(214, 13%, 85%);
+$ref-color-light-grey--04:  hsl(214, 13%, 80%);
+$ref-color-light-grey--05:  hsl(214, 13%, 75%);
+$ref-color-light-grey--06:  hsl(214, 13%, 70%);
+$ref-color-light-grey--07:  hsl(214, 13%, 65%);
+$ref-color-light-grey--08:  hsl(214, 13%, 60%);
+
+///// ==============
+
+
+$sd-colour-interactive:                     var(--sd-colour-interactive);
+$sd-colour--focus-shadow:                   var(--sd-colour-interactive--alpha-40);
+
+$mainListBackGround:                        var(--sd-colour-panel-bg--100);
+$subnav-background:                         var(--sd-colour-panel-bg--100);
+$subnav-background-darker:                  var(--sd-colour-panel-bg--200);
+
+$subnav-background-blue-grey:               var(--color-subnav-bg--blueGrey-00);
+$subnav-background-blue-grey-darker:        var(--color-subnav-bg--blueGrey-10);
+$subnav-background-dark-blue-grey:          var(--color-subnav-bg--blueGrey-10);
+$subnav-background-darkUi:                  var(--color-subnav-bg--00);
 
 // NEWLY DEFINED COLOURS
-// =======================================================
-$sd-colour-background__base: #fff;
-$sd-colour-background__panel--default: #fff;
-
-$sd-colour-brand__base--supedesk: rgba(30, 176, 108, 1);
-$sd-colour-brand__base--primary: rgba(51, 197, 160, 1);
-$sd-colour-brand__base--secondary: rgba(109, 176, 182, 1);
-
-$sd-colour-text__base: var(--color-text);
-$sd-colour-text__base--light: var(--color-text-light);
-$sd-colour-text__slugline: var(--sd-slugline-color);
-
-$sd-colour-interactive__base: rgba(94, 169, 200, 1);
-// $sd-colour-interactive__base: rgb(197, 34, 143); // needed for testing
-$sd-colour-interactive__base--hover: scale-color($sd-colour-interactive__base, $lightness: -16%);
-$sd-colour-interactive__base--active: scale-color($sd-colour-interactive__base, $lightness: -24%);
-$sd-colour-interactive__base--focus-shadow: scale-color($sd-colour-interactive__base, $alpha: -65%);
-
-$sd-colour-background__menu-item: transparent;
-$sd-colour-background__menu-item--hover: scale-color($sd-colour-interactive__base, $alpha: -90%);
-$sd-colour-background__menu-item--active: scale-color($sd-colour-interactive__base, $alpha: -80%);
-
-$sd-colour-background__button-primary--normal: $sd-colour-interactive__base;
-$sd-colour-background__button-primary--hover: scale-color($sd-colour-background__button-primary--normal, $lightness: -20%);
-$sd-colour-background__button-primary--active: scale-color($sd-colour-background__button-primary--normal, $lightness: -25%);
-
-// =======================================================
-
-
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333;
-$grayMedium:            #444;
-$gray:                  #666;
-$grayNeutral:           #7b7b7b;
-$grayText:              #747474;
-$grayLight:             #999;
-$grayLighter:           #F5F5F5;
-$white:                 #fff;
+// =========================================================================
+$sd-colour-background__base:                        hsla(0, 0%, 100%, 1);
+$sd-colour-background__panel--default:              hsla(0, 0%, 100%, 1);
+
+$sd-colour-brand__base--supedesk:                   hsla(152, 71%, 40%, 1);
+$sd-colour-brand__base--primary:                    hsla(165, 59%, 49%, 1);
+$sd-colour-brand__base--secondary:                  hsla(185, 33%, 57%, 1);
+
+$sd-colour-text__base:                              var(--color-text);
+$sd-colour-text__base--light:                       var(--color-text-light);
+$sd-colour-text__slugline:                          var(--sd-slugline-color);
+
+$sd-colour-background__sliding-toolbar:             var(--sd-colour-bg__sliding-toolbar);
+
+$sd-colour-background__menu-item:                   transparent;
+$sd-colour-background__menu-item--hover:            var(--sd-colour-interactive--alpha-20);
+$sd-colour-background__menu-item--active:           var(--sd-colour-interactive--alpha-30);
+
+$sd-colour-background__button-primary--normal:      var(--sd-colour-interactive);
+$sd-colour-background__button-primary--hover:       var(--sd-colour-interactive--hover);
+$sd-colour-background__button-primary--active:      var(--sd-colour-interactive--active);
+
+// =========================================================================
+
 
-// Greys
-$gray--900:             #333;
-$gray--800:             #444;
-$gray--700:             #555;
-$gray--600:             #666;
-$gray--500:             #747474;
-$gray--400:             #888;
-$gray--300:             #999;
-$gray--200:             #ccc;
-$gray--100:             #dedede;
-$gray--75:              #ededed;
-$grey--50:              #F5F5F5;
 
 // Basic colors
-$sd-blue:               #5ea9c8;
-$sd-blueMedium:         #3d8fb1;
-$sd-blueDark:           #005b7f;
-$sd-green:              #1eb06c;
-
-$green:                 #46a546;
-$red:                   #E51C23;
-$yellow:                #ffc40d;
-$orange:                #dd8200;
-$purple:                #9c27b0;
+$sd-blue:               hsla(198, 49%, 58%, 1);
+$sd-blueMedium:         hsla(198, 49%, 47%, 1);
+$sd-blueDark:           hsla(197, 100%, 25%, 1);
+$sd-green:              hsla(152, 71%, 40%, 1);
+
+$green:                 hsla(120, 40%, 46%, 1);
+$red:                   hsla(358, 79%, 50%, 1);
+$yellow:                hsla(45, 100%, 53%, 1);
+$orange:                hsla(35, 100%, 43%, 1);
+$purple:                hsla(291, 64%, 42%, 1);
+
+$black:                 hsl(214, 13%, 0%);
+$grayDarker:            hsl(214, 13%, 13%);
+$grayDark:              hsl(214, 13%, 20%);
+$grayMedium:            hsl(214, 13%, 27%);
+$gray:                  hsl(214, 13%, 40%);
+$grayNeutral:           hsl(214, 13%, 48%);
+$grayText:              hsl(214, 13%, 45%);
+$grayLight:             hsl(214, 13%, 60%);
+$grayLighter:           hsl(214, 13%, 96%);
+$white:                 hsl(214, 13%, 100%);
+
+// Greys
+$gray--900:             hsl(214, 13%, 20%);
+$gray--800:             hsl(214, 13%, 27%);
+$gray--700:             hsl(214, 13%, 33%);
+$gray--600:             hsl(214, 13%, 40%);
+$gray--500:             hsl(214, 13%, 45%);
+$gray--400:             hsl(214, 13%, 53%);
+$gray--300:             hsl(214, 13%, 60%);
+$gray--200:             hsl(214, 13%, 80%);
+$gray--100:             hsl(214, 13%, 87%);
+$gray--75:              hsl(214, 13%, 93%);
+$grey--50:              hsl(214, 13%, 96%);
+
 // Extended colors
-$fernGreen:             #56812e;
-$oldGold:               #d2a800;
-$darkOrange:            #da7200;
-$fireBrick:             #be1600;
-$deepPink:              #e30083;
-$darkMagenta:           #8b008b;
-$darkViolet:            #7300ab;
-$navy:                  #000080;
+$fernGreen:             hsla(91, 47%, 34%, 1);
+$oldGold:               hsla(48, 100%, 41%, 1);
+$darkOrange:            hsla(31, 100%, 43%, 1);
+$fireBrick:             hsla(7, 100%, 37%, 1);
+$deepPink:              hsla(325, 100%, 45%, 1);
+$darkMagenta:           hsla(300, 100%, 27%, 1);
+$darkViolet:            hsla(280, 100%, 34%, 1);
+$navy:                  hsla(240, 100%, 25%, 1);
 
 // Panel backgrounds
 $panel-bg--00:          #fff;
@@ -85,56 +123,44 @@ $panel-bg--03:          #ededed;
 $panel-bg--04:          #dedede;
 $panel-bg--05:          #a1a1a1;
 
-
 // Text specific colors
 //Subnav colours
-:root {
-  --sd-slugline-color: #005b7f;
-  }
 
-$sd-text:               $grayDark;
+$sd-text:               var(--color-text);
+$sd-text-light:         var(--color-text-light);
+$sd-text-lighter:       var(--color-text-lighter);
 $sd-slugline:           var(--sd-slugline-color);
-$sd-slugline-darkUI:    #678b98;
+$sd-slugline-darkUI:    hsl(196, 19%, 50%);
 
 // Light border color that works well on white and dark backgrounds
 $neutral-border-color: scale-color($grayNeutral, $alpha: -50%);
 
 // Misc
-$avatarBG:              #67afa1;
-$sd-background:         #f8f8f8;
-$sd-background-darkUI:  #3b3b3b;
-$sd-filters-bg:         #ededed;
-$sd-filters-darkUI-bg:  #333;
-
-$sd-hover:              #eff7fa;
-$transparent-gray:      rgba(0,0,0,.15);
-$transparent-white:     rgba(255,255,255,0.4);
-$sd-inputBorderColor:   $transparent-gray;
-$sd-tableBorderColor:   $transparent-gray;
-$photoBG-dark:          #2c2c2c;
-$annotation-color:      #a2df56;
-$comment-color:         #fff16f;
-
-$sd-inputBorderColor-darkUi: $transparent-white;
+$avatarBG:                            hsla(168, 31%, 55%, 1);
+$sd-background:                       hsla(0, 0%, 97%, 1);
+$sd-background-darkUI:                hsla(0, 0%, 23%, 1);
+$sd-filters-bg:                       hsla(0, 0%, 93%, 1);
+$sd-filters-darkUI-bg:                hsla(0, 0%, 20%, 1);
+
+$sd-hover:                            hsla(196, 52%, 96%, 1);
+$transparent-gray:                    hsla(0, 0%, 0%, 0.15);
+$transparent-white:                   hsla(0, 0%, 100%, 0.4);
+$sd-inputBorderColor:                 $transparent-gray;
+
+$photoBG-dark:                        hsla(0, 0%, 17%, 1);
+$annotation-color:                    hsla(87, 68%, 61%, 1);
+$comment-color:                       hsla(54, 100%, 72%, 1);
+
+$sd-inputBorderColor-darkUi:          $transparent-white;
 
 //Subnav colours
-:root {
---subNavBG-50: #F5F5F5;
---subNavBG-100: #dedede;
---subNavBG-blueGrey-500: #607D8B;
---subNavBG-blueGrey-600: #4d6570;
---subNavBG-darkUi: #404040;
-}
 
-$subnav-background: var(--subNavBG-50);
-$subnav-background-darker: var(--subNavBG-100);
-$subnav-background-blue-grey: var(--subNavBG-blueGrey-500);
-$subnav-background-blue-grey-darker: var(--subNavBG-blueGrey-600);
-$subnav-background-dark-blue-grey: var(--subNavBG-blueGrey-600);
-$subnav-background-darkUi: var(--subNavBG-darkUi);
+
+
+
 
 $sd-basic-palette: (
-  default: $grayDark,
+  default: hsla(214, 13%, 60%, 1),
   primary: $sd-blue,
   success: $green,
   warning: $orange,
@@ -174,34 +200,32 @@ $sd-basic-palette-ui-dark: (
 
 // Dark UI
 
-
 // Internal variables used for colors
 $primary-color: map-get($sd-basic-palette, primary);
 $default-color: map-get($sd-basic-palette, default);
 $default-color-ui-dark: map-get($sd-basic-palette-ui-dark, default);
 
-
 // Additional colors with shades -- Material design based
 $baseColors: (
-  red:          #F44336,
-  pink:         #E91E63,
-  purple:       #9C27B0,
-  deep-purple:  #673AB7,
-  indigo:       #3F51B5,
-  blue:         #2196F3,
-  light-blue:   #03A9F4,
-  cyan:         #00BCD4,
-  teal:         #009688,
-  green:        #4CAF50,
-  light-green:  #8BC34A,
-  lime:         #CDDC39,
-  yellow:       #FFEB3B,
-  amber:        #FFC107,
-  orange:       #FF9800,
-  deep-orange:  #FF5722,
-  brown:        #795548,
-  grey:         #929292,
-  blue-grey:    #607D8B
+  red:          hsla(4, 90%, 58%, 1),
+  pink:         hsla(340, 82%, 52%, 1),
+  purple:       hsla(291, 64%, 42%, 1),
+  deep-purple:  hsla(262, 52%, 47%, 1),
+  indigo:       hsla(231, 48%, 48%, 1),
+  blue:         hsla(207, 90%, 54%, 1),
+  light-blue:   hsla(199, 98%, 48%, 1),
+  cyan:         hsla(187, 100%, 42%, 1),
+  teal:         hsla(174, 100%, 29%, 1),
+  green:        hsla(122, 39%, 49%, 1),
+  light-green:  hsla(88, 50%, 53%, 1),
+  lime:         hsla(66, 70%, 54%, 1),
+  yellow:       hsla(54, 100%, 62%, 1),
+  amber:        hsla(45, 100%, 51%, 1),
+  orange:       hsla(36, 100%, 50%, 1),
+  deep-orange:  hsla(14, 100%, 57%, 1),
+  brown:        hsla(16, 25%, 38%, 1),
+  grey:         hsla(0, 0%, 57%, 1),
+  blue-grey:    hsla(200, 18%, 46%, 1)
 );
 
 @function colorMap($baseColors, $variations) {
@@ -246,420 +270,4 @@ $baseColors: (
   .text-#{$color} { 
     color: $value;
   }
-}
-
-// CSS variables for default (light) theme
-
-:root, [data-theme="light-ui"] {  
-  --color-input-bg:           rgba(0,0,0,0.05);
-  --color-input-bg--hover:    rgba(0,0,0,0.08);
-  --color-input-bg--focus:    rgba(94, 169, 200, 0.14);
-  --color-label-text:         rgba(116,116,116,1);
-
-  --color-input-border:       rgba(0,0,0,.15);
-  --color-input-border-hover: rgba(0,0,0,.3);
-
-  --color-form-bg:            rgba(255,255,255,0);
-  --color-text:               rgb(51, 51, 51); // equals #333;
-  --color-text-light:         rgba(51,51,51,0.75);
-
-  --color-contrast-bg:        #fff;
-  --color-contrast-bg--hover: #f4f4f4;
-
-  --color-selected-bg:        #eaf2f5;
-  --color-selected-bg--hover: #dfebf0;
-
-  --color-bg-00:              hsl(0, 0%, 100%);
-  --color-bg-50:              hsl(0, 0%, 97%);
-  --color-bg-100:             hsl(0, 0%, 93%);
-  --color-bg-150:             hsl(0, 0%, 87%);
-  --color-bg-200:             hsl(0, 0%, 63%);
-
-  --color-bg-800:             #2c2c2c;
-
-  --color-kanban-border:      #4d4d4d;
-
-  --color-inset-search-bg:           #ffffff;
-  --color-inset-search-border:       rgba(0,0,0,.20);
-  --color-inset-search-border-hover: rgba(0,0,0,.35);
-
-  --color-assignment-to-do:          #c4170b; //red--700
-  --color-assignment-progress:       #d17d00; //orange--600
-  --color-assignment-completed:      #74a838; //light-green--600
-
-  --color-grid-item-Bg:              hsl(0, 0%, 100%);
-
-  --color-dropdown-menu-Bg:          rgb(255,255,255);
-  --color-dropdown-menu-text:        rgb(51, 51, 51);
-
-  --color-bg__modal:                 hsla(0, 0%, 100%, 1);
-  --color-line__modal:               hsla(0, 0%, 90%);
-
-  --color-bg__select-option:         hsla(0, 0%, 100%, 1);
-}
-
-// CSS variables for dark theme
-
-[data-theme="dark-ui"] {
-  color: #fff;
-  --sd-slugline-color:        #005b7f;
-
-  --color-input-bg:           rgba(255,255,255,0.05);
-  --color-input-bg--hover:    rgba(255,255,255,0.08);
-  --color-input-bg--focus:    rgba(94,169,200,0.14);
-  --color-label-text:         rgba(255,255,255,0.5);
-
-  --color-input-border:       rgba(255,255,255,0.4);
-  --color-input-border-hover: rgba(255,255,255,0.6);
-
-  --color-form-bg:            #3b3b3b;
-  --color-text:               rgb(244, 244, 244);
-  --color-text-light:         rgba(244, 244, 244,0.75);
-
-  --color-contrast-bg:        hsl(0, 0%, 20%);
-  --color-contrast-bg--hover: hsl(0, 0%, 22%);
-  
-  --color-selected-bg:        #35393b;
-  --color-selected-bg--hover: #3b4246;
-
-  --color-bg-00:              #111111;
-  --color-bg-50:              #3f3f3f;
-  --color-bg-100:             #3a3a3a;
-  --color-bg-150:             #303030;
-  --color-bg-200:             #484848;
-
-  --color-bg-800:             #212121;
-
-  --color-kanban-border:      #8e8e8e;
-
-  --color-inset-search-bg:           rgba(0,0,0,0.2);
-  --color-inset-search-border:       rgba(255,255,255,0.35);
-  --color-inset-search-border-hover: rgba(255,255,255,0.55);
-  
-  [class^="big-icon--"],
-  [class*=" big-icon--"] {
-    color: $white;
-  }
-  --color-grid-item-Bg:       hsl(0, 0%, 15%);
-  
-  --color-bg__modal:          hsla(0, 0%, 20%);
-  --color-line__modal:        hsla(0, 0%, 25%);
-
-  --color-bg__select-option:  hsla(0, 0%, 20%, 1);
-}
-
-[class^="--dark-ui"],
-[class*="--dark-ui"],
-.dark-ui {
-  --color-contrast-bg:        hsl(0, 0%, 20%);
-  --color-contrast-bg--hover: hsl(0, 0%, 22%);
-  --color-bg__select-option:  hsla(0, 0%, 20%, 1);
-}
-
-[data-theme="accessible-light-ui"] {
-  --font-size-large: 1.5rem;
-
-  --color-accessible-text:    #111;
-  --sd-slugline-color:        #0400ff;
-
-  color: #000;
-
-  --color-input-bg:           rgba(0,0,0,0.05);
-  --color-input-bg--hover:    rgba(0,0,0,0.08);
-  --color-input-bg--focus:    rgba(94, 169, 200, 0.14);
-  --color-label-text:         rgb(63, 63, 63);
-
-  --color-input-border:       rgba(0,0,0,.35);
-  --color-input-border-hover: rgba(0,0,0,.8);
-
-  --color-form-bg:            rgba(255,255,255,0);
-  --color-text:               #111;
-
-  --color-contrast-bg:        #fff;
-  --color-contrast-bg--hover: #f4f4f4;
-
-  --color-selected-bg:        #eaf2f5;
-  --color-selected-bg--hover: #dfebf0;
-
-  --color-bg-00:              #ffffff;
-  --color-bg-50:              #f8f8f8;
-  --color-bg-100:             #ededed;
-  --color-bg-150:             #dfdfdf;
-  --color-bg-200:             #a1a1a1;
-
-  --color-bg-800:             #2c2c2c;
-
-
-  --color-accessible-primary: #0400ff;
-
-  [class^="icon-"],
-  [class*=" icon-"],
-  [class^="big-icon--"],
-  [class*=" big-icon--"] {
-    color: #000;
-  }
-
-  .sd-checkbox--button-style {
-    color: #111;
-  }
-  .sd-checkbox--button-style.checked,
-  .sd-checkbox--button-style[checked="checked"] {
-    background-color: var(--color-accessible-primary);
-    border-color: var(--color-accessible-primary);
-    border-top-color: #020158;
-    color: #fff;
-    &:hover {
-      background-color: #020166;
-      border-color: #020166;
-      border-top-color: #010036;
-    }
-  }
-  .sd-create-btn .circle {
-    background-color: var(--color-accessible-primary);
-  }
-
-  .navbtn.navbtn--active {
-    background-color: #444;
-    color: $white;
-  }
-  .btn {
-    color: var(--color-accessible-text);
-    font-weight: 600;
-    font-size: 1.4rem;
-    &.btn--primary {
-      background-color: var(--color-accessible-primary);
-      color: $white;
-    }
-    &.btn--hollow {
-      background-color: $white;
-    }
-  }
-
-  .sd-list-item {
-    font-size: 1.5rem;
-    .sd-list-item__slugline {
-      font-size: 1.3rem;
-    }
-    time {
-      color: #484848;
-      font-weight: 400;
-    }
-  }
-  .badge {
-    font-size: 1.2rem;
-    line-height: 1.1em;
-    font-weight: 600;
-  }
-  .side-panel {
-    background-color: $white;
-    color: var(--color-accessible-text);
-    .side-panel__header {
-      background-color: $white;
-    }
-    .side-panel__heading {
-      font-weight: 500;
-      color: var(--color-accessible-text);
-    }
-    p {
-      font-size: 1.6rem;
-      line-height: 1.5;
-      color: var(--color-accessible-text);
-    }
-    .sd-text__date-and-author {
-      font-size: 1.4rem;
-      time {
-        font-weight: 400;
-        color: #595959;
-      }
-    }
-    &.side-panel--dark-ui {
-      background-color: var(--color-bg-800);
-      color: $white;
-     i[class^="icon-"] {
-        color: $white;
-      }
-      .side-panel__header {
-        background-color: var(--color-bg-800);
-        color: $white !important;
-        i[class^="icon-"] {
-          color: $white !important;
-        }
-        
-      }
-    }
-  }
-
-  .sd-input {
-    .sd-input__label {
-      font-weight: 600;
-      font-size: 1.2rem;
-    }
-    .sd-input__input,
-    .sd-input__select {
-      font-size: 1.5rem;
-    }
-    .sd-input__hint,
-    .sd-input__message {
-      font-size: 1.4rem;
-      margin: 0.8rem 0;
-    }
-    .sd-input__hint {
-      color: #444;
-    }
-  }
-
-  .form-label {
-    font-size: 1.2rem;
-    font-weight: 500;
-    &.form-label--light {
-      color: #525252;
-    }
-  }
-
-  .navbtn {
-    color: #111;
-    [class^="icon-"], [class*=" icon-"] {
-      color: currentColor;
-    }
-  }
-
-  .dropdown__menu-label {
-    font-size: 1.2rem;
-    color: #585858;
-  }
-  .dropdown__toggle:active,
-  .dropdown.open .dropdown__toggle {
-    color: var(--color-accessible-primary);
-  }
-  .dropdown__menu li a:not(.btn),
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
-  .dropdown__menu .dropdown__menu-item a:not(.btn), 
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-    color: currentColor;
-    font-size: 1.5rem;
-    font-weight: 500;
-  }
-  .dropdown__menu li a:not(.btn):hover,
-  .dropdown__menu li a:not(.btn):focus,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
-    background: var(--color-accessible-primary);
-    color: $white;
-     > i[class^="icon-"] {
-      color: $white;
-    }
-  }
-  .dropdown.open .navbtn > i {
-    color: var(--color-accessible-primary);
-  }
-
-
-
-  .sd-text__slugline,
-  p.sd-text__slugline {
-    color: var(--color-accessible-primary) !important;
-  }
-
-  .toggle-box--circle .toggle-box__chevron {
-    background-color: rgba(123, 123, 123, 0.5);
-    height: 2rem;
-    width: 2rem;
-    text-align: center;
-    border-radius: 50%;
-  }
-  .toggle-box__label {
-    font-size: 1.4rem;
-    color: var(--color-label-text);
-    font-weight: 500;
-  }
-
-  .sd-grid-item {
-    time {
-      color: #484848;
-      font-size: 1.3rem;
-      font-weight: 400;
-    }
-    .sd-grid-item__slugline {
-      font-size: 1.2rem;
-    }
-  }
-  .nav-tabs {
-    .nav-tabs__link {
-      font-size: 1.6rem;
-      font-weight: 500;
-    }
-    &--big {
-      .nav-tabs__link {
-        font-size: 2rem;
-      }
-    }
-  }
-
-  .nav-tabs__tab--active, 
-  .nav-tabs__tab--active:hover {
-    .nav-tabs__link {
-      border-bottom-color: var(--color-accessible-primary);
-      color: var(--color-accessible-text);
-    }
-  }
-
-  .side-panel.side-panel--dark-ui {
-    .nav-tabs__tab {
-        .nav-tabs__link {
-          border-bottom-color: transparent;
-          color: $white;
-          opacity: 0.6;
-      }
-      &:hover {
-        .nav-tabs__link {
-          border-bottom-color: rgba(255,255,255,.25);
-          opacity: 1;
-        }
-      }
-      &.nav-tabs__tab--active,
-      &.nav-tabs__tab--active:hover {
-        .nav-tabs__link {
-          border-bottom-color: hsla(240, 100%, 65%, 1);
-          color: $white;
-          opacity: 1;
-        }
-      }
-    }
-
-    .toggle-box__label {
-      color: $white;
-    }
-
-    .sd-line-input .sd-line-input__label {
-      color: $white;
-      opacity: 0.7;
-    }
-
-    a.text-link.text-link--white {
-      color: $white;
-      opacity: 0.75;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  .badge {
-    &.badge--primary {
-      background-color: var(--color-accessible-primary);
-    }
-    &.badge--success {
-      background-color: #006115;
-    }
-    &.badge--warning {
-      background-color: #854900;
-    }
-  }
-  .sd-sidebar-menu__btn--active, .sd-sidebar-menu__btn--active:hover {
-    background-color: var(--color-accessible-primary);
-
-  }
 }