Selaa lähdekoodia

HUE-9485 [frontend] Switch to Fluid colors for Vue components

Johan Ahlen 5 vuotta sitten
vanhempi
commit
38c3f1a6cb

+ 3 - 3
desktop/core/src/desktop/js/components/dropdown/Dropdown.vue

@@ -92,11 +92,11 @@
       min-height: 34px;
       max-height: 200px;
 
-      background-color: $cui-white;
+      background-color: $fluid-white;
       overflow-x: hidden;
       overflow-y: auto;
       list-style: none;
-      border: 1px solid $cui-gray;
+      border: 1px solid $hue-border-color;
       border-radius: $hue-panel-border-radius;
 
       @include box-shadow(0, 5px, 10px, rgba(0, 0, 0, 0.2));
@@ -109,7 +109,7 @@
         font-size: 13px;
 
         li {
-          color: $cui-gray-800;
+          color: $fluid-gray-800;
 
           button,
           a {

+ 1 - 1
desktop/core/src/desktop/js/components/dropdown/DropdownGroup.vue

@@ -41,7 +41,7 @@
   @import '../styles/colors';
 
   .dropdown-group-header {
-    color: $cui-gray-800;
+    color: $fluid-gray-800;
     font-weight: 500;
     padding: 6px 10px;
   }

+ 1 - 1
desktop/core/src/desktop/js/components/dropdown/DropdownItemText.vue

@@ -40,6 +40,6 @@
 
   .hue-dropdown-item-text {
     padding: 6px 16px;
-    color: $cui-gray-800;
+    color: $fluid-gray-800;
   }
 </style>

+ 92 - 201
desktop/core/src/desktop/js/components/styles/colors.scss

@@ -18,204 +18,95 @@
 
 // All standard colors --------------------------------------
 
-$cui-gray-040:                    #fafbfc;
-$cui-gray-050:                    #f4f5f6;
-$cui-gray-100:                    #f1f2f3;
-$cui-gray-200:                    #eaebec;
-$cui-gray-300:                    #d6d8db;
-$cui-gray-400:                    #adb2b6;
-$cui-gray-500:                    #989ea4;
-$cui-gray-600:                    #838b92;
-$cui-gray-700:                    #5a656d;
-$cui-gray-800:                    #333e47;
-$cui-gray-900:                    #1b2329;
-
-$cui-blue-010:                    rgba(230, 247, 255, 0.1); // 10% of cui-blue-050
-$cui-blue-050:                    #e6f7ff;
-$cui-blue-100:                    #a3dfff;
-$cui-blue-200:                    #7accff;
-$cui-blue-300:                    #51b5fc;
-$cui-blue-400:                    #008cff;
-$cui-blue-500:                    #006ee3;
-$cui-blue-600:                    #0058bd;
-$cui-blue-700:                    #004496;
-$cui-blue-800:                    #002f70;
-$cui-blue-900:                    #001c4a;
-
-$cui-green-050:                   #f2ffeb;
-$cui-green-100:                   #cbf1b5;
-$cui-green-200:                   #aee390;
-$cui-green-300:                   #82c25d;
-$cui-green-400:                   #5aa232;
-$cui-green-500:                   #3a870e;
-$cui-green-600:                   #2c6c08;
-$cui-green-700:                   #1a4700;
-$cui-green-800:                   #163c00;
-$cui-green-900:                   #133300;
-
-$cui-yellow-050:                  #fffaed;
-$cui-yellow-100:                  #fff1cc;
-$cui-yellow-200:                  #ffd664;
-$cui-yellow-300:                  #fdc926;
-$cui-yellow-400:                  #d99f18;
-$cui-yellow-500:                  #a16908;
-$cui-yellow-600:                  #804a00;
-$cui-yellow-700:                  #663a00;
-$cui-yellow-800:                  #4d2b00;
-$cui-yellow-900:                  #331d00;
-
-$cui-orange-010:                  rgba(255, 240, 217, 0.3); // 30% of cui-orange-050
-$cui-orange-050:                  #fff0d9;
-$cui-orange-100:                  #ffd599;
-$cui-orange-200:                  #ffa319;
-$cui-orange-300:                  #ff8400;
-$cui-orange-400:                  #f96600;
-$cui-orange-500:                  #b34d00;
-$cui-orange-600:                  #8c3800;
-$cui-orange-700:                  #662500;
-$cui-orange-800:                  #401500;
-$cui-orange-900:                  #260d00;
-
-$cui-red-050:                     #fff2f2;
-$cui-red-100:                     #fdcfcf;
-$cui-red-200:                     #faadac;
-$cui-red-300:                     #f36d6b;
-$cui-red-400:                     #e83934;
-$cui-red-500:                     #d9150c;
-$cui-red-600:                     #bf1408;
-$cui-red-700:                     #990d00;
-$cui-red-800:                     #670901;
-$cui-red-900:                     #3f0600;
-
-$cui-purple-050:                  #f4f1fa;
-$cui-purple-100:                  #d5c9ed;
-$cui-purple-200:                  #ab93dc;
-$cui-purple-300:                  #9678d3;
-$cui-purple-400:                  #8263c2;
-$cui-purple-500:                  #6f47bf;
-$cui-purple-600:                  #552da6;
-$cui-purple-700:                  #4a1ca6;
-$cui-purple-800:                  #33058d;
-$cui-purple-900:                  #1e005a;
-
-// Old color set --------------------------------------------
-$cui-blue-gray-050:               #ECEFF1;
-$cui-blue-gray-100:               #CFD8DC;
-$cui-blue-gray-200:               #B0BEC5;
-$cui-blue-gray-300:               #90A4AE;
-$cui-blue-gray-400:               #78909C;
-$cui-blue-gray-500:               #607D8B;
-$cui-blue-gray-600:               #546E7A;
-$cui-blue-gray-700:               #455A64;
-$cui-blue-gray-800:               #36454F;
-$cui-blue-gray-900:               #232C34;
-
-$cui-steel-050:                   #E8EEEE;
-$cui-steel-100:                   #C6D6D6;
-$cui-steel-200:                   #A0BABA;
-$cui-steel-300:                   #7A9F9F;
-$cui-steel-400:                   #5D8A8A;
-$cui-steel-500:                   #417575;
-$cui-steel-600:                   #3C6C6C;
-$cui-steel-700:                   #345E5E;
-$cui-steel-800:                   #2D5252;
-$cui-steel-900:                   #274646;
-
-$cui-teal-050:                    #E0F6F5;
-$cui-teal-100:                    #B3EAE6;
-$cui-teal-200:                    #80DCD5;
-$cui-teal-300:                    #4DCEC4;
-$cui-teal-400:                    #26C3B7;
-$cui-teal-500:                    #00B9AA;
-$cui-teal-600:                    #00AA9D;
-$cui-teal-700:                    #009488;
-$cui-teal-800:                    #008177;
-$cui-teal-900:                    #006F66;
-
-$cui-lime-010:                    #F4F9ED;
-$cui-lime-050:                    #EDF5E2;
-$cui-lime-100:                    #D2E6B9;
-$cui-lime-200:                    #B4D689;
-$cui-lime-300:                    #96C55A;
-$cui-lime-400:                    #7FB836;
-$cui-lime-500:                    #69AC13;
-$cui-lime-600:                    #619F12;
-$cui-lime-700:                    #548A0F;
-$cui-lime-800:                    #49780D;
-$cui-lime-900:                    #3F670B;
-
-$cui-pink-010:                    #FBF5F5;
-$cui-pink-050:                    #F2DEDE;
-$cui-pink-100:                    #F3BFD4;
-$cui-pink-200:                    #EC93B7;
-$cui-pink-300:                    #E4689A;
-$cui-pink-400:                    #DE4784;
-$cui-pink-500:                    #D8276F;
-$cui-pink-600:                    #C72466;
-$cui-pink-700:                    #AD1F59;
-$cui-pink-800:                    #971B4D;
-$cui-pink-900:                    #821743;
-
-$cui-purple-gray-050:             #F1EFEF;
-$cui-purple-gray-100:             #D5CFD1;
-$cui-purple-gray-200:             #BAB0B3;
-$cui-purple-gray-300:             #ACA0A4;
-$cui-purple-gray-400:             #9F9095;
-$cui-purple-gray-500:             #977F86;
-$cui-purple-gray-600:             #837077;
-$cui-purple-gray-700:             #766168;
-$cui-purple-gray-800:             #6A575D;
-$cui-purple-gray-900:             #5E4D53;
-
-$cui-green-gray-050:              #E9E8E3;
-$cui-green-gray-100:              #C8C6BA;
-$cui-green-gray-200:              #B2AF9F;
-$cui-green-gray-300:              #A7A391;
-$cui-green-gray-400:              #9C9883;
-$cui-green-gray-500:              #918D76;
-$cui-green-gray-600:              #827E6A;
-$cui-green-gray-700:              #74705E;
-$cui-green-gray-800:              #656252;
-$cui-green-gray-900:              #575446;
-
-// Service colors -------------------------------------------
-
-$cui-hive-color:                  $cui-yellow-700;
-$cui-hdfs-color:                  $cui-teal-600;
-$cui-hbase-color:                 $cui-pink-600;
-$cui-hue-color:                   $cui-purple-300;
-$cui-mapreduce-color:             $cui-steel-400;
-$cui-zookeeper-color:             $cui-lime-600;
-$cui-oozie-color:                 $cui-blue-500;
-$cui-flume-color:                 $cui-orange-600;
-$cui-impala-color:                $cui-blue-600;
-$cui-sqoop-color:                 $cui-green-600;
-$cui-solr-color:                  $cui-pink-600;
-$cui-spark-color:                 $cui-orange-600;
-$cui-pig-color:                   $cui-purple-600;
-$cui-yarn-color:                  $cui-yellow-600;
-$cui-s3-color:                    $cui-orange-500;
-$cui-api-color:                   $cui-gray-700;
-
-// Base colors ----------------------------------------------
-
-$cui-black:                       #000000;
-$cui-blue-gray:                   $cui-blue-gray-500;
-$cui-blue:                        $cui-blue-500;
-$cui-gray:                        $cui-gray-500;
-$cui-green-gray:                  $cui-green-gray-500;
-$cui-green:                       $cui-green-500;
-$cui-lime:                        $cui-lime-500;
-$cui-mintish:                     #1fcfb8;
-$cui-oozie-blue:                  #0050a2;
-$cui-oozie-yellow:                #fff300;
-$cui-orange:                      $cui-orange-500;
-$cui-pink:                        $cui-pink-500;
-$cui-purple-gray:                 $cui-purple-gray-500;
-$cui-purple:                      $cui-purple-500;
-$cui-red:                         $cui-red-500;
-$cui-slate:                       #305868;
-$cui-steel:                       $cui-steel-500;
-$cui-teal:                        $cui-teal-500;
-$cui-white:                       #FFFFFF;
-$cui-yellow:                      $cui-yellow-500;
+$fluid-blue-050:                  #e6f7ff;
+$fluid-blue-100:                  #a3dfff;
+$fluid-blue-200:                  #7accff;
+$fluid-blue-300:                  #51b5fc;
+$fluid-blue-400:                  #008cff;
+$fluid-blue-500:                  #006ee3;
+$fluid-blue-600:                  #005bbd;
+$fluid-blue-700:                  #004496;
+$fluid-blue-800:                  #002f70;
+$fluid-blue-900:                  #001c4a;
+
+$fluid-gray-040:                  #fafbfc;
+$fluid-gray-050:                  #f4f5f6;
+$fluid-gray-100:                  #f1f2f3;
+$fluid-gray-200:                  #eaebec;
+$fluid-gray-300:                  #d6d8db;
+$fluid-gray-400:                  #adb2b6;
+$fluid-gray-500:                  #989ea4;
+$fluid-gray-600:                  #838b92;
+$fluid-gray-700:                  #5a656d;
+$fluid-gray-800:                  #333e47;
+$fluid-gray-900:                  #1c2429;
+
+$fluid-green-050:                 #f2ffeb;
+$fluid-green-100:                 #cbf1b5;
+$fluid-green-200:                 #aee390;
+$fluid-green-300:                 #82c25d;
+$fluid-green-400:                 #5aa232;
+$fluid-green-500:                 #3a870e;
+$fluid-green-600:                 #2c6c08;
+$fluid-green-700:                 #1a4700;
+$fluid-green-800:                 #163c00;
+$fluid-green-900:                 #133300;
+
+$fluid-orange-050:                #fff0d9;
+$fluid-orange-100:                #ffd599;
+$fluid-orange-200:                #ffa319;
+$fluid-orange-300:                #ff8400;
+$fluid-orange-400:                #f96702;
+$fluid-orange-500:                #b34d00;
+$fluid-orange-600:                #8c3800;
+$fluid-orange-700:                #662500;
+$fluid-orange-800:                #401500;
+$fluid-orange-900:                #260d00;
+
+$fluid-red-050:                   #fff2f2;
+$fluid-red-100:                   #fdcfcf;
+$fluid-red-200:                   #faadac;
+$fluid-red-300:                   #f36d6b;
+$fluid-red-400:                   #e83934;
+$fluid-red-500:                   #d9150c;
+$fluid-red-600:                   #bf1408;
+$fluid-red-700:                   #990d00;
+$fluid-red-800:                   #670901;
+$fluid-red-900:                   #3f0600;
+
+$fluid-yellow-050:                #fffaed;
+$fluid-yellow-100:                #fff1cc;
+$fluid-yellow-200:                #ffd664;
+$fluid-yellow-300:                #fdc926;
+$fluid-yellow-400:                #d99f18;
+$fluid-yellow-500:                #a16908;
+$fluid-yellow-600:                #804a00;
+$fluid-yellow-700:                #663a00;
+$fluid-yellow-800:                #4d2b00;
+$fluid-yellow-900:                #331d00;
+
+$fluid-purple-050:                #f4f1fa;
+$fluid-purple-100:                #d5c9ed;
+$fluid-purple-200:                #ab93dc;
+$fluid-purple-300:                #9678d3;
+$fluid-purple-400:                #8263c2;
+$fluid-purple-500:                #6f47bf;
+$fluid-purple-600:                #552da6;
+$fluid-purple-700:                #4a1ca6;
+$fluid-purple-800:                #33058d;
+$fluid-purple-900:                #1e005a;
+
+$fluid-black:                     #000;
+$fluid-white:                     #fff;
+
+$fluid-mint:                      #1fcfb8;
+$fluid-slate:                     #305868;
+
+$hue-primary-color-dark:          #0b7fad;
+$hue-primary-color-light:         #dbe8f1;
+$hue-trunk:                       $fluid-purple-300;
+
+$hue-border-color:                $fluid-gray-300;
+$hue-disabled-color:              $fluid-gray-100;
+$hue-error-color:                 $fluid-red-500;
+$hue-warning-color:               $fluid-orange-400;

+ 0 - 8
desktop/core/src/desktop/js/components/styles/mixins.scss

@@ -23,14 +23,6 @@
 
 */
 
-$hue-primary-color-dark: #0B7FAD;
-$hue-primary-color-light: #DBE8F1;
-$hue-trunk: $cui-purple-300;
-
-$hue-disabled-color: $cui-gray-100;
-$hue-error-color: $cui-red-500;
-$hue-warning-color: $cui-orange-400;
-
 $hue-panel-border-radius: 2px;
 
 @mixin hue-transform($transform) {