From c175cf2df4acbbbb70f19c9cee9a305c6ce7279a Mon Sep 17 00:00:00 2001
From: aotearoan <andrew@aotearoan.com>
Date: Sun, 15 Nov 2020 13:05:13 +0100
Subject: [PATCH] removing .neon--disabled and !important styles

---
 package.json                                  |  2 +-
 .../action-menu/NeonActionMenu.spec.ts        |  2 +-
 .../navigation/action-menu/NeonActionMenu.vue |  1 -
 .../dropdown-menu/NeonDropdownMenu.vue        |  2 +-
 .../user-input/button/NeonButton.ts           |  2 +-
 .../user-input/drop-zone/NeonDropZone.vue     |  2 +-
 src/components/user-input/input/NeonInput.vue |  2 -
 .../user-input/select/NeonSelect.vue          |  4 +-
 .../user-input/switch/NeonSwitch.vue          |  2 +-
 .../user-input/toggle-chip/NeonToggleChip.vue |  2 +-
 .../user-input/toggle/NeonToggle.vue          |  4 +-
 src/sass/_action-menu.scss                    |  6 +-
 src/sass/_base-html.scss                      |  5 --
 src/sass/_button.scss                         |  4 ++
 src/sass/_card.scss                           |  1 -
 src/sass/_drop-zone.scss                      |  1 +
 src/sass/_dropdown-menu.scss                  |  4 ++
 src/sass/_expansion-panel.scss                |  2 +-
 src/sass/_input.scss                          |  2 +-
 src/sass/_select.scss                         |  8 +++
 src/sass/_switch.scss                         |  4 ++
 src/sass/_toggle-chip.scss                    |  4 ++
 src/sass/_toggle.scss                         | 10 +++-
 src/sass/colors/_button.scss                  |  9 +--
 src/sass/colors/_card.scss                    | 12 +++-
 src/sass/colors/_expansion-indicator.scss     |  2 -
 src/sass/colors/_icon.scss                    |  6 +-
 src/sass/colors/_switch.scss                  | 14 ++---
 src/sass/colors/_toggle-color-mixins.scss     | 12 +++-
 src/sass/colors/_toggle.scss                  | 60 +++++++++----------
 src/sass/colors/color-components.scss         |  1 -
 31 files changed, 112 insertions(+), 80 deletions(-)
 delete mode 100644 src/sass/colors/_expansion-indicator.scss

diff --git a/package.json b/package.json
index 2ef930f7..1a4a8443 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [
diff --git a/src/components/navigation/action-menu/NeonActionMenu.spec.ts b/src/components/navigation/action-menu/NeonActionMenu.spec.ts
index 16dfff45..b5838c5c 100644
--- a/src/components/navigation/action-menu/NeonActionMenu.spec.ts
+++ b/src/components/navigation/action-menu/NeonActionMenu.spec.ts
@@ -44,7 +44,7 @@ describe('NeonActionMenu', () => {
       propsData: { model, value },
     });
     // when / then
-    expect(wrapper.find('.neon-action-menu__link--disabled.neon--disabled').text()).toEqual(model[1].label);
+    expect(wrapper.find('.neon-action-menu__link--disabled').text()).toEqual(model[1].label);
   });
 
   it('emits click event', () => {
diff --git a/src/components/navigation/action-menu/NeonActionMenu.vue b/src/components/navigation/action-menu/NeonActionMenu.vue
index bef2f327..398db6b5 100644
--- a/src/components/navigation/action-menu/NeonActionMenu.vue
+++ b/src/components/navigation/action-menu/NeonActionMenu.vue
@@ -11,7 +11,6 @@
             {
               'neon-action-menu__link--selected': item.key === value,
               'neon-action-menu__link--disabled': item.disabled,
-              'neon--disabled': item.disabled,
             },
             `neon-action-menu__link--${color}`,
           ]"
diff --git a/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue b/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue
index 4c3abd57..c99ac391 100644
--- a/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue
+++ b/src/components/navigation/dropdown-menu/NeonDropdownMenu.vue
@@ -21,7 +21,7 @@
         class="neon-dropdown-menu__item"
         :class="[
           {
-            'neon--disabled neon-dropdown-menu__item--disabled': item.disabled,
+            'neon-dropdown-menu__item--disabled': item.disabled,
             'neon-dropdown-menu__item--separator-before': item.separatorBefore,
             'neon-dropdown-menu__item--group-title': item.isGroup,
             'neon-dropdown-menu__item--grouped': item.grouped,
diff --git a/src/components/user-input/button/NeonButton.ts b/src/components/user-input/button/NeonButton.ts
index 6ad7fa87..915f95fd 100644
--- a/src/components/user-input/button/NeonButton.ts
+++ b/src/components/user-input/button/NeonButton.ts
@@ -111,7 +111,7 @@ export default class NeonButton extends Vue {
       `neon-button--${this.buttonStyle}`,
       `neon-button--state-${this.state}`,
       {
-        'neon--disabled neon-button--disabled': this.disabled,
+        'neon-button--disabled': this.disabled,
         'neon-button--circular': this.circular,
         'neon-button--no-outline': !this.outline,
         'neon-button--full-width': this.fullWidth,
diff --git a/src/components/user-input/drop-zone/NeonDropZone.vue b/src/components/user-input/drop-zone/NeonDropZone.vue
index b9d4e981..66fde0fd 100644
--- a/src/components/user-input/drop-zone/NeonDropZone.vue
+++ b/src/components/user-input/drop-zone/NeonDropZone.vue
@@ -4,7 +4,7 @@
     ref="dropzone"
     :class="[
       {
-        'neon--disabled neon-drop-zone--disabled': disabled,
+        'neon-drop-zone--disabled': disabled,
         'neon-square neon-drop-zone--circular': circular,
         'neon-drop-zone--active': active,
       },
diff --git a/src/components/user-input/input/NeonInput.vue b/src/components/user-input/input/NeonInput.vue
index cd992217..65cf6011 100644
--- a/src/components/user-input/input/NeonInput.vue
+++ b/src/components/user-input/input/NeonInput.vue
@@ -26,7 +26,6 @@
       @blur="onBlur"
       @focus="onFocus"
       class="neon-input__textfield neon-input__text"
-      :class="{ 'neon--disabled': disabled }"
       v-bind="sanitizedAttributes"
       v-on="sanitizedListeners"
     />
@@ -41,7 +40,6 @@
       @input="changeValue"
       @blur="onBlur"
       @focus="onFocus"
-      :class="{ 'neon--disabled': disabled }"
       class="neon-input__textfield neon-input__textarea"
       v-bind="sanitizedAttributes"
     ></textarea>
diff --git a/src/components/user-input/select/NeonSelect.vue b/src/components/user-input/select/NeonSelect.vue
index cf0985ef..6d910bb8 100644
--- a/src/components/user-input/select/NeonSelect.vue
+++ b/src/components/user-input/select/NeonSelect.vue
@@ -19,7 +19,7 @@
       <ul class="no-style neon-select__options">
         <li
           v-if="placeholderAsOption"
-          class="neon-select__option neon--disabled neon-select__option--disabled"
+          class="neon-select__option neon-select__option--disabled neon-select__option-placeholder"
           :class="`neon-select__option--${size}`"
         >
           <div class="neon-select__option-container">
@@ -34,7 +34,7 @@
             class="neon-select__option"
             :class="[
               {
-                'neon--disabled neon-select__option--disabled': option.disabled,
+                'neon-select__option--disabled': option.disabled,
                 'neon-select__option--separator-before': option.separatorBefore,
                 'neon-select__option--selected': multiple ? value.indexOf(option.key) >= 0 : option.key === value,
                 'neon-select__option--highlighted': option.key === highlightedKey,
diff --git a/src/components/user-input/switch/NeonSwitch.vue b/src/components/user-input/switch/NeonSwitch.vue
index 832c38ca..2b6430b3 100644
--- a/src/components/user-input/switch/NeonSwitch.vue
+++ b/src/components/user-input/switch/NeonSwitch.vue
@@ -6,7 +6,7 @@
       `neon-switch--${size}`,
       `neon-switch--${color}`,
       {
-        'neon-switch--disabled neon--disabled': disabled,
+        'neon-switch--disabled': disabled,
         'neon-switch--checked': value,
       },
     ]"
diff --git a/src/components/user-input/toggle-chip/NeonToggleChip.vue b/src/components/user-input/toggle-chip/NeonToggleChip.vue
index 75279397..547bfadb 100644
--- a/src/components/user-input/toggle-chip/NeonToggleChip.vue
+++ b/src/components/user-input/toggle-chip/NeonToggleChip.vue
@@ -5,7 +5,7 @@
       `neon-toggle-chip--${size}`,
       `neon-toggle-chip--${color}`,
       {
-        'neon-toggle-chip--disabled neon--disabled': disabled,
+        'neon-toggle-chip--disabled': disabled,
         'neon-toggle-chip--checked': value,
         'neon-toggle-chip--show-check': showCheck,
       },
diff --git a/src/components/user-input/toggle/NeonToggle.vue b/src/components/user-input/toggle/NeonToggle.vue
index 5bd1c708..c59470aa 100644
--- a/src/components/user-input/toggle/NeonToggle.vue
+++ b/src/components/user-input/toggle/NeonToggle.vue
@@ -6,7 +6,7 @@
       `neon-toggle--${color}`,
       `neon-toggle--${orientation}`,
       `neon-toggle--${size}`,
-      { 'neon-toggle--disabled neon--disabled': disabled },
+      { 'neon-toggle--disabled': disabled },
     ]"
     role="radiogroup"
   >
@@ -15,7 +15,7 @@
       :key="option.key"
       class="neon-toggle__label no-style"
       :class="{
-        'neon-toggle__label--disabled neon--disabled': disabled || option.disabled,
+        'neon-toggle__label--disabled': disabled || option.disabled,
         'neon-toggle__label--checked': option.key === value,
         'neon-toggle__label--with-icon': option.icon,
       }"
diff --git a/src/sass/_action-menu.scss b/src/sass/_action-menu.scss
index 06c5a0b8..1d7a1582 100644
--- a/src/sass/_action-menu.scss
+++ b/src/sass/_action-menu.scss
@@ -1,5 +1,5 @@
 .neon-action-menu {
-  &__link {
+  .neon-action-menu__link {
     display: flex;
     width: calc(100% + #{2 * $base-space});
     letter-spacing: $letter-spacing-s;
@@ -19,5 +19,9 @@
     &:focus {
       outline: none;
     }
+
+    &.neon-action-menu__link--disabled {
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/src/sass/_base-html.scss b/src/sass/_base-html.scss
index c80a1d08..c86d0242 100644
--- a/src/sass/_base-html.scss
+++ b/src/sass/_base-html.scss
@@ -85,11 +85,6 @@ p {
   }
 }
 
-.neon--disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
 .neon-monospaced {
   font-family: $font-family-monospaced;
   font-variant-ligatures: discretionary-ligatures;
diff --git a/src/sass/_button.scss b/src/sass/_button.scss
index bf3d4f0b..5598c4a4 100644
--- a/src/sass/_button.scss
+++ b/src/sass/_button.scss
@@ -124,6 +124,10 @@
     display: flex;
     justify-content: center;
   }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
 }
 
 .neon-button-group {
diff --git a/src/sass/_card.scss b/src/sass/_card.scss
index b3e01b79..7e5627df 100644
--- a/src/sass/_card.scss
+++ b/src/sass/_card.scss
@@ -5,7 +5,6 @@
   .neon-card-body,
   .neon-card-footer {
     margin-bottom: 0;
-    border-bottom: none !important;
     justify-content: center;
 
     &:first-child {
diff --git a/src/sass/_drop-zone.scss b/src/sass/_drop-zone.scss
index 1fdda3bf..feba13ce 100644
--- a/src/sass/_drop-zone.scss
+++ b/src/sass/_drop-zone.scss
@@ -10,6 +10,7 @@
 
   &--disabled {
     opacity: 0.5;
+    cursor: not-allowed;
   }
 
   &--state-loading {
diff --git a/src/sass/_dropdown-menu.scss b/src/sass/_dropdown-menu.scss
index a5894110..2da2c0ee 100644
--- a/src/sass/_dropdown-menu.scss
+++ b/src/sass/_dropdown-menu.scss
@@ -64,6 +64,10 @@
         }
       }
     }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 }
 
diff --git a/src/sass/_expansion-panel.scss b/src/sass/_expansion-panel.scss
index 1e3edb25..1ff5f72d 100644
--- a/src/sass/_expansion-panel.scss
+++ b/src/sass/_expansion-panel.scss
@@ -105,7 +105,7 @@
 
   &--disabled {
     .neon-expansion-panel__header {
-      cursor: not-allowed !important;
+      cursor: not-allowed;
     }
   }
 
diff --git a/src/sass/_input.scss b/src/sass/_input.scss
index feae7cb9..ad784055 100644
--- a/src/sass/_input.scss
+++ b/src/sass/_input.scss
@@ -32,7 +32,7 @@
   }
 
   &.neon-input--with-icon {
-    .neon-icon:not(.neon--disabled) {
+    .neon-icon {
       cursor: pointer;
 
       &:active {
diff --git a/src/sass/_select.scss b/src/sass/_select.scss
index 8d750f92..1aaf9108 100644
--- a/src/sass/_select.scss
+++ b/src/sass/_select.scss
@@ -18,6 +18,14 @@
     user-select: none;
     cursor: pointer;
 
+    &--disabled {
+      cursor: not-allowed;
+    }
+
+    &-placeholder {
+      cursor: default;
+    }
+
     &-container {
       display: flex;
       flex-direction: row;
diff --git a/src/sass/_switch.scss b/src/sass/_switch.scss
index 8d8b984b..3c00f49e 100644
--- a/src/sass/_switch.scss
+++ b/src/sass/_switch.scss
@@ -193,4 +193,8 @@
       @include checkbox-style($checkbox-height);
     }
   }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
 }
diff --git a/src/sass/_toggle-chip.scss b/src/sass/_toggle-chip.scss
index 51b23c49..bfb103b3 100644
--- a/src/sass/_toggle-chip.scss
+++ b/src/sass/_toggle-chip.scss
@@ -94,4 +94,8 @@
   &:active:not(.neon-toggle-chip--disabled):not(.neon-toggle-chip--show-check) {
     transform: scale(0.95);
   }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
 }
diff --git a/src/sass/_toggle.scss b/src/sass/_toggle.scss
index 4d134329..c349b4b0 100644
--- a/src/sass/_toggle.scss
+++ b/src/sass/_toggle.scss
@@ -8,7 +8,7 @@
     display: none;
   }
 
-  label {
+  &__label {
     user-select: none;
     padding: 2 * $base-space 3 * $base-space;
     display: flex;
@@ -19,6 +19,10 @@
     &:focus {
       outline: none;
     }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
   }
 
   &--toggle {
@@ -32,4 +36,8 @@
   &--horizontal {
     flex-direction: row;
   }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
 }
diff --git a/src/sass/colors/_button.scss b/src/sass/colors/_button.scss
index c559d90e..fb3161d7 100644
--- a/src/sass/colors/_button.scss
+++ b/src/sass/colors/_button.scss
@@ -9,7 +9,7 @@
     background: darken($to-color, 1);
   }
 
-  &:focus:not(:disabled) {
+  &:focus:not(:disabled):not(.neon-button--no-outline) {
     @include box-shadow-outline($to-color);
   }
 }
@@ -32,7 +32,7 @@
     border-color: darken($color, 4);
   }
 
-  &:focus:not(:disabled) {
+  &:focus:not(:disabled):not(.neon-button--no-outline) {
     @include box-shadow-outline($color);
   }
 }
@@ -106,6 +106,7 @@
     &.neon-button--disabled {
       color: $color-disabled-light;
       background: $color-disabled-dark;
+      box-shadow: none;
     }
   }
 
@@ -126,8 +127,4 @@
       color: $color-disabled-light;
     }
   }
-
-  &--no-outline {
-    box-shadow: none !important;
-  }
 }
diff --git a/src/sass/colors/_card.scss b/src/sass/colors/_card.scss
index 0aa73936..57a42e50 100644
--- a/src/sass/colors/_card.scss
+++ b/src/sass/colors/_card.scss
@@ -16,10 +16,16 @@
   .neon-card-body,
   .neon-card-footer {
     background-color: $background-color-card;
+  }
 
-    &:not(:last-child):not(.neon-card-body--full-width) {
-      border-bottom: $card-section-border;
-      border-bottom-color: $border-color;
+  &.neon-card--vertical {
+    .neon-card-header,
+    .neon-card-body,
+    .neon-card-footer {
+      &:not(:last-child):not(.neon-card-body--full-width) {
+        border-bottom: $card-section-border;
+        border-bottom-color: $border-color;
+      }
     }
   }
 
diff --git a/src/sass/colors/_expansion-indicator.scss b/src/sass/colors/_expansion-indicator.scss
deleted file mode 100644
index 96833bcf..00000000
--- a/src/sass/colors/_expansion-indicator.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.neon-expansion-indicator {
-}
diff --git a/src/sass/colors/_icon.scss b/src/sass/colors/_icon.scss
index dcefbb88..75034d60 100644
--- a/src/sass/colors/_icon.scss
+++ b/src/sass/colors/_icon.scss
@@ -11,7 +11,7 @@
   }
 
   @each $color, $palette in $functional-colors {
-    &--#{$color} {
+    &--#{$color}:not(.neon-icon--disabled) {
       @include svg-colors(map-get($palette, $color-icon));
     }
   }
@@ -22,11 +22,11 @@
 
   &--disabled {
     .neon-svg--fill {
-      fill: $color-disabled-light !important;
+      fill: $color-disabled-light;
     }
 
     .neon-svg--stroke {
-      stroke: $color-disabled-light !important;
+      stroke: $color-disabled-light;
     }
   }
 }
diff --git a/src/sass/colors/_switch.scss b/src/sass/colors/_switch.scss
index 294b6992..8d1f0a6e 100644
--- a/src/sass/colors/_switch.scss
+++ b/src/sass/colors/_switch.scss
@@ -16,7 +16,7 @@
 
   @each $color, $palette in $functional-colors {
     &.neon-switch--#{$color} {
-      &.neon-switch--checked {
+      &.neon-switch--checked:not(.neon-switch--disabled) {
         .neon-switch__switch {
           background-color: map-get($palette, $color-switch-on);
           box-shadow: $inset-shadow;
@@ -36,15 +36,15 @@
   &.neon-switch--disabled {
     .neon-switch__switch,
     .neon-switch__indicator {
-      box-shadow: none !important;
+      box-shadow: none;
     }
 
     .neon-switch__switch {
-      background-color: $color-switch-disabled !important;
+      background-color: $color-switch-disabled;
     }
 
     .neon-switch__indicator {
-      background-color: $color-switch-indicator-disabled !important;
+      background-color: $color-switch-indicator-disabled;
     }
   }
 }
@@ -66,7 +66,7 @@
 
   @each $color, $palette in $functional-colors {
     &.neon-switch--#{$color} {
-      &.neon-switch--checked {
+      &.neon-switch--checked:not(.neon-switch--disabled) {
         .neon-switch__switch {
           border-color: map-get($palette, $color-switch-on);
 
@@ -84,11 +84,11 @@
 
   &.neon-switch--disabled {
     .neon-switch__switch {
-      border-color: rgba($color-disabled-light, 0.5) !important;
+      border-color: rgba($color-disabled-light, 0.5);
     }
 
     .neon-switch__indicator {
-      background-color: rgba($color-disabled-light, 0.5) !important;
+      background-color: rgba($color-disabled-light, 0.5);
     }
   }
 }
diff --git a/src/sass/colors/_toggle-color-mixins.scss b/src/sass/colors/_toggle-color-mixins.scss
index e695a9a8..a863328d 100644
--- a/src/sass/colors/_toggle-color-mixins.scss
+++ b/src/sass/colors/_toggle-color-mixins.scss
@@ -2,7 +2,7 @@
   &:not(.neon-toggle--disabled).neon-toggle--#{$color} {
     color: rgba($color-text, 0.7);
 
-    label {
+    .neon-toggle__label:not(.neon-toggle__label--disabled) {
       border: $border-width $border-style $border-color-toggle;
 
       &:first-child {
@@ -24,8 +24,8 @@
         background-color: rgba($toggle-color, 0.125);
       }
 
-      &:hover:not(.neon-toggle__label--disabled):not(.neon-toggle__label--checked),
-      &:focus:not(.neon-toggle__label--disabled):not(.neon-toggle__label--checked) {
+      &:hover:not(.neon-toggle__label--checked),
+      &:focus:not(.neon-toggle__label--checked) {
         background-color: rgba($border-color-toggle, 0.375);
       }
     }
@@ -52,6 +52,12 @@
 
   .neon-toggle__label--disabled {
     color: $color-disabled-light;
+    border-top: $border-width $border-style $color-disabled-dark;
+    border-bottom: $border-width $border-style $color-disabled-dark;
+  }
+
+  .neon-toggle__label:not(.neon-toggle__label--disabled) + .neon-toggle__label--disabled {
+    border-left: $border-width $border-style $border-color-toggle;
   }
 
   &.neon-toggle--disabled .neon-toggle__label--checked,
diff --git a/src/sass/colors/_toggle.scss b/src/sass/colors/_toggle.scss
index d46ea854..b128a899 100644
--- a/src/sass/colors/_toggle.scss
+++ b/src/sass/colors/_toggle.scss
@@ -6,54 +6,52 @@
   }
 
   &--radio-buttons {
-    .neon-toggle__label {
-      color: $color-radio-button-label;
-    }
-
     @each $color, $palette in $functional-colors {
-      &.neon-toggle--#{$color} {
+      &.neon-toggle--#{$color}:not(.neon-toggle--disabled) {
         $toggle-color: map-get($palette, $color-toggle);
 
-        .neon-toggle__radio-button {
-          border: $border-width $border-style $border-color-toggle;
-          background: $background-radio-button;
-        }
+        .neon-toggle__label:not(.neon-toggle__label--disabled) {
+          .neon-toggle__radio-button {
+            border: $border-width $border-style $border-color-toggle;
+            background: $background-radio-button;
+          }
+
+          color: $color-radio-button-label;
 
-        .neon-toggle__label {
-          &:hover:not(neon-toggle__label--disabled),
-          &:focus:not(neon-toggle__label--disabled) {
+          &:hover,
+          &:focus {
             .neon-toggle__radio-button {
               background: rgba($border-color-toggle, 0.375);
             }
           }
-        }
 
-        .neon-toggle__label--checked {
-          color: $color-text;
+          &.neon-toggle__label--checked {
+            color: $color-text;
 
-          .neon-toggle__radio-button {
-            border: $border-width $border-style $toggle-color;
+            .neon-toggle__radio-button {
+              border: $border-width $border-style $toggle-color;
 
-            &-indicator {
-              background-color: $toggle-color;
-              box-shadow: $box-shadow;
+              &-indicator {
+                background-color: $toggle-color;
+                box-shadow: $box-shadow;
+              }
             }
           }
         }
+      }
+    }
 
-        &.neon-toggle--disabled,
-        .neon-toggle__label--disabled {
-          color: $color-disabled-light;
+    &.neon-toggle--disabled .neon-toggle__label,
+    .neon-toggle__label--disabled {
+      color: $color-disabled-light;
 
-          .neon-toggle__radio-button {
-            background: $color-disabled-dark;
-            color: $color-disabled-light;
-            border-color: $color-disabled-dark;
+      .neon-toggle__radio-button {
+        background: $color-disabled-dark;
+        color: $color-disabled-light;
+        border-color: $color-disabled-dark;
 
-            &-indicator {
-              background-color: $color-disabled-light;
-            }
-          }
+        &-indicator {
+          background-color: $color-disabled-light;
         }
       }
     }
diff --git a/src/sass/colors/color-components.scss b/src/sass/colors/color-components.scss
index c5d7345f..d7908280 100644
--- a/src/sass/colors/color-components.scss
+++ b/src/sass/colors/color-components.scss
@@ -19,7 +19,6 @@
 @import 'input';
 @import 'drop-zone';
 @import 'alert';
-@import 'expansion-indicator';
 @import 'dropdown';
 @import 'dropdown-menu';
 @import 'table';