data manager style updates

web/apps/labelstudio/src/components/Form/Elements/Label/Label.styl

@@ -17,7 +17,7 @@
     color $black_40
 
     a
-      color #096DD9
+      color var(--grape_500)
 
       &:hover
         text-decoration underline

web/apps/labelstudio/src/components/HeidiTips/HeidiTip.styl

@@ -56,7 +56,7 @@
       stroke #898098
 
     &:hover
-      background rgba(#096DD9, 0.05)
+      background var(--grape_0)
 
       svg > path
         stroke #1f1f1f

web/apps/labelstudio/src/components/Menu/Menu.styl

@@ -16,7 +16,7 @@
     border-radius 3px
     align-items center
     box-sizing border-box
-    color rgba(0,0,0,0.6)
+    color var(--sand_600)
     font-size 16px
     font-family Roboto
     white-space nowrap

web/apps/labelstudio/src/components/ToggleItems/ToggleItems.styl

@@ -14,7 +14,7 @@
     padding: 4px 20px
   &__item
     cursor: pointer
-    color: rgba(0,0,0,0.6)
+    color: var(--sand_600)
     border-radius: 4px
     padding: 2px 16px
     flex-grow: 1

web/apps/labelstudio/src/pages/DataManager/DataManager.styl

@@ -3,4 +3,4 @@
 
   // hack to change background of selected annotation in LSF inside DM
   #label-studio-dm [class*=Annotations_annotation_selected]
-    background: #e3f1ff
+    background: var(--grape_0)

web/libs/datamanager/src/components/Common/Menu/Menu.styl

@@ -14,7 +14,7 @@
     border-radius 3px
     align-items center
     box-sizing border-box
-    color rgba(0,0,0,0.6)
+    color var(--sand_600)
     font-size 16px
     font-family Roboto
     white-space nowrap

web/libs/datamanager/src/components/Common/RadioGroup/RadioGroup.styl

@@ -80,9 +80,9 @@
         .radio-group__input
           cursor pointer
         &_checked
-          color #096DD9
-          background #096DD914
-          border-color #096DD9
+          color var(--grape_500)
+          background var(--grape_0)
+          border-color var(--grape_500)
           cursor default
           .radio-group__input
             cursor default

web/libs/datamanager/src/components/Common/Table/Table.styl

@@ -83,18 +83,18 @@
     min-width fit-content
     position relative
     cursor pointer
-    background-color #fff
+    background-color var(--sand_0)
 
     &_disabled,
     &_loading
       opacity 0.6
       pointer-events none
 
     &_even:not(&_selected)
-      background-color #fafafa
+      background-color var(--sand_100)
 
     &_selected
-      background-color #e3f1ff
+      background-color var(--grape_0)
 
     &:not(&_selected):hover
       background-color var(--grape_0)

web/libs/datamanager/src/components/Common/TableOld/Table.styl

@@ -56,18 +56,18 @@
     min-width fit-content
     position relative
     cursor pointer
-    background-color #fff
+    background-color var(--sand_0)
 
     &_disabled,
     &_loading
       opacity 0.6
       pointer-events none
 
     &_even:not(&_selected)
-      background-color #fafafa
+      background-color var(--sand_100)
 
     &_selected
-      background-color #e3f1ff
+      background-color var(--grape_0)
 
     &:not(&_selected):hover
       background-color var(--grape_0)

web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.styl

@@ -14,7 +14,7 @@
     font-size 12px
     line-height 16px
     letter-spacing 0.5px
-    color #096DD9
+    color var(--grape_500)
     cursor initial
     padding 16px 12px 8px
     height var(--compact-height)
@@ -25,7 +25,7 @@
         font-size 12px
     &:hover
       background-color transparent !important
-      color #096DD9 !important
+      color var(--grape_500) !important
   &_isSeparator
     cursor initial
     height 1px
@@ -44,7 +44,7 @@
     font-size 16px
 
   &_hasSubMenu
-    color rgba(0,0,0,0.6)
+    color var(--sand_600)
     &:hover
       color #000
       background-color rgba(0,0,0,0.04)
@@ -73,7 +73,7 @@
         height auto
         color #1F1F1F
         &.actionButton_isTitle
-          color #096DD9
+          color var(--grape_500)
         &_look_danger
           color #d00
       &:not(.dm-menu__item_active):hover
@@ -88,7 +88,7 @@
         color #1F1F1F
           background-color transparent
         .actionButton__titleContainer:hover
-          background-color rgba(9, 109, 217, 0.12)
+          background-color var(--grape_0)
       &__titleContainer
         height 100%
         width 100%

web/libs/editor/src/common/Menu/Menu.styl

@@ -19,7 +19,7 @@
     border-radius 3px
     align-items center
     box-sizing border-box
-    color rgba(0,0,0,0.6)
+    color var(--sand_600)
     font-size 16px
     font-family Roboto
     white-space nowrap

web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.styl

@@ -25,8 +25,8 @@
     gap 8px
     flex: 1 0 auto;
     .annotation-button__userpic_prediction
-      background-color #EFDBFF
-      color #7735D6
+      background-color var(--plum_100)
+      color var(--plum_500)
   &__name
     font-size 12px
     font-weight 400
@@ -51,8 +51,8 @@
     color #898098
 
   &:hover
-    background-color rgba(9, 109, 217, 0.12)
-    border-color rgba(9, 109, 217, 0.16)
+    background-color var(--grape_0)
+    border-color var(--grape_100)
     border-bottom-color transparent
 
     .annotation-button__name
@@ -96,8 +96,8 @@
     color #898098
     visibility hidden
     &:hover
-      color #096DD9
-      background rgba(9, 109, 217, 0.12)
+      color var(--grape_500)
+      background var(--grape_0)
   &__picSection
     position relative
   &__status
@@ -124,15 +124,15 @@
   &_contextMenuOpen
     .annotation-button
       &__ellipsisIcon
-        color #096DD9
-        background #096DD91F
+        color var(--grape_500)
+        background var(--grape_0)
 
 .AnnotationButtonContextMenu
   border-radius 4px
   box-shadow: 0px 1px 3px 1px #26262626, 0px 1px 2px 0px #2626264D;
   &__seperator
     height 1px
-    background-color rgba(137, 128, 152, 0.12)
+    background-color var(--sand_100)
   &__option
     display flex
     margin 8px
@@ -143,11 +143,11 @@
     font-size 16px
     font-weight 400
     line-height 24px
-    letter-spacing 0.5px
     border-radius 4px
     padding-right 32px
     &:hover
-      background-color rgba(65, 60, 74, 0.08)
+      background-color var(--grape_0)
+      color var(--grape_500)
     &_duplicate
       padding-top 6px
       padding-bottom 6px
@@ -158,7 +158,11 @@
     &_delete
       padding-top 6px
       padding-bottom 6px
-      color #CF1322
+      color var(--danger_color)
+      &:hover
+        background-color var(--red_1)
+        color var(--danger_color)
+    &_delete
       .AnnotationButtonContextMenu__icon
         display flex
         padding 4px 11px 4px 12px

web/libs/editor/src/components/Comments/CommentForm.styl

@@ -1,10 +1,10 @@
 .comment-form
-    --primary-action-color #00A8FF
+    --primary-action-color var(--grape_500)
     --primary-action-padding 4px
     --primary-action-border-radius 4px
-    --primary-action-surface-color-hover rgba(9, 109, 217, 0.12)
+    --primary-action-surface-color-hover var(--grape_0)
     --text-input-min-height 40px
-    --tooltip-text-color #F5222D
+    --tooltip-text-color var(--danger_color)
 
     display grid
     grid-template-columns: auto var(--text-input-min-height);

web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.styl

@@ -3,14 +3,13 @@
 .relations 
 .info
 .comments-panel
-  --details-section-border-color #E1E0E0
+  --details-section-border-color var(--sand_300)
   width: 100%
 
   &__section-tab
     width: 100%
 
     &-head
-      font-family "Roboto", Arial, sans-serif;
       font-weight 500;
       font-size 15px
 
@@ -31,7 +30,7 @@
       justify-content space-between
 
       span
-        opacity 0.6
+        color var(--sand_600)
         font-weight normal
 
 .region-actions

web/libs/editor/src/components/SidePanels/PanelBase.styl

@@ -16,8 +16,8 @@
         background var(--header-background-new)
         color var(--icon-color)
         &:hover
-          --icon-color #096DD9
-          --header-background-new #d8e7f9
+          --icon-color var(--grape_500)
+          --header-background-new var(--grape_0)
 
     &.panel
       &_alignment
@@ -83,8 +83,8 @@
       margin 0
 
     &:hover
-      --icon-color #096DD9
-      --header-background rgba(#096DD9, 0.16)
+      --icon-color var(--grape_500)
+      --header-background var(--grape_0)
 
   &__header
     top 0
@@ -134,7 +134,7 @@
       display block
 
     &:hover
-      background-color rgba(#096DD9, 0.16)
+      background-color var(--grape_0)
 
   &:not(&_detached)&_hidden &__toggle
     pointer-events none

web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.styl

@@ -1,8 +1,8 @@
 .tabs-panel
   --header-height 24px
   --header-border-radius 0
-  --header-background #e1e0e2
-  --icon-color #898098
+  --header-background var(--sand_200)
+  --icon-color var(--sand_500)
 
   height 100%
   z-index 10
@@ -13,8 +13,8 @@
     padding 4px
 
     &:hover
-      --icon-color #096DD9
-      --header-background #d8e7f9
+      --icon-color var(--grape_500)
+      --header-background var(--grape_0)
 
   &__header-right,
   &__header-left
@@ -54,7 +54,7 @@
       margin 0
 
     &:hover
-      --icon-color #096DD9
+      --icon-color var(--grape_500)
       --header-background #d8e5f5
 
   &__shield

web/libs/editor/src/components/TopBar/Annotations.styl

@@ -31,7 +31,7 @@
   &__entity
     &_selected
       pointer-events none
-      background-color #e3f1ff
+      background-color var(--grape_0)
 
   &__user
     font-size 14px

web/libs/editor/src/components/TopBar/TopBar.styl

@@ -14,7 +14,7 @@
 
   &__button
     &:hover
-      background-color rgba(9, 109, 217, 0.12)
+      background-color var(--grape_0)
 
   &__group
     display flex