Browse Source

Sass and less style cleanup and config improvements (#3283)

* [frontend] sass and less style cleanup and config improvements

* [frontend] update contributing file

* [frontent] consistent naming of sass variables namespace
Bjorn Alm 2 years ago
parent
commit
be4e2157e4
54 changed files with 280 additions and 393 deletions
  1. 0 7
      contributing-frontend.md
  2. 4 4
      desktop/core/src/desktop/js/apps/editor/components/ExecutableProgressBar.vue
  3. 1 1
      desktop/core/src/desktop/js/apps/editor/components/QueryHistoryTable.scss
  4. 33 33
      desktop/core/src/desktop/js/apps/editor/components/aceEditor/AceEditor.scss
  5. 3 3
      desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanel.scss
  6. 1 1
      desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationMode.scss
  7. 5 1
      desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.scss
  8. 10 5
      desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx
  9. 5 5
      desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitution.scss
  10. 3 3
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/LabeledInfo.vue
  11. 2 2
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryDetails.vue
  12. 3 3
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryDetailsDiff.vue
  13. 2 2
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryInfo.vue
  14. 2 2
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryInfoTop.vue
  15. 4 4
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/counters-table/VarianceCell.vue
  16. 2 2
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-table/QueryTable.vue
  17. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-table/SortSelector.vue
  18. 4 4
      desktop/core/src/desktop/js/components/DateRangePicker.vue
  19. 1 1
      desktop/core/src/desktop/js/components/FacetSelector.vue
  20. 32 33
      desktop/core/src/desktop/js/components/HueButton.scss
  21. 9 9
      desktop/core/src/desktop/js/components/HueTable.scss
  22. 17 17
      desktop/core/src/desktop/js/components/InlineAlert.vue
  23. 2 2
      desktop/core/src/desktop/js/components/Modal.scss
  24. 2 2
      desktop/core/src/desktop/js/components/Paginator.scss
  25. 4 4
      desktop/core/src/desktop/js/components/SearchInput.scss
  26. 3 3
      desktop/core/src/desktop/js/components/Spinner.scss
  27. 6 6
      desktop/core/src/desktop/js/components/Tabs.vue
  28. 2 2
      desktop/core/src/desktop/js/components/TypeaheadInput.vue
  29. 2 2
      desktop/core/src/desktop/js/components/assist/AssistPanel.scss
  30. 2 2
      desktop/core/src/desktop/js/components/assist/SqlAssistPanel.scss
  31. 3 3
      desktop/core/src/desktop/js/components/dropdown/DropdownDrawer.scss
  32. 1 1
      desktop/core/src/desktop/js/components/dropdown/DropdownMenu.scss
  33. 2 2
      desktop/core/src/desktop/js/components/dropdown/DropdownMenuGroup.vue
  34. 2 2
      desktop/core/src/desktop/js/components/dropdown/DropdownMenuText.vue
  35. 16 17
      desktop/core/src/desktop/js/components/sidebar/drawer.scss
  36. 3 4
      desktop/core/src/desktop/js/components/sidebar/hueSidebar.scss
  37. 10 11
      desktop/core/src/desktop/js/components/sidebar/sidebar.scss
  38. 2 3
      desktop/core/src/desktop/js/components/sidebar/variables.scss
  39. 0 0
      desktop/core/src/desktop/js/components/styles/_classes.scss
  40. 2 2
      desktop/core/src/desktop/js/components/styles/_mixins.scss
  41. 17 13
      desktop/core/src/desktop/js/components/styles/_variables.scss
  42. 0 105
      desktop/core/src/desktop/js/components/styles/colors.scss
  43. 5 5
      desktop/core/src/desktop/js/reactComponents/AppBanner/AppBanner.scss
  44. 3 3
      desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.scss
  45. 3 2
      desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.scss
  46. 9 9
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss
  47. 5 5
      desktop/core/src/desktop/js/reactComponents/PushDrawer/Drawer/Drawer.scss
  48. 3 3
      desktop/core/src/desktop/js/reactComponents/PushDrawer/DrawerHeader/DrawerHeader.scss
  49. 4 4
      desktop/core/src/desktop/js/reactComponents/PushDrawer/PushDrawer.scss
  50. 3 3
      desktop/core/src/desktop/js/reactComponents/Toolbar/ToolbarButton/ToolbarButton.scss
  51. 3 3
      desktop/core/src/desktop/js/reactComponents/Toolbar/ToolbarShared.scss
  52. 0 0
      desktop/core/src/desktop/static/desktop/css/hue.css
  53. 6 24
      desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less
  54. 11 3
      webpack.config.js

+ 0 - 7
contributing-frontend.md

@@ -128,13 +128,6 @@ import { Pagination } from 'antd';
 import PrimaryButton from 'cuix/dist/components/Button/PrimaryButton';
 ```
 
-If you are importing a component from Ant Design that is new to Hue you also need to import its styles into the
-file `desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less`. If you would import the pagination component for the first time you would write
-
-```less
-import 'node_modules/antd/es/pagination/style/index.less';
-```
-
 ## Styling
 
 Hue uses `Sass` while both cuix and Ant Design use `Less` for writing CSS. The core cuix variables are however stil available in sass.

+ 4 - 4
desktop/core/src/desktop/js/apps/editor/components/ExecutableProgressBar.vue

@@ -114,7 +114,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../components/styles/colors.scss';
+  @import '../../../components/styles/variables.scss';
   @import '../../../components/styles/mixins.scss';
 
   .executable-progress-container {
@@ -129,7 +129,7 @@
       position: relative;
 
       .executable-progress-bar {
-        background-color: $fluid-white;
+        background-color: $fluidx-white;
 
         @include ease-transition(height);
 
@@ -157,11 +157,11 @@
         }
 
         &.progress-success {
-          background-color: $fluid-green-400;
+          background-color: $fluidx-green-400;
         }
 
         &.progress-failed {
-          background-color: $fluid-red-400;
+          background-color: $fluidx-red-400;
         }
       }
     }

+ 1 - 1
desktop/core/src/desktop/js/apps/editor/components/QueryHistoryTable.scss

@@ -79,7 +79,7 @@
 
       td .query-history-last-executed,
       td .query-history-status {
-        color: $fluid-gray-600;
+        color: $fluidx-gray-600;
       }
     }
   }

+ 33 - 33
desktop/core/src/desktop/js/apps/editor/components/aceEditor/AceEditor.scss

@@ -1,11 +1,11 @@
-@import '../../../../components/styles/colors.scss';
+@import '../../../../components/styles/variables.scss';
 @import '../../../../components/styles/mixins.scss';
 
 .ace-editor-component {
   height: 100%;
   width: 100%;
   text-align: left;
-  color: $fluid-black;
+  color: $fluidx-black;
 
   .ace-editor {
     height: 100%;
@@ -45,7 +45,7 @@
 
           50% {
             background-color: rgba(0, 140, 255, 0.4);
-            color: $fluid-gray-700;
+            color: $fluidx-gray-700;
           }
 
           100% {
@@ -55,18 +55,18 @@
       }
 
       &.ace-failed-gutter-decoration {
-        background-color: $fluid-red-050;
-        border-right: 1px solid $fluid-red-700;
+        background-color: $fluidx-red-050;
+        border-right: 1px solid $fluidx-red-700;
       }
 
       &.ace-completed-gutter-decoration {
-        background-color: $fluid-green-050;
-        border-right: 1px solid $fluid-green-400;
+        background-color: $fluidx-green-050;
+        border-right: 1px solid $fluidx-green-400;
       }
 
       &.ace_error {
-        background-color: $fluid-red-050;
-        border-right: 1px solid $fluid-red-700;
+        background-color: $fluidx-red-050;
+        border-right: 1px solid $fluidx-red-700;
         border-left: none;
       }
     }
@@ -89,7 +89,7 @@
 
       .ace-failed-marker,
       .ace_error-line {
-        background-color: $fluid-red-050 !important;
+        background-color: $fluidx-red-050 !important;
         opacity: 0.5;
         z-index: 6;
       }
@@ -101,22 +101,22 @@
       border-right: 1px solid transparent;
 
       &.ace-active-gutter-decoration {
-        background-color: $fluid-slate-700;
-        color: $fluid-slate-100;
-        border-right: 1px solid $fluid-slate-600;
+        background-color: $fluidx-slate-700;
+        color: $fluidx-slate-100;
+        border-right: 1px solid $fluidx-slate-600;
       }
 
       &.ace_error {
-        background-color: $fluid-red-050;
-        border-right: 1px solid $fluid-red-700;
+        background-color: $fluidx-red-050;
+        border-right: 1px solid $fluidx-red-700;
         border-left: none;
       }
     }
 
     .hue-ace-location {
       position: absolute;
-      background-color: $fluid-slate-700;
-      border: 1px solid $fluid-slate-700;
+      background-color: $fluidx-slate-700;
+      border: 1px solid $fluidx-slate-700;
       border-radius: 1px;
       margin-left: -1px;
       margin-top: -1px;
@@ -131,7 +131,7 @@
 
       .ace-failed-marker,
       .ace_error-line {
-        background-color: $fluid-red-050 !important;
+        background-color: $fluidx-red-050 !important;
         opacity: 0.5;
         z-index: 6;
       }
@@ -157,9 +157,9 @@
     width: 300px;
     max-height: 250px;
     overflow: hidden;
-    border: 1px solid $fluid-gray-300;
+    border: 1px solid $fluidx-gray-300;
     border-radius: 2px;
-    background-color: $fluid-white;
+    background-color: $fluidx-white;
   }
 
   .autocompleter-suggestions {
@@ -176,7 +176,7 @@
 
     position: relative;
     padding: 5px;
-    background-color: $fluid-gray-040;
+    background-color: $fluidx-gray-040;
     line-height: 20px;
     font-size: 14px;
     overflow: hidden;
@@ -184,7 +184,7 @@
     text-overflow: ellipsis;
 
     .popular {
-      color: $fluid-orange-300;
+      color: $fluidx-orange-300;
       margin-top: 3px;
       float: right;
     }
@@ -219,7 +219,7 @@
 
   .autocompleter-categories > div.active {
     display: inline-block;
-    border-bottom: 2px solid $fluid-blue-400;
+    border-bottom: 2px solid $fluidx-blue-400;
     cursor: default;
   }
 
@@ -232,7 +232,7 @@
   .autocompleter-suggestion {
     height: 19px;
     clear: both;
-    background-color: $fluid-white;
+    background-color: $fluidx-white;
     padding: 3px;
     cursor: pointer;
     position: relative;
@@ -242,11 +242,11 @@
   }
 
   .autocompleter-suggestion:hover {
-    background-color: $fluid-gray-200;
+    background-color: $fluidx-gray-200;
   }
 
   .autocompleter-suggestion.selected {
-    background-color: $fluid-gray-300;
+    background-color: $fluidx-gray-300;
   }
 
   .autocompleter-suggestion-value {
@@ -269,7 +269,7 @@
     right: 0;
     top: 3px;
     padding-right: 3px;
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
     max-width: 65px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -297,7 +297,7 @@
 
   .autocompleter-details-contents .details-attribute,
   .autocompleter-details-contents .details-popularity {
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
     display: inline-block;
   }
 
@@ -309,7 +309,7 @@
   }
 
   .autocompleter-details-contents .details-popularity .progress .bar {
-    background-color: $fluid-blue-400;
+    background-color: $fluidx-blue-400;
   }
 
   .autocompleter-details-contents .details-comment,
@@ -317,7 +317,7 @@
     font-size: 14px;
     margin-top: 5px;
     margin-bottom: 5px;
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
   }
 
   .autocompleter-details-contents .details-header {
@@ -330,7 +330,7 @@
     margin-top: 5px;
     margin-bottom: 5px;
     font-size: 13px;
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
     font-style: italic;
   }
 
@@ -341,9 +341,9 @@
   }
 
   .autocompleter-details-contents .details-code {
-    background-color: $fluid-gray-040;
+    background-color: $fluidx-gray-040;
     padding: 3px;
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
     font: 12px normal Roboto Mono, Menlo, Monaco, Consolas, "Courier New", monospace;
     direction: ltr;
   }

+ 3 - 3
desktop/core/src/desktop/js/apps/editor/components/executionAnalysis/ExecutionAnalysisPanel.scss

@@ -1,4 +1,4 @@
-@import '../../../../components/styles/colors.scss';
+@import '../../../../components/styles/variables.scss';
 @import '../../../../components/styles/mixins.scss';
 
 .execution-analysis-panel {
@@ -36,8 +36,8 @@
 
   .execution-analysis-errors {
     ul {
-      background-color: $fluid-red-050;
-      color: $fluid-red-700;
+      background-color: $fluidx-red-050;
+      color: $fluidx-red-700;
       list-style: none;
       padding: 5px 10px;
       margin: 0;

+ 1 - 1
desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationMode.scss

@@ -1,4 +1,4 @@
-@import '../../../../components/styles/colors.scss';
+@import '../../../../components/styles/variables.scss';
 @import '../../../../components/styles/mixins.scss';
 
 .presentation-mode {

+ 5 - 1
desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.scss

@@ -1,4 +1,7 @@
 // Component styling using BEM notation
+@use 'classes';
+@use 'variables' as vars;
+@use 'mixins';
 
 $my-color:   #f8f8f8;
 
@@ -8,5 +11,6 @@ $my-color:   #f8f8f8;
 
 .react-example__title,
 .react-example__description {
-  color: black;
+  color: vars.$hue-primary-color-dark;
+  @include mixins.fade-in();
 }

+ 10 - 5
desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx

@@ -1,9 +1,8 @@
 'use strict';
 
 import React, { FunctionComponent, useState } from 'react';
-import { Button, Modal, Skeleton, Pagination } from 'antd';
+import { Button, Modal, Skeleton, Pagination, Dropdown } from 'antd';
 import PrimaryButton from 'cuix/dist/components/Button/PrimaryButton';
-
 import PlusCircleIcon from '@cloudera/cuix-core/icons/react/PlusCircleIcon';
 
 // Provides a i18n translation hook
@@ -69,6 +68,11 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ activeExecutable,
     setIsModalOpen(false);
   };
 
+  const items = [
+    { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
+    { label: 'item 2', key: 'item-2' }
+  ];
+
   return !i18nReady ? (
     <div className="antd">
       <Skeleton />
@@ -76,11 +80,9 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ activeExecutable,
   ) : (
     // The 'antd' class is added to the root element since we want it to apply the correct
     // "global" styling to its antd sub components, e.g. the antd Button.
-    // Also make sure that the component specific Antd style is imported in the file
-    // 'root-wrapped-antd.less'.
     <React.StrictMode>
       <div className="react-example cuix antd">
-        <h1 className="react-example__title">{title}</h1>
+        <h1 className="react-example__title hue-h1 ">{title}</h1>
         <Pagination
           showTotal={total => `Total ${total} items`}
           showSizeChanger
@@ -90,6 +92,9 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ activeExecutable,
         <PrimaryButton icon={<PlusCircleIcon />} onClick={showModal}>
           {t('Open (cuix button)')}
         </PrimaryButton>
+        <Dropdown menu={{ items }}>
+          <a>Hover me</a>
+        </Dropdown>
 
         <p className="react-example__description">
           I'm an Editor specific react component containing subcomponents. The dynamic id that I'm

+ 5 - 5
desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitution.scss

@@ -1,4 +1,4 @@
-@import '../../../../components/styles/colors.scss';
+@import '../../../../components/styles/variables.scss';
 @import '../../../../components/styles/mixins.scss';
 
 .variable-substitution {
@@ -32,7 +32,7 @@
 
       input {
         font-size: 14px;
-        border: 1px solid $fluid-gray-300;
+        border: 1px solid $fluidx-gray-300;
         margin: 0;
         padding: 3px 6px;
         border-radius: 0 2px 2px 0;
@@ -51,13 +51,13 @@
       padding: 3px 6px;
       font-size: 14px;
       vertical-align: top;
-      border: 1px solid $fluid-gray-300;
+      border: 1px solid $fluidx-gray-300;
     }
 
     .variable-label {
       min-width: 16px;
-      background-color: $fluid-gray-050;
-      color: $fluid-gray-800;
+      background-color: $fluidx-gray-050;
+      color: $fluidx-gray-800;
       border-radius: 2px 0 0 2px;
       border-right: none;
       text-align: center;

+ 3 - 3
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/LabeledInfo.vue

@@ -66,18 +66,18 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
 
   .labeled-info-title {
     text-transform: uppercase;
-    color: $fluid-gray-500;
+    color: $fluidx-gray-500;
     font-weight: normal;
     font-size: 12px;
     margin: 0;
   }
 
   .labled-info-value {
-    color: $fluid-gray-700;
+    color: $fluidx-gray-700;
     margin-bottom: 5px;
   }
 </style>

+ 2 - 2
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryDetails.vue

@@ -159,7 +159,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
   @import '../../../../../components/styles/mixins';
 
   .buttons-container {
@@ -183,7 +183,7 @@
     border-radius: $hue-panel-border-radius;
 
     &:hover {
-      border-color: $fluid-blue-700;
+      border-color: $fluidx-blue-700;
     }
   }
 

+ 3 - 3
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryDetailsDiff.vue

@@ -153,13 +153,13 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
   @import '../../../../../components/styles/mixins';
 
   .hue-info-box {
     padding: 10px;
 
-    border: 1px solid $fluid-gray-300;
+    border: 1px solid $fluidx-gray-300;
     border-radius: $hue-panel-border-radius;
   }
 
@@ -184,7 +184,7 @@
   ::v-deep(.query-b-deep .query-b),
   ::v-deep(.query-b-deep .hue-info-box),
   ::v-deep(.query-b-deep .dag-view-container) {
-    background-color: $fluid-blue-050;
+    background-color: $fluidx-blue-050;
     border-radius: $hue-panel-border-radius;
   }
 

+ 2 - 2
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryInfo.vue

@@ -106,7 +106,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
   @import '../../../../../components/styles/mixins';
 
   .query-info {
@@ -147,7 +147,7 @@
       overflow: hidden;
       white-space: normal;
 
-      border: 1px solid $fluid-gray-300;
+      border: 1px solid $fluidx-gray-300;
       border-radius: $hue-panel-border-radius;
     }
   }

+ 2 - 2
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/QueryInfoTop.vue

@@ -64,13 +64,13 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
   @import '../../../../../components/styles/mixins';
 
   .hue-info-box {
     padding: 10px;
 
-    border: 1px solid $fluid-gray-300;
+    border: 1px solid $fluidx-gray-300;
     border-radius: $hue-panel-border-radius;
 
     @include nowrap-ellipsis;

+ 4 - 4
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/counters-table/VarianceCell.vue

@@ -63,12 +63,12 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../../components/styles/colors.scss';
+  @import '../../../../../../components/styles/variables.scss';
   @import '../../../../../../components/styles/mixins';
   .variance-bar {
     display: inline-block;
 
-    border: 1px solid $fluid-gray-400;
+    border: 1px solid $fluidx-gray-400;
     border-radius: $hue-panel-border-radius;
 
     width: 150px;
@@ -77,11 +77,11 @@
     overflow: hidden;
 
     .value2-bar {
-      background-color: $fluid-blue-100;
+      background-color: $fluidx-blue-100;
       height: 10px;
       width: 50%;
 
-      border-left: 1px solid $fluid-gray-400;
+      border-left: 1px solid $fluidx-gray-400;
 
       margin-left: auto;
       margin-right: 0;

+ 2 - 2
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-table/QueryTable.vue

@@ -316,7 +316,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../../../components/styles/colors.scss';
+  @import '../../../../../components/styles/variables.scss';
   @import '../../../../../components/styles/mixins';
 
   .impala-query-table {
@@ -385,7 +385,7 @@
       ::v-deep(i) {
         font-size: 20px;
         padding: 2px;
-        color: $fluid-gray-500;
+        color: $fluidx-gray-500;
       }
     }
 

+ 1 - 1
desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-table/SortSelector.vue

@@ -152,7 +152,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import 'components/styles/colors';
+  @import 'components/styles/variables';
   @import 'components/styles/mixins';
 
   .sort-selector {

+ 4 - 4
desktop/core/src/desktop/js/components/DateRangePicker.vue

@@ -237,7 +237,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import 'styles/colors';
+  @import 'styles/variables';
   @import 'styles/mixins';
 
   .date-range-picker-panel {
@@ -274,7 +274,7 @@
               padding: 1px 2px;
 
               &.selected {
-                background-color: $fluid-gray-100;
+                background-color: $fluidx-gray-100;
               }
             }
           }
@@ -286,7 +286,7 @@
         padding: 15px 20px;
 
         .range-header {
-          color: $fluid-gray-500;
+          color: $fluidx-gray-500;
           margin-bottom: 5px;
           text-transform: uppercase;
         }
@@ -297,7 +297,7 @@
           line-height: 24px;
           width: 100%;
           font-size: 13px;
-          border: 1px solid $fluid-gray-800;
+          border: 1px solid $fluidx-gray-800;
           border-radius: 3px;
         }
 

+ 1 - 1
desktop/core/src/desktop/js/components/FacetSelector.vue

@@ -198,7 +198,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './styles/colors';
+  @import './styles/variables';
   @import './styles/mixins';
 
   .facet-selector {

+ 32 - 33
desktop/core/src/desktop/js/components/HueButton.scss

@@ -16,15 +16,14 @@
  limitations under the License.
 */
 
-@import './styles/colors';
 @import './styles/variables';
 
 .hue-btn {
   height: 32px;
-  border-radius: $fluid-border-radius;
-  border: solid 1px $fluid-gray-300;
-  background-color: $fluid-white;
-  color: $fluid-blue-500;
+  border-radius: $border-radius-base;
+  border: solid 1px $fluidx-gray-300;
+  background-color: $fluidx-white;
+  color: $fluidx-blue-500;
   padding: 0 12px;
 
   &.hue-btn-small {
@@ -40,17 +39,17 @@
   }
 
   &:hover {
-    border: solid 1px $fluid-blue-700;
+    border: solid 1px $fluidx-blue-700;
   }
 
   &:active {
-    border: solid 1px $fluid-blue-800;
+    border: solid 1px $fluidx-blue-800;
   }
 
   &[disabled] {
     cursor: default;
-    color: $fluid-gray-400;
-    border: solid 1px $fluid-gray-200;
+    color: $fluidx-gray-400;
+    border: solid 1px $fluidx-gray-200;
   }
 
   &:focus {
@@ -58,48 +57,48 @@
   }
 
   &:focus-visible {
-    border: solid 1px $fluid-blue-800;
-    outline: $fluid-blue-100 auto 4px;
+    border: solid 1px $fluidx-blue-800;
+    outline: $fluidx-blue-100 auto 4px;
   }
 
   &.hue-btn-primary:not([disabled]) {
-    color: $fluid-white;
-    background-color: $fluid-blue-500;
-    border: solid 1px $fluid-blue-500;
+    color: $fluidx-white;
+    background-color: $fluidx-blue-500;
+    border: solid 1px $fluidx-blue-500;
 
     &:hover {
-      background-color: $fluid-blue-700;
-      border: solid 1px $fluid-blue-700;
+      background-color: $fluidx-blue-700;
+      border: solid 1px $fluidx-blue-700;
     }
 
     &.active {
-      background-color: $fluid-blue-800;
-      border: solid 1px $fluid-blue-800;
+      background-color: $fluidx-blue-800;
+      border: solid 1px $fluidx-blue-800;
     }
 
     &:focus-visible {
-      border: solid 1px $fluid-gray-900;
+      border: solid 1px $fluidx-gray-900;
     }
   }
 
   &.hue-btn-alert:not([disabled]) {
-    color: $fluid-white;
-    background-color: $fluid-red-500;
-    border: solid 1px $fluid-red-500;
+    color: $fluidx-white;
+    background-color: $fluidx-red-500;
+    border: solid 1px $fluidx-red-500;
 
     &:hover {
-      background-color: $fluid-red-700;
-      border: solid 1px $fluid-red-700;
+      background-color: $fluidx-red-700;
+      border: solid 1px $fluidx-red-700;
     }
 
     &:active {
-      background-color: $fluid-red-800;
-      border: solid 1px $fluid-red-800;
+      background-color: $fluidx-red-800;
+      border: solid 1px $fluidx-red-800;
     }
 
     &:focus-visible {
-      border: solid 1px $fluid-red-800;
-      outline-color: $fluid-red-100;
+      border: solid 1px $fluidx-red-800;
+      outline-color: $fluidx-red-100;
       outline-width: 4px;
     }
   }
@@ -108,22 +107,22 @@
     border: solid 1px transparent;
 
     &:hover {
-      border: solid 1px $fluid-gray-300;
+      border: solid 1px $fluidx-gray-300;
     }
 
     &:active {
-      border: solid 1px $fluid-gray-400;
+      border: solid 1px $fluidx-gray-400;
     }
   }
 
   &.hue-btn-borderless[disabled] {
     border: solid 1px transparent;
-    color: $fluid-gray-400;
+    color: $fluidx-gray-400;
   }
 
   &.hue-btn-alert[disabled],
   &.hue-btn-primary[disabled] {
-    background-color: $fluid-gray-200;
-    border: solid 1px $fluid-gray-200;
+    background-color: $fluidx-gray-200;
+    border: solid 1px $fluidx-gray-200;
   }
 }

+ 9 - 9
desktop/core/src/desktop/js/components/HueTable.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import './styles/colors';
+@import './styles/variables';
 @import './styles/mixins';
 
 .hue-table-container {
@@ -33,7 +33,7 @@
       border-collapse: collapse;
 
       tbody > tr:first-child {
-        border-top: 1px solid $fluid-gray-300;
+        border-top: 1px solid $fluidx-gray-300;
       }
     }
 
@@ -49,7 +49,7 @@
           height: 16px;
           max-width: 300px;
           padding: 12px;
-          border-bottom: 1px solid $fluid-gray-300;
+          border-bottom: 1px solid $fluidx-gray-300;
           text-align: left;
 
           &.column-flush {
@@ -62,14 +62,14 @@
     thead {
       tr {
         th {
-          background-color: $fluid-white;
-          color: $fluid-gray-700;
+          background-color: $fluidx-white;
+          color: $fluidx-gray-700;
           font-size: 13px;
           font-weight: 500;
           white-space: nowrap;
 
           &.sticky-first-col {
-            background-color: $fluid-white;
+            background-color: $fluidx-white;
             position: sticky;
             position: -webkit-sticky;
             left: 0;
@@ -90,13 +90,13 @@
     tbody {
       tr {
         td {
-          color: $fluid-gray-900;
+          color: $fluidx-gray-900;
           font-size: 14px;
 
           &.sticky-first-col {
             @include position-sticky;
 
-            background-color: $fluid-white;
+            background-color: $fluidx-white;
             left: 0;
             z-index: 100;
           }
@@ -111,7 +111,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: $fluid-blue-050;
+          background-color: $fluidx-blue-050;
         }
       }
     }

+ 17 - 17
desktop/core/src/desktop/js/components/InlineAlert.vue

@@ -120,7 +120,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../components/styles/colors';
+  @import '../components/styles/variables';
   @import '../components/styles/mixins';
 
   .inline-alert {
@@ -130,41 +130,41 @@
     border-radius: $hue-panel-border-radius;
 
     // ea-unknown
-    background-color: $fluid-gray-050;
-    border: 1px solid $fluid-gray-500;
+    background-color: $fluidx-gray-050;
+    border: 1px solid $fluidx-gray-500;
     .alert-color {
-      color: $fluid-gray-500;
+      color: $fluidx-gray-500;
     }
 
     &.ea-success {
-      background-color: $fluid-green-050;
-      border: 1px solid $fluid-green-400;
+      background-color: $fluidx-green-050;
+      border: 1px solid $fluidx-green-400;
       .alert-color {
-        color: $fluid-green-500;
+        color: $fluidx-green-500;
       }
     }
 
     &.ea-error {
-      background-color: $fluid-red-050;
-      border: 1px solid $fluid-red-400;
+      background-color: $fluidx-red-050;
+      border: 1px solid $fluidx-red-400;
       .alert-color {
-        color: $fluid-red-500;
+        color: $fluidx-red-500;
       }
     }
 
     &.ea-warning {
-      background-color: $fluid-orange-050;
-      border: 1px solid $fluid-orange-400;
+      background-color: $fluidx-orange-050;
+      border: 1px solid $fluidx-orange-400;
       .alert-color {
-        color: $fluid-orange-500;
+        color: $fluidx-orange-500;
       }
     }
 
     &.ea-info {
-      background-color: $fluid-blue-050;
-      border: 1px solid $fluid-blue-400;
+      background-color: $fluidx-blue-050;
+      border: 1px solid $fluidx-blue-400;
       .alert-color {
-        color: $fluid-blue-500;
+        color: $fluidx-blue-500;
       }
     }
 
@@ -191,7 +191,7 @@
     .inline-alert-title,
     .inline-alert-message,
     .inline-alert-details {
-      color: $fluid-gray-900;
+      color: $fluidx-gray-900;
     }
 
     .inline-alert-message {

+ 2 - 2
desktop/core/src/desktop/js/components/Modal.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import './styles/colors';
+@import './styles/variables';
 @import './styles/mixins';
 
 .hue-modal-mask {
@@ -58,7 +58,7 @@
 
     width: 500px;
     margin: 0 auto;
-    background-color: $fluid-white;
+    background-color: $fluidx-white;
     border-radius: $hue-panel-border-radius;
 
     .hue-modal-header {

+ 2 - 2
desktop/core/src/desktop/js/components/Paginator.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import 'styles/colors';
+@import './styles/variables';
 
 .hue-paginator {
   width: 100%;
@@ -31,7 +31,7 @@
 
   .navigation-actions {
     a {
-      color: $fluid-gray-700;
+      color: $fluidx-gray-700;
 
       &.disabled {
         cursor: default;

+ 4 - 4
desktop/core/src/desktop/js/components/SearchInput.scss

@@ -17,7 +17,7 @@
 */
 
 @import './styles/mixins';
-@import './styles/colors';
+@import './styles/variables';
 
 
 .hue-search-input {
@@ -26,7 +26,7 @@
   position: relative;
   border-radius: $hue-panel-border-radius;
   border: 1px solid $hue-border-color;
-  background-color: $fluid-white;
+  background-color: $fluidx-white;
   height: 30px;
   width: 250px;
 
@@ -68,7 +68,7 @@
       left: 10px;
       top: 6px;
       font-size: 16px;
-      color: $fluid-gray-700;
+      color: $fluidx-gray-700;
     }
 
     input {
@@ -92,7 +92,7 @@
       }
 
       &.hue-search-input-overlay {
-        color: $fluid-gray-500;
+        color: $fluidx-gray-500;
         outline: none;
         z-index: 1;
       }

+ 3 - 3
desktop/core/src/desktop/js/components/Spinner.scss

@@ -19,7 +19,7 @@
 @use 'sass:math';
 
 @import './styles/mixins';
-@import './styles/colors';
+@import './styles/variables';
 
 $spinner-label-ratio: math.div(2, 3);
 $spinner-large-size: 25px;
@@ -56,7 +56,7 @@ $spinner-xlarge-size: 50px;
 
   &.spinner-blackout {
     z-index: 999;
-    background-color: $fluid-white;
+    background-color: $fluidx-white;
   }
 
   .spinner-inner {
@@ -79,7 +79,7 @@ $spinner-xlarge-size: 50px;
 
     span {
       margin-left: 5px;
-      color: $fluid-gray-500;
+      color: $fluidx-gray-500;
     }
 
     &.spinner-center {

+ 6 - 6
desktop/core/src/desktop/js/components/Tabs.vue

@@ -84,7 +84,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './styles/colors';
+  @import './styles/variables';
 
   .hue-tabs {
     ul {
@@ -99,22 +99,22 @@
         border-bottom: 3px solid transparent;
         cursor: pointer;
         margin-right: 10px;
-        color: $fluid-gray-700;
+        color: $fluidx-gray-700;
 
         &:hover {
-          color: $fluid-blue-500;
+          color: $fluidx-blue-500;
         }
 
         &.active {
-          color: $fluid-blue-500;
-          border-bottom: 3px solid $fluid-blue-400;
+          color: $fluidx-blue-500;
+          border-bottom: 3px solid $fluidx-blue-400;
         }
       }
     }
     .hue-tab-container {
       position: relative;
       margin: 12px 0;
-      background-color: $fluid-white;
+      background-color: $fluidx-white;
     }
   }
 </style>

+ 2 - 2
desktop/core/src/desktop/js/components/TypeaheadInput.vue

@@ -44,7 +44,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import './styles/colors';
+  @import './styles/variables';
 
   .typeahead-input {
     position: relative;
@@ -69,7 +69,7 @@
     .typeahead-placeholder {
       z-index: 1;
       color: #ccc;
-      background-color: $fluid-white;
+      background-color: $fluidx-white;
       box-shadow: none;
     }
   }

+ 2 - 2
desktop/core/src/desktop/js/components/assist/AssistPanel.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import '../styles/colors';
+@import '../styles/variables';
 @import '../styles/mixins';
 
 .hue-assist-panel {
@@ -24,5 +24,5 @@
 
   padding-top: 5px;
   padding-left: 5px;
-  background-color: $fluid-gray-050;
+  background-color: $fluidx-gray-050;
 }

+ 2 - 2
desktop/core/src/desktop/js/components/assist/SqlAssistPanel.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import '../styles/colors';
+@import '../styles/variables';
 @import '../styles/mixins';
 
 .hue-sql-assist-panel {
@@ -68,7 +68,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: $fluid-gray-100;
+          background-color: $fluidx-gray-100;
         }
 
         &:focus {

+ 3 - 3
desktop/core/src/desktop/js/components/dropdown/DropdownDrawer.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import '../styles/colors';
+@import '../styles/variables';
 @import '../styles/mixins';
 
 .hue-dropdown-drawer {
@@ -35,7 +35,7 @@
     z-index: 1000;
     margin: 2px 0 0;
     padding: 0;
-    background-color: $fluid-white;
+    background-color: $fluidx-white;
     border: 1px solid $hue-border-color;
     border-radius: $hue-panel-border-radius;
 
@@ -54,7 +54,7 @@
       }
 
       li {
-        color: $fluid-gray-800;
+        color: $fluidx-gray-800;
 
         button,
         a {

+ 1 - 1
desktop/core/src/desktop/js/components/dropdown/DropdownMenu.scss

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import '../styles/colors';
+@import '../styles/variables';
 
 .hue-dropdown-menu {
   .hue-dropdown-menu-inner {

+ 2 - 2
desktop/core/src/desktop/js/components/dropdown/DropdownMenuGroup.vue

@@ -40,10 +40,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../styles/colors';
+  @import '../styles/variables';
 
   .dropdown-group-header {
-    color: $fluid-gray-800;
+    color: $fluidx-gray-800;
     font-weight: 500;
     padding: 6px 10px;
   }

+ 2 - 2
desktop/core/src/desktop/js/components/dropdown/DropdownMenuText.vue

@@ -39,10 +39,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../styles/colors';
+  @import '../styles/variables';
 
   .hue-dropdown-item-text {
     padding: 6px 16px;
-    color: $fluid-gray-800;
+    color: $fluidx-gray-800;
   }
 </style>

+ 16 - 17
desktop/core/src/desktop/js/components/sidebar/drawer.scss

@@ -14,7 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../styles/colors';
 @import '../styles/variables';
 @import './variables';
 
@@ -59,7 +58,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
     align-items: center;
     justify-content: space-between;
     padding: 0 24px;
-    margin: 0 0 $fluid-spacing-xs 0;
+    margin: 0 0 $fluidx-spacing-xs 0;
     height: 56px;
     flex-shrink: 0;
   }
@@ -70,7 +69,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
   }
 
   .cdp-app-switcher-app-icon {
-    margin-left: $fluid-spacing-m - $sidebar-indicator-width;
+    margin-left: $fluidx-spacing-m - $sidebar-indicator-width;
   }
 
   .cdp-app-switcher-app-list {
@@ -86,7 +85,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
       transition: background-color $animation-duration-base;
 
       &:hover {
-        background-color: $fluid-gray-100;
+        background-color: $fluidx-gray-100;
       }
 
       svg {
@@ -98,7 +97,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
         display: inline-block;
         margin-left: 16px;
         font-size: 14px;
-        color: $fluid-gray-700;
+        color: $fluidx-gray-700;
       }
     }
   }
@@ -112,7 +111,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
 
 .sidebar-drawer-common-menu-header {
   height: $sidebar-header-height;
-  border-bottom: 1px solid $fluid-gray-100;
+  border-bottom: 1px solid $fluidx-gray-100;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -127,7 +126,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
 
 .sidebar-drawer-common-menu-body {
   padding: 24px;
-  border-bottom: 1px solid $fluid-gray-100;
+  border-bottom: 1px solid $fluidx-gray-100;
   flex-grow: 1;
   min-height: 0;
   overflow: auto;
@@ -154,15 +153,15 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
       height: 32px;
       display: flex;
       align-items: center;
-      color: $fluid-gray-700;
+      color: $fluidx-gray-700;
       padding: 0 24px;
 
       &:hover {
-        background-color: $fluid-gray-200;
+        background-color: $fluidx-gray-200;
       }
 
       svg {
-        margin-right: $fluid-spacing-xs;
+        margin-right: $fluidx-spacing-xs;
         font-size: 20px;
         height: 20px;
         width: 20px;
@@ -178,7 +177,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
   h6,
   p {
     padding: 0;
-    color: $fluid-gray-800;
+    color: $fluidx-gray-800;
     margin: 0 0 0.5em 0;
   }
 
@@ -276,7 +275,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
   }
 
   dd {
-    margin-bottom: $fluid-spacing-s;
+    margin-bottom: $fluidx-spacing-s;
   }
 
   ul {
@@ -334,12 +333,12 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
       height: 32px;
       display: flex;
       align-items: center;
-      color: $fluid-gray-700;
+      color: $fluidx-gray-700;
       padding: 0 24px;
       width: 100%;
 
       &:hover {
-        background-color: $fluid-gray-200;
+        background-color: $fluidx-gray-200;
       }
 
       svg {
@@ -390,7 +389,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
 
   .cdp-panel-header {
     height: $sidebar-header-height;
-    border-bottom: 1px solid $fluid-gray-300;
+    border-bottom: 1px solid $fluidx-gray-300;
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -403,7 +402,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
       text-overflow: ellipsis;
       font-size: 20px;
       font-weight: 400;
-      color: $fluid-gray-900;
+      color: $fluidx-gray-900;
     }
 
     img {
@@ -425,7 +424,7 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
       text-overflow: ellipsis;
       font-size: 16px;
       font-weight: 400;
-      color: $fluid-gray-900;
+      color: $fluidx-gray-900;
       margin-bottom: 20px;
     }
   }

+ 3 - 4
desktop/core/src/desktop/js/components/sidebar/hueSidebar.scss

@@ -14,7 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../styles/colors';
 @import '../styles/variables';
 
 .sidebar {
@@ -22,11 +21,11 @@
   // This overrides global scrollbar styles, temporary until the global ones are removed.
   ::-webkit-scrollbar-thumb {
     border: none;
-    background-color: $fluid-gray-900;
+    background-color: $fluidx-gray-900;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: $fluid-gray-700;
+    background-color: $fluidx-gray-700;
   }
 
   &.sidebar-collapsed {
@@ -36,7 +35,7 @@
       display: block;
 
       > svg {
-        color: $fluid-white;
+        color: $fluidx-white;
         height: 30px;
         width: 110px;
       }

+ 10 - 11
desktop/core/src/desktop/js/components/sidebar/sidebar.scss

@@ -14,7 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../styles/colors';
 @import '../styles/mixins';
 @import '../styles/variables';
 @import './variables';
@@ -108,8 +107,8 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  color: $fluid-white;
-  padding: 0 0 0 $fluid-spacing-m;
+  color: $fluidx-white;
+  padding: 0 0 0 $fluidx-spacing-m;
   font-size: 16px;
 
   & > a {
@@ -121,7 +120,7 @@
 
 .sidebar-app-switcher-trigger {
   transition: font-size $sidebar-animation-duration-base;
-  margin-right: $fluid-spacing-xxs;
+  margin-right: $fluidx-spacing-xxs;
   flex-shrink: 0;
   font-size: 20px;
   color: $sidebar-default-text-color;
@@ -138,7 +137,7 @@
 }
 
 .sidebar-header-product-text-logo {
-  margin-left: $fluid-spacing-xxs;
+  margin-left: $fluidx-spacing-xxs;
   white-space: nowrap;
   overflow: hidden;
   height: 40px;
@@ -147,7 +146,7 @@
 .sidebar-body {
   flex: auto;
   overflow: hidden auto;
-  padding-top: $fluid-spacing-m;
+  padding-top: $fluidx-spacing-m;
   position: relative;
 
   > div {
@@ -176,12 +175,12 @@
   display: flex;
   align-items: center;
   color: $sidebar-default-text-color;
-  padding-left: $fluid-spacing-m;
+  padding-left: $fluidx-spacing-m;
 }
 
 .sidebar-sidebar-section-name {
   opacity: 1;
-  margin-top: $fluid-spacing-s;
+  margin-top: $fluidx-spacing-s;
   white-space: nowrap;
 }
 
@@ -219,7 +218,7 @@
   width: 20px;
   display: flex;
   justify-content: center;
-  margin-right: $fluid-spacing-xs;
+  margin-right: $fluidx-spacing-xs;
   transition-duration: $sidebar-animation-duration-base;
   // using the `all` syntax seemed to cause the icon color change to be delayed
   // compared to the rest of the icon.
@@ -253,7 +252,7 @@
 
   .sidebar-sidebar-item-accordion-sub-item {
     width: $sidebar-width;
-    margin-left: $fluid-spacing-s;
+    margin-left: $fluidx-spacing-s;
   }
 }
 
@@ -374,7 +373,7 @@
 }
 
 .sidebar-footer-version-number {
-  margin-left: $fluid-spacing-m;
+  margin-left: $fluidx-spacing-m;
   color: $sidebar-default-text-color;
   flex-grow: 1;
   font-family: Roboto Mono, Menlo, Monaco, Consolas, "Courier New", monospace;

+ 2 - 3
desktop/core/src/desktop/js/components/sidebar/variables.scss

@@ -14,7 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../styles/colors';
 @import '../styles/variables';
 
 $sidebar-selection-color: $hue-primary-color-dark !default;
@@ -22,8 +21,8 @@ $sidebar-width: 248px;
 $sidebar-collapsed-width: 56px;
 $sidebar-bg-color: #132329;
 $sidebar-overflow-indicator-color: #517989;
-$sidebar-default-text-color: $fluid-gray-400;
-$sidebar-hover-color: $fluid-white;
+$sidebar-default-text-color: $fluidx-gray-400;
+$sidebar-hover-color: $fluidx-white;
 $sidebar-item-height: 40px;
 $sidebar-animation-duration-base: $animation-duration-base;
 $sidebar-header-height: 56px;

+ 0 - 0
desktop/core/src/desktop/js/components/styles/hue5-globals.scss → desktop/core/src/desktop/js/components/styles/_classes.scss


+ 2 - 2
desktop/core/src/desktop/js/components/styles/mixins.scss → desktop/core/src/desktop/js/components/styles/_mixins.scss

@@ -15,7 +15,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
-@import './colors.scss';
+@import './variables.scss';
 
 /*
 
@@ -41,7 +41,7 @@ $hue-panel-border-radius: 3px;
 .hue-box {
   padding: 10px;
   overflow: hidden;
-  border: 1px solid $fluid-gray-300;
+  border: 1px solid $fluidx-gray-300;
   border-radius: $hue-panel-border-radius;
 }
 

+ 17 - 13
desktop/core/src/desktop/js/components/styles/variables.scss → desktop/core/src/desktop/js/components/styles/_variables.scss

@@ -24,29 +24,33 @@
 // Includes both spacing and color variables.
 @import '@cloudera/cuix-core/variables.scss';
 
-// TODO: These variables are named diferently. We should remove the usage.
-@import './colors';
-
 // Some handy variables used by cuix are only available as less variables where the
 // origin of the value can be either cuix or antd. Here we manually recreate the once we
 // want in Hue as sass variables.
 $animation-duration-base: 0.2s;
 $animation-duration-slow: 0.3s;
-$text-color: $fluid-gray-900;
+$text-color: $fluidx-gray-900;
 $line-height-base: 1.4285;
+$border-radius-base: 3px;
 
 $font-size-sm: 12px;
 $font-size-base: 14px;
 $font-size-lg: 16px;
 $font-size-xl: 20px;
 
-$fluid-spacing-xxs: 4px;
-$fluid-spacing-xs: 8px;
-$fluid-spacing-s: 16px;
-$fluid-spacing-m: 24px;
-$fluid-spacing-l: 32px;
-$fluid-spacing-xl: 40px;
-$fluid-spacing-xxl: 48px;
-$fluid-spacing-giant: 64px;
+// Specific HUE variables
+$hue-primary-color-dark: #0b7fad;
+$hue-primary-color-light: #dbe8f1;
+$hue-trunk: #9678d3;
+
+$hue-action-primary: $fluidx-blue-500;
+$hue-action-primary-hover: $fluidx-blue-700;
+$hue-action-danger: $fluidx-red-500;
+$hue-action-danger-hover: $fluidx-red-700;
+$hue-action-disabled: $fluidx-gray-200;
+
+$hue-border-color: $fluidx-gray-300;
+$hue-disabled-color: $fluidx-gray-200;
 
-$fluid-border-radius: 3px;
+$hue-error-color: $fluidx-red-500;
+$hue-warning-color: $fluidx-orange-400;

+ 0 - 105
desktop/core/src/desktop/js/components/styles/colors.scss

@@ -1,105 +0,0 @@
-/*
- Licensed to Cloudera, Inc. under one
- or more contributor license agreements.  See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership.  Cloudera, Inc. licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License.  You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-// All standard colors --------------------------------------
-
-$fluid-blue-050:                  #edf7ff;
-$fluid-blue-100:                  #bee2ff;
-$fluid-blue-200:                  #90ceff;
-$fluid-blue-300:                  #61bbff;
-$fluid-blue-400:                  #31a2ff;
-$fluid-blue-500:                  #008cff;
-$fluid-blue-600:                  #0074d2;
-$fluid-blue-700:                  #005ba6;
-$fluid-blue-800:                  #004379;
-$fluid-blue-900:                  #002b4d;
-
-$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:                  #1b2329;
-
-$fluid-slate-050:                 #f4f7f9;
-$fluid-slate-100:                 #cbdae0;
-$fluid-slate-200:                 #a2bbc5;
-$fluid-slate-300:                 #789aa8;
-$fluid-slate-400:                 #517989;
-$fluid-slate-500:                 #305868;
-$fluid-slate-600:                 #224452;
-$fluid-slate-700:                 #19323c;
-$fluid-slate-800:                 #132329;
-$fluid-slate-900:                 #0b1316;
-
-$fluid-green-050:                 #e5ffe5;
-$fluid-green-100:                 #caffca;
-$fluid-green-200:                 #acfbac;
-$fluid-green-300:                 #8cf28c;
-$fluid-green-400:                 #6be36b;
-$fluid-green-500:                 #4ccf4c;
-$fluid-green-600:                 #2fae2f;
-$fluid-green-700:                 #188618;
-$fluid-green-800:                 #0a5f0a;
-$fluid-green-900:                 #023c02;
-
-$fluid-orange-050:                #fff3e5;
-$fluid-orange-100:                #ffd9ac;
-$fluid-orange-200:                #ffbe73;
-$fluid-orange-300:                #ffa139;
-$fluid-orange-400:                #ff8400;
-$fluid-orange-500:                #f96702;
-$fluid-orange-600:                #ca4f01;
-$fluid-orange-700:                #9b3801;
-$fluid-orange-800:                #6c2500;
-$fluid-orange-900:                #3d1300;
-
-$fluid-red-050:                   #ffecec;
-$fluid-red-100:                   #ffc9c9;
-$fluid-red-200:                   #fea7a7;
-$fluid-red-300:                   #fe8484;
-$fluid-red-400:                   #fe6161;
-$fluid-red-500:                   #fe3f3f;
-$fluid-red-600:                   #ce2626;
-$fluid-red-700:                   #9e1414;
-$fluid-red-800:                   #6e0707;
-$fluid-red-900:                   #3d0000;
-
-$fluid-black:                     #000;
-$fluid-white:                     #fff;
-
-$hue-primary-color-dark:          #0b7fad;
-$hue-primary-color-light:         #dbe8f1;
-$hue-trunk:                       #9678d3;
-
-$hue-action-primary:              $fluid-blue-500;
-$hue-action-primary-hover:        $fluid-blue-700;
-$hue-action-danger:               $fluid-red-500;
-$hue-action-danger-hover:         $fluid-red-700;
-$hue-action-disabled:             $fluid-gray-200;
-
-$hue-border-color:                $fluid-gray-300;
-$hue-disabled-color:              $fluid-gray-200;
-
-$hue-error-color:                 $fluid-red-500;
-$hue-warning-color:               $fluid-orange-400;

+ 5 - 5
desktop/core/src/desktop/js/reactComponents/AppBanner/AppBanner.scss

@@ -14,16 +14,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../components/styles/colors.scss';
-@import '../../components/styles/mixins.scss';
+@use 'variables' as vars;
+@use 'mixins';
 
 .app-banner {
-  @include flex(0 0 auto);
+  @include mixins.flex(0 0 auto);
 }
 
 .app-banner--system {
   padding: 4px;
   text-align: center;
-  background-color: $fluid-blue-800;
-  color: $fluid-blue-050;
+  background-color: vars.$fluidx-blue-800;
+  color: vars.$fluidx-blue-050;
 }

+ 3 - 3
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.scss

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../../components/styles/colors';
+@use 'variables' as vars;
 
 .hue-file-chooser__modal .ant-modal-body {
   padding: 0;
@@ -22,7 +22,7 @@
 
   .hue-file-system__panel {
     height: 554px;
-    background-color: $fluid-gray-100;
+    background-color: vars.$fluidx-gray-100;
     padding-top: 20px;
 
     .ant-menu-item {
@@ -36,7 +36,7 @@
     }
 
     .ant-menu-item-selected {
-      background-color: $fluid-gray-300;
+      background-color: vars.$fluidx-gray-300;
     }
   }
 }

+ 3 - 2
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.scss

@@ -14,10 +14,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../../components/styles/colors';
+@use 'variables' as vars;
+
 
 .hue-file-chooser__button {
-  background-color: $hue-primary-color-dark;
+  background-color: vars.$hue-primary-color-dark;
   color: white;
   margin-left: 40px;
   margin-top: 12px;

+ 9 - 9
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../../components/styles/colors';
+@use 'variables' as vars;
 
 .hue-path-browser {
   display: flex;
@@ -37,11 +37,11 @@
 
     &:hover {
       cursor: text;
-      background-color: $fluid-gray-100;
+      background-color: vars.$fluidx-gray-100;
     }
 
     &:focus {
-      background-color: $fluid-gray-100;
+      background-color: vars.$fluidx-gray-100;
     }
   }
 }
@@ -63,11 +63,11 @@
     box-shadow: none;
 
     &:hover {
-      background-color: $fluid-gray-100;
+      background-color: vars.$fluidx-gray-100;
     }
 
     &:focus {
-      background-color: $fluid-gray-100;
+      background-color: vars.$fluidx-gray-100;
     }
   }
 }
@@ -82,7 +82,7 @@
   width: 200px;
 
   .hue-path-browser__dropdown {
-    background-color: $fluid-gray-200;
+    background-color: vars.$fluidx-gray-200;
     overflow-y: scroll;
     max-height: 200px;
   }
@@ -108,16 +108,16 @@
   .hue-path-browser-panel__button {
     border: none;
     box-shadow: none;
-    color: $fluid-blue-400;
+    color: vars.$fluidx-blue-400;
     padding: 0;
     width: 100%;
 
     &:hover {
-      border: $fluid-gray-300 solid 1px;
+      border: vars.$fluidx-gray-300 solid 1px;
     }
 
     &:focus {
-      border: $fluid-gray-300 solid 1px;
+      border: vars.$fluidx-gray-300 solid 1px;
     }
   }
 }

+ 5 - 5
desktop/core/src/desktop/js/reactComponents/PushDrawer/Drawer/Drawer.scss

@@ -14,17 +14,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@use '../../../components/styles/hue5-globals.scss';
-@import '../../../components/styles/variables';
+@use 'classes';
+@use 'variables' as vars;
 
-$border-color: $fluid-gray-300;
+$border-color: vars.$fluidx-gray-300;
 
 .antd {
   .hue-push-drawer__drawer {
     position: absolute;
     height: 100%;
-    transition: $animation-duration-base;
-    padding: $fluid-spacing-s;
+    transition: vars.$animation-duration-base;
+    padding: vars.$fluidx-spacing-s;
   }
 
   .hue-push-drawer__drawer--left {

+ 3 - 3
desktop/core/src/desktop/js/reactComponents/PushDrawer/DrawerHeader/DrawerHeader.scss

@@ -14,15 +14,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@use '../../../components/styles/hue5-globals.scss';
-@import '../../../components/styles/variables';
+@use 'classes';
+@use 'variables' as vars;
 
 .antd {
   .hue-push-drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: $fluid-spacing-s;
+    margin-bottom: vars.$fluidx-spacing-s;
   }
 
   .hue-push-drawer-header__title {

+ 4 - 4
desktop/core/src/desktop/js/reactComponents/PushDrawer/PushDrawer.scss

@@ -14,10 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@use '../../components/styles/hue5-globals.scss';
-@import '../../components/styles/variables';
+@use 'classes';
+@use 'variables' as vars;
 
-$spacing: $fluid-spacing-s;
+$spacing: vars.$fluidx-spacing-s;
 
 // The .antd wrapper is needed to bind closer than the reset-globals.less
 // which resets stuff like borders etc needed for antd components.
@@ -30,7 +30,7 @@ $spacing: $fluid-spacing-s;
 
   .hue-push-drawer__content {
     position: absolute;
-    transition: $animation-duration-base;
+    transition: vars.$animation-duration-base;
     height: 100%;
     width: 100%;
     padding: $spacing;

+ 3 - 3
desktop/core/src/desktop/js/reactComponents/Toolbar/ToolbarButton/ToolbarButton.scss

@@ -4,7 +4,7 @@
 
 $antd-btn-padding-horizontal: 12px;
 $focus-border-width: 3px;
-$focus-border-color: $fluid-blue-200;
+$focus-border-color: $fluidx-blue-200;
 
 @mixin tab-focus-apparence() {
   // Prevent antd transition when modifying padding to allow
@@ -13,7 +13,7 @@ $focus-border-color: $fluid-blue-200;
 
   &:focus-visible {
     border-color: $focus-border-color;
-    border-radius: $fluid-border-radius;
+    border-radius: $border-radius-base;
     transition: none;
   }
 }
@@ -52,7 +52,7 @@ $focus-border-color: $fluid-blue-200;
       span {
         display: flex;
         align-items: center;
-        gap: $fluid-spacing-xxs;
+        gap: $fluidx-spacing-xxs;
       }
     }
 

+ 3 - 3
desktop/core/src/desktop/js/reactComponents/Toolbar/ToolbarShared.scss

@@ -1,7 +1,7 @@
-@import '../../components/styles/variables';
+@use 'variables' as vars;
 
-$toolbar-border-color: $fluid-gray-300;
-$toolbar-background-color: $fluid-gray-050;
+$toolbar-border-color: vars.$fluidx-gray-300;
+$toolbar-background-color: vars.$fluidx-gray-050;
 $toolbar-height-small: 32px;
 $toolbar-height-medium: 40px;
 $toolbar-height-large: 48px;

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 6 - 24
desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -2,36 +2,18 @@
 // in multiple places where not intended. So in order to utilize the components locally
 // without leaking styles we wrap it all in an antd class. Since ant-modal-root likely
 // is placed outside the .antd wrapper we need to add the styles there as well.
+
+/* stylelint-disable no-invalid-position-at-import-rule */
+
 .antd,
 .ant-modal-root {
-  /* stylelint-disable no-invalid-position-at-import-rule */
-
   // We need to reset some global styles from Bootstrap to prevent them from
   // interfering with the Antd styles
   @import './reset-globals.less';
 
   // Import global antd styles
-  @root-entry-name: variable;
-  @import 'node_modules/antd/es/style/core/index.less';
-  @import (reference) 'node_modules/antd/es/style/themes/default.less';
-
-  // Import the styles for the actual components used
-  @import 'node_modules/antd/es/button/style/index.less';
-  @import 'node_modules/antd/es/modal/style/index.less';
-  @import 'node_modules/antd/es/skeleton/style/index.less';
-  @import 'node_modules/antd/es/menu/style/index.less';
-  @import 'node_modules/antd/es/spin/style/index.less';
-  @import 'node_modules/antd/es/segmented/style/index.less';
-  @import 'node_modules/antd/es/select/style/index.less';
-  @import 'node_modules/antd/es/divider/style/index.less';
-  @import 'node_modules/antd/es/breadcrumb/style/index.less';
-  @import 'node_modules/antd/es/input/style/index.less';
-  @import 'node_modules/antd/es/dropdown/style/index.less';
-  @import 'node_modules/antd/es/tooltip/style/index.less';
-  @import 'node_modules/antd/es/grid/style/index.less';
-  @import 'node_modules/antd/es/pagination/style/index.less';
-
-  /* stylelint-enable no-invalid-position-at-import-rule */
+  @import 'antd/dist/antd.less';
+  @import 'node_modules/cuix/dist/styles/variables.less';
 
   // Required global overrides:
   .ant-modal-mask,
@@ -49,7 +31,7 @@ body.ant-scrolling-effect {
   width: 100% !important;
 }
 
-/* stylelint-disable no-invalid-position-at-import-rule */
+// We need these styles available outside the .antd wrapper
 @import 'antd/es/menu/style/index.less';
 @import 'antd/es/style/core/motion.less';
 @import 'antd/es/dropdown/style/index.less';

+ 11 - 3
webpack.config.js

@@ -61,7 +61,17 @@ const config = {
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: ['style-loader', 'css-loader', {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              includePaths: [
+                'desktop/core/src/desktop/js/components/styles',
+                'node_modules',
+              ],
+            },
+          },
+        },]
       },
       {
         test: /\.less$/i,
@@ -112,8 +122,6 @@ const config = {
     maxAssetSize: 400 * 1024 // 400kb
   },
   plugins: getPluginConfig(BUNDLES.HUE).concat([
-    // Needed to wrap antd and prevent it from affecting global styles
-    new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, `${__dirname}/desktop/core/static/desktop/less/root-wrapped-antd.less`),
     new CleanWebpackPlugin([`${__dirname}/desktop/core/src/desktop/static/desktop/js/bundles/hue`]),    
   ]),
   resolve: {

Some files were not shown because too many files changed in this diff