dashboard-shell-shell 1.0.10000011122 → 3.0.5-test.1

package/assets/styles/themes/_light.scss

@@ -6,7 +6,7 @@ $darkest   : #333;
 $darker    : #333;
 
 //light disabled
-$dark      : #B6B6C2;
+$dark      : #ffffff;
 
 //light border and buttons
 $medium    : #d7d7d7;
@@ -30,7 +30,7 @@ $secondary       : $darker;
 $link            : #1890FF;
 
 // Status colors
-$success         : #5D995D;
+$success         : #1890FF;
 $warning         : #DAC342;
 $error           : #F64747;
 // $error           : #A30014;
@@ -82,6 +82,7 @@ BODY, .theme-light {
 
   --link                    : #{$link};
   --link-text               : #{contrast-color($link)};
+  --link-text-secondary     : #{$darker};
   --link-hover-bg           : #{darken($link, 10%)};
   --link-hover-text         : #{saturate($lightest, 20%)};
   --link-active-bg          : #{darken($link, 25%)};
@@ -94,6 +95,16 @@ BODY, .theme-light {
   
   .text-link {
     color: var(--link) !important;
+
+  }
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .bg-link {
@@ -112,6 +123,8 @@ BODY, .theme-light {
       }
   }
 
+  --lightest                   : #{rgba($lightest, 1)};
+
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -145,13 +158,17 @@ BODY, .theme-light {
       }
   }
 
-  // --muted                      : #{$dark};
   --muted                      : #A8ABB2;
+  --deemphasized               : #717179;
 
   .text-muted {
     color: var(--muted) !important;
   }
 
+  .text-deemphasized {
+    color: var(--deemphasized);
+  }
+
   --darker                    : #{$darker};
   --darker-text               : #{contrast-color($darker)};
   --darker-hover-bg           : #{darken($darker, 10%)};
@@ -312,6 +329,37 @@ BODY, .theme-light {
       background: var(--error-active-bg);
       }
   }
+
+  --disabled : #{$disabled};
+  --disabled-text : #{contrast-color($disabled)};
+  --disabled-hover-bg : #{darken($disabled, 10%)};
+  --disabled-hover-text : #{saturate($lightest, 20%)};
+  --disabled-active-bg : #{darken($disabled, 25%)};
+  --disabled-active-text : #{contrast-color(darken($disabled, 25%))};
+  --disabled-border : #{$disabled};
+  --disabled-banner-bg : #{rgba($disabled, 0.15)};
+  --disabled-light-bg : #{rgba($disabled, 0.05)};
+
+
+  .text-disabled {
+    color: var(--disabled) !important;
+  }
+
+  .bg-disabled {
+    background-color: var(--disabled);
+    color: var(--disabled-text);
+
+    &.btn:hover {
+      color: var(--disabled-hover-text);
+      background: var(--disabled-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--disabled-active-text);
+      background: var(--disabled-active-bg);
+    }
+  }
   
 
   --body-bg                    : #{$lightest};
@@ -337,6 +385,7 @@ BODY, .theme-light {
   --nav-hover                  : #{$medium};
   --nav-hover-color            :#1890FF;
   --nav-expander-hover         : #{darken($medium, 10%)};
+  --nav-icon-badge-bg          : #{$dark};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
 
@@ -357,6 +406,8 @@ BODY, .theme-light {
   --border                     : #{$medium};
   --border-width               : 1px;
   --border-radius              : 2px;
+  --border-radius-md           : 6px;
+  --border-radius-lg           : 8px;
   // --outline                    : var(--primary);
   --outline                    : #d9d9d9;
   --outline-width              : 1px;
@@ -367,7 +418,8 @@ BODY, .theme-light {
 
   --modal-bg                   : #{$lightest};
   --modal-border               : #{$dark};
-  --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
+  --overlay-bg                 : rgba(38, 42, 64, 0.35);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --shadow                     : #{rgba($medium, 0.85)};
@@ -397,6 +449,8 @@ BODY, .theme-light {
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-highlight-text    : var(--link);
 
+  --notification-unread-bg     : var(--primary-banner-bg);
+
   --card-badge-text            : #ffffff;
 
   // UNUSED?
@@ -419,6 +473,7 @@ BODY, .theme-light {
   --input-addon-bg             : #{$darker};
   --input-hover-border         : #d7d7d7;
 
+  --label-secondary           : #{$darker};
 
   --progress-bg                : #{$medium};
   --progress-divider           : #{$medium};
@@ -457,6 +512,7 @@ BODY, .theme-light {
   --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
 
   --yaml-editor-bg             : #{$lighter};
+  --drawer-body-bg             : #{$lighter};
 
   --diff-border                : var(--border);
   --diff-header-bg             : var(--nav-bg);
@@ -566,4 +622,29 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --badge-state-disabled-text  : #{$darker};
+  --badge-state-disabled-bg    : #{$lighter};
+  --badge-state-disabled-border: #{$medium};
+
+  --gap                        : 8px;
+  --gap-md                     : 16px;
+  --gap-lg                     : 24px;
+
+  --click-badge-error          : #{$lightest};
+  --click-badge-error-bg       : #B13333;
+  --click-badge-error-border   : #7C0015;
+
+  --click-badge-warning        : #473900;
+  --click-badge-warning-bg     : #FFE47A;
+  --click-badge-warning-border : #E5A200;
+
+  --click-badge-success        : #007032;
+  --click-badge-success-bg     : #CEE4D7;
+  --click-badge-success-border : #1F7043;
+
+  --click-badge-info           : #{$lightest};
+  --click-badge-info-bg        : #{$info};
+  --click-badge-info-border    : #2673A6;
+  --bubble-bg                : #{$lighter};
 }

package/assets/styles/vendor/vue-select.scss

@@ -321,6 +321,7 @@ $transition-duration: 150ms;
     }
     .vs__selected {
       color: var(--input-text);
+      background-color: rgba(0, 0, 0, 0);
     }
   }
 
@@ -330,7 +331,7 @@ $transition-duration: 150ms;
   }
   .vs__dropdown-toggle {
     background-color: var(--input-bg);
-    border: none;
+    border: none !important;
     padding: none;
     border-radius: var(--border-radius);
     border: 1px solid var(--dropdown-border);