Add theme variables (#1661)

Author: ia3andy

base/src/main/resources/web/community-app/theme.scss

@@ -12,6 +12,9 @@
 
   --textColor: white;
 
+  --mainTitleFontWeight: 100;
+  --mainTitleTextTransform: uppercase;
+
   --primary: #71aeef;
   --secondary: #4695eb;
   --tertiary: #be9100;
@@ -28,6 +31,7 @@
 
   --buttonBorderColor: var(--primary);
 
+
   // Top container
   --topContainerTextColor: var(--textColor);
   --topContainerBg: var(--background);
@@ -56,6 +60,7 @@
   --mainContainerTextColor: var(--textColor);;
   --mainContainerBg: var(--background);
 
+  --mainContainerControlBarTextColor: white;
   --mainContainerControlBarBg: #06101A;
 
   // Next steps Modal
@@ -81,6 +86,7 @@
   // Extensions picker
   --originPlatformColor: #cd54e1;
 
+
   --extensionsPickerTextColor: var(--mainContainerTextColor);
   --extensionsPickerIdTextColor: var(--primary);
   --extensionsPickerListBg: var(--background3);
@@ -96,29 +102,35 @@
   --extensionsPickerDescriptionTextColorOnTablet: #ccc;
 
   --dropdownMenuBg: #363a50;
+  --dropdownMenuShadow: 0 4px 12px rgba(0, 0, 0, 1);
   --dropdownMenuTextColor: var(--textColor);;
 
-
+  --extensionsPickerSearchBg: transparent;
   --extensionsPickerSearchTextColor: var(--mainContainerTextColor);
   --extensionsPickerSearchBorderColor: var(--extensionsPickerSearchTextColor);
   --extensionsPickerSearchBorderColorOnFocus: var(--secondary);
   --extensionsPickerSearchPlaceholderColor: #bebebe;
   --extensionsPickerSearchClearButtonBg: #404955;
+  --extensionsPickerSearchIconColor: var(--extensionsPickerSearchTextColor);
   --extensionsPickerSearchIconBg: var(--mainContainerControlBarBg);
 
+  --selectedExtensionAlertInfoBg: black;
+  --selectedExtensionAlertInfoTextColor: white;
   --clearSelectedExtensionButtonBorderColor: var(--warningColor);
   --clearSelectedExtensionButtonTextColor: var(--mainContainerTextColor);
 
   // Presets
+  --presetsPanelBg: var(--extensionsPickerListBg);
   --presetsTitleTextColor: var(--mainContainerTextColor);
   --presetsCardBorderColor: var(--background);
   --presetsCardTextColor: var(--textColor);
   --presetsCardBackgroundColor: transparent;
+  --presetsCardHoverBackgroundColor: #09141F;
 
   // Copy to clipboard
-  --copyToClipboardBackgroundColor: #1f1f1f;
-  --copyToClipboardBodyBackgroundColor: #1f1f1f;
-  --copyToClipboardHeaderTextColor: #b4b4b4;
+  --copyToClipboardBackgroundColor: var(--dropdownMenuBg);
+  --copyToClipboardBodyBackgroundColor: var(--background3);
+  --copyToClipboardHeaderTextColor: var(--dropdownMenuTextColor);
   --copyToClipboardBodyTextColor: var(--tertiary);
 
   // Header

base/src/main/resources/web/lib/components/code-quarkus.scss

@@ -14,6 +14,11 @@ code {
   monospace;
 }
 
+.main-title, .main-title * {
+  font-weight: var(--mainTitleFontWeight) !important;
+  text-transform: var(--mainTitleTextTransform) !important;
+}
+
 .responsive-container {
   max-width: 1200px;
 
@@ -124,6 +129,7 @@ button.btn, a.btn {
     }
 
     &.github {
+      color: var(--modalTextColor);
       background-color: transparent;
     }
   }
@@ -196,14 +202,15 @@ button.btn.btn-light {
 
 .quarkus-project-edition-form .dropdown-menu {
   background-color: var(--dropdownMenuBg);
+  box-shadow: var(--dropdownMenuShadow);
   padding: 0;
 
   .dropdown-item {
     display: flex;
+    align-items: center;
     height: 30px;
     border: none;
     line-height: 30px;
-    font-weight: bold;
     width: 100%;
     padding: 0 0 0 20px;
     color: var(--dropdownMenuTextColor);
@@ -246,6 +253,7 @@ button.btn.btn-light {
   max-width: none;
   color: var(--dropdownMenuTextColor);
   background-color: var(--copyToClipboardBackgroundColor);
+  box-shadow: var(--dropdownMenuShadow);
   margin: 9px;
   border: none;
   border-radius: 6px;
@@ -257,7 +265,6 @@ button.btn.btn-light {
     font-size: 1rem;
     padding: 10px;
     margin-bottom: 0;
-    font-weight: 100;
     background-color: transparent;
     border: none;
     color: var(--copyToClipboardHeaderTextColor);

base/src/main/resources/web/lib/components/extensions-picker/extension-row.scss

@@ -113,13 +113,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.7rem;
+    font-size: 0.8rem;
     line-height: 20px;
     margin: 5px 5px;
     padding: 0 7px;
     height: 20px;
     vertical-align: middle;
-    font-family: var(--monospaceFontFamily), monospace;
     white-space: nowrap;
     text-transform: lowercase;
     border-radius: 20px;
@@ -157,7 +156,6 @@
       cursor: pointer;
 
       display: flex;
-      font-weight: 400;
       align-items: center;
       justify-content: space-between;
     }

base/src/main/resources/web/lib/components/extensions-picker/extension-search-bar.scss

@@ -26,16 +26,15 @@
   }
 
   .button-toggle-list {
-    font-weight: 100;
-    text-transform: uppercase;
     height: 40px;
     background: none;
     border: none;
     display: flex;
     cursor: pointer;
     align-items: center;
     appearance: none;
-    color: var(--textColor);
+    color: inherit;
+    font-size: 1.1rem;
 
     svg {
       margin: 0 !important;
@@ -57,12 +56,15 @@
     justify-content: center;
     height: 42px;
     gap: 5px;
+    background-color: var(--extensionsPickerSearchBg);
+
     .search-icon {
       flex-basis: 40px;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--extensionsPickerSearchIconColor);
       background-color: var(--extensionsPickerSearchIconBg);
     }
 
@@ -108,6 +110,7 @@
 
     margin: 20px 0 0;
     background-color: var(--mainContainerControlBarBg);
+    color: var(--mainContainerControlBarTextColor);
     display: flex;
 
     padding: 0 5px;
@@ -129,8 +132,6 @@
         display: none;
         align-items: center;
         height: 100%;
-        font-weight: 100;
-        text-transform: uppercase;
       }
 
       svg {
@@ -141,7 +142,7 @@
     .search-results-info {
       display: flex;
       align-items: center;
-      padding: 0 5px;
+      padding: 0 10px;
 
       .result-count {
 
@@ -151,8 +152,6 @@
         margin-right: 5px;
         cursor: pointer;
         font-weight: bold;
-        color: var(--mainContainerTextColor);
-
       }
 
     }
@@ -167,13 +166,11 @@
       padding: 0px 10px;
 
       &[aria-expanded="true"], &:hover {
-        font-weight: bold;
         background-color: var(--extensionsPickerSearchBorderColorOnFocus);
       }
     }
 
     .dropdown-menu {
-      padding: 10px;
 
       .filter-combo-actions {
         display: flex;
@@ -182,6 +179,7 @@
       }
 
       button {
+        height: 35px;
         cursor: pointer;
         color: var(--extensionsPickerSearchTextColor);
         display: flex;
@@ -191,15 +189,22 @@
         background-color: transparent;
         border: none;
         margin-right: 5px;
+        outline: none;
 
         svg {
           color: var(--primary);
         }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.1);
+          background-blend-mode: multiply;
+        }
       }
     }
 
     .dropdown-item {
-      padding-left: 5px;
+      padding: 0 10px;
+      height: 35px;
     }
 
     .dropdown-item.special-filter {

base/src/main/resources/web/lib/components/extensions-picker/extension-search-bar.tsx

@@ -51,7 +51,7 @@ function FiltersBar(props: ExtensionSearchBarProps) {
       ) : (props.showList ? (
         <Button className='button-toggle-list' aria-label="Toggle full list of extensions"
                 onClick={props.toggleShowList}><FaCaretUp/>Hide the full list</Button>) : (
-        <div className="toggle-list"><Button className='button-toggle-list'
+        <div className="toggle-list"><Button className='button-toggle-list main-title'
                                              aria-label="Toggle full list of extensions"
                                              onClick={props.toggleShowList}><FaCaretDown/>Toggle the full list of
           extensions</Button></div>

base/src/main/resources/web/lib/components/extensions-picker/presets-panel.tsx

@@ -12,17 +12,17 @@ interface PresetsProps {
 
 
 const PresetsPanelDiv = styled.div`
-    background-color: var(--background3);
+    background-color: var(--presetsPanelBg);
 
     .panel-title {
-        font-weight: 100;
-        text-transform: uppercase;
-        font-size: 1rem;
+        font-size: 1.1rem;
         margin: 10px 0 0 0;
         height: 40px;
         display: flex;
         align-items: center;
         padding: 10px;
+        background-color: var(--presetsPanelBg);
+        color: var(--presetsTitleTextColor);
         
         svg {
             margin-right: 5px;
@@ -47,8 +47,7 @@ const PresetsPanelDiv = styled.div`
     }
     
     .preset-card:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-        background-blend-mode: multiply;
+        background-color: var(--presetsCardHoverBackgroundColor);
     }
 
     .preset-title {
@@ -90,7 +89,7 @@ export const PresetsPanel = (props: PresetsProps) => {
   };
   return (
     <PresetsPanelDiv className="presets-panel">
-      <div className="panel-title"><FaRocket />&nbsp;Start with a preset of extensions</div>
+      <div className="panel-title main-title"><FaRocket />&nbsp;Start with a preset of extensions</div>
       <div className="presets-list">
         {presets.map(p => (
           <PresetCard key={p.key} preset={p} onClick={() => selectPreset(p)}/>