change color variable names

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass

@@ -1,4 +1,5 @@
 @import 'helpers'
+@import '../../app/spot/styles/sass/variables'
 
 .op-wp-single-card
   display: flex
@@ -17,29 +18,29 @@
     .op-wp-single-card--inline-buttons
       opacity: 1
       z-index: 2
-      background-image: linear-gradient(to left, rgba(white,1), rgba(white,0))
+      background-image: linear-gradient(to left, rgba($spot-color-basic-white,1), rgba($spot-color-basic-white,0))
 
   &_new
     padding-right: 25px
 
   &_selected
-    background-color: var(--table-row-highlighting-color)
+    background-color: $spot-color-main-light
     op-icon
-      background: var(--table-row-highlighting-color)
+      background: $spot-color-main-light
     &:hover
       .op-wp-single-card--inline-buttons
-        background-image: linear-gradient(to left, rgba(#CCE6F7,1), rgba(#CCE6F7,0))
+        background-image: linear-gradient(to left, rgba($spot-color-main-light,1), rgba($spot-color-main-light,0))
 
   &_disabled
     opacity: 0.6
 
   &_closed:not(&_selected)
-    background-color: #F3F3F3
+    background-color: $spot-color-basic-gray-6
     op-icon
-      background: #F3F3F3
+      background: $spot-color-basic-gray-6
     &:hover
       .op-wp-single-card--inline-buttons
-        background-image: linear-gradient(to left, rgba(#F3F3F3,1), rgba(#F3F3F3,0))
+        background-image: linear-gradient(to left, rgba($spot-color-basic-gray-6,1), rgba($spot-color-basic-gray-6,0))
 
   &_horizontal
     height: 100%
@@ -84,7 +85,7 @@
     &-project-name
       grid-area: project
       font-style: italic
-      color: var(--gray-dark)
+      color: $spot-color-basic-gray-3
       font-size: 12px
       @include text-shortener
     &-type
@@ -96,11 +97,11 @@
     &-assignee
       grid-area: avatar
       max-width: 140px
-      color: var(--gray-dark)
+      color: $spot-color-basic-gray-3
       font-size: 12px
     &-id
       grid-area: id
-      color: var(--gray-dark)
+      color: $spot-color-basic-gray-3
       font-size: 12px
     &-status
       grid-area: status
@@ -119,12 +120,12 @@
       grid-area: dates
       place-self: center end
       white-space: nowrap
-      color: var(--gray-dark)
+      color: $spot-color-basic-gray-3
       font-size: 12px
 
     &-inline-date
       font-size: 12px
-      color: var(--gray-dark)
+      color: $spot-color-basic-gray-3
       margin: 0 8px
       white-space: nowrap
 
@@ -146,19 +147,19 @@
     z-index: 2
 
     .op-wp-single-card_checked &
-      background-color: var(--table-row-highlighting-color)
+      background-color: $spot-color-main-light
   
   &--inline-buttons
     opacity: 0
     padding-left: 40px
     op-icon:not(&_selected)
-      background: white
+      background: $spot-color-basic-white
 
     &.-show
       opacity: 1
 
     .op-wp-single-card_checked &
-      background-color: var(--table-row-highlighting-color)
+      background-color: $spot-color-main-light
 
   &--inline-cancel-button
     color: var(--warn)