Feature: Variable addition in light and dark theme (#677)

* variables defined in light and dark constants in theme. * warning message removed * Fixing create app btn click opening form * blackShades removed and icon color in application card fixed * state change fixed * type of light and dark constants added Co-authored-by: Satbir Singh <satbir121@gmail.com>
2020-09-23 19:36:50 +05:30 · 2020-09-23 19:36:50 +05:30 · 028070eeb2
commit 028070eeb2
parent 577e9a7017
28 changed files with 792 additions and 228 deletions
--- a/app/client/src/components/ads/AppIcon.tsx
+++ b/app/client/src/components/ads/AppIcon.tsx
@ -14,7 +14,7 @@ import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg";

 import styled from "styled-components";
 import { Size } from "./Button";
-import { CommonComponentProps } from "./common";
+import { CommonComponentProps, Classes } from "./common";

 export const AppIconCollection = [
  "bag",
@ -72,7 +72,7 @@ const IconWrapper = styled.a<AppIconProps & { styledProps: cssAttributes }>`
    width: ${props => props.styledProps.width}px;
    height: ${props => props.styledProps.height}px;
    path {
-      fill: ${props => props.theme.colors.blackShades[7]};
+      fill: ${props => props.theme.colors.appIcon.normal};
    }
  }
 `;
@ -133,6 +133,7 @@ const AppIcon = (props: AppIconProps) => {
    <IconWrapper
      data-cy={props.cypressSelector}
      {...props}
+      className={Classes.APP_ICON}
      styledProps={styledProps}
    >
      {returnIcon}
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@ -81,19 +81,19 @@ const stateStyles = (
          bgColorPrimary = props.theme.colors[props.variant].darkest;
          borderColorPrimary = props.theme.colors[props.variant].darkest;
        }
-        txtColorPrimary = props.theme.colors.blackShades[6];
+        txtColorPrimary = props.theme.colors.button.disabledText;
        break;
      case Category.secondary:
        if (props.variant) {
          bgColorSecondary = props.theme.colors[props.variant].darkest;
          borderColorSecondary = props.theme.colors[props.variant].darker;
        }
-        txtColorSecondary = props.theme.colors.blackShades[6];
+        txtColorSecondary = props.theme.colors.button.disabledText;
        break;
      case Category.tertiary:
        bgColorTertiary = props.theme.colors.tertiary.darker;
        borderColorTertiary = props.theme.colors.tertiary.dark;
-        txtColorTertiary = props.theme.colors.blackShades[6];
+        txtColorTertiary = props.theme.colors.button.disabledText;
        break;
    }
  } else if (state === "main") {
--- a/app/client/src/components/ads/Checkbox.tsx
+++ b/app/client/src/components/ads/Checkbox.tsx
@ -19,16 +19,16 @@ const Checkmark = styled.span<{
  background-color: ${props =>
    props.isChecked
      ? props.disabled
-        ? props.theme.colors.blackShades[3]
+        ? props.theme.colors.checkbox.disabled
        : props.theme.colors.info.main
      : "transparent"};
  border: 2px solid
    ${props =>
      props.isChecked
        ? props.disabled
-          ? props.theme.colors.blackShades[3]
+          ? props.theme.colors.checkbox.disabled
          : props.theme.colors.info.main
-        : props.theme.colors.blackShades[4]};
+        : props.theme.colors.checkbox.unchecked};

  &::after {
    content: "";
@ -40,7 +40,9 @@ const Checkmark = styled.span<{
    height: 11px;
    border: solid
      ${props =>
-        props.disabled ? "#565656" : props.theme.colors.blackShades[9]};
+        props.disabled
+          ? props.theme.colors.checkbox.disabledCheck
+          : props.theme.colors.checkbox.normalCheck};
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
@ -57,7 +59,7 @@ const StyledCheckbox = styled.label<{
  font-size: ${props => props.theme.typography.p1.fontSize}px;
  line-height: ${props => props.theme.typography.p1.lineHeight}px;
  letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
-  color: ${props => props.theme.colors.blackShades[7]};
+  color: ${props => props.theme.colors.checkbox.labelColor};
  padding-left: ${props => props.theme.spaces[12] - 2}px;

  input {
--- a/app/client/src/components/ads/ColorSelector.tsx
+++ b/app/client/src/components/ads/ColorSelector.tsx
@ -29,7 +29,8 @@ const ColorBox = styled.div<{ selected: string; color: string }>`
  position: relative;

  &:hover {
-    box-shadow: 0px 0px 0px ${props => props.theme.spaces[1] - 1}px #353535;
+    box-shadow: 0px 0px 0px ${props => props.theme.spaces[1] - 1}px
+      ${props => props.theme.colors.colorSelector.shadow};
  }

  &:last-child {
@ -45,8 +46,8 @@ const ColorBox = styled.div<{ selected: string; color: string }>`
    top: ${props.theme.spaces[1] - 1}px
    width: ${props.theme.spaces[2] - 1}px
    height: ${props.theme.spaces[4] - 1}px
-    border: 1.5px solid ${props.theme.colors.blackShades[9]};
-    border-width: 0 1.5px 1.5px 0;
+    border: 2px solid ${props.theme.colors.colorSelector.checkmark};
+    border-width: 0 2px 2px 0;
    transform: rotate(45deg); 
  }`
      : `
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@ -27,8 +27,8 @@ const Selected = styled.div<{ isOpen: boolean; disabled?: boolean }>`
    ${props => props.theme.spaces[6]}px;
  background: ${props =>
    props.disabled
-      ? props.theme.colors.blackShades[2]
-      : props.theme.colors.blackShades[0]};
+      ? props.theme.colors.dropdown.header.disabledText
+      : props.theme.colors.dropdown.header.disabledBg};
  display: flex;
  align-items: center;
  justify-content: space-between;
@ -47,15 +47,15 @@ const Selected = styled.div<{ isOpen: boolean; disabled?: boolean }>`
  .${Classes.TEXT} {
    ${props =>
      props.disabled
-        ? `color: ${props.theme.colors.blackShades[6]}`
-        : `color: ${props.theme.colors.blackShades[7]}`};
+        ? `color: ${props.theme.colors.dropdown.text}`
+        : `color: ${props.theme.colors.dropdown.disabledText}`};
  }
 `;

 const DropdownWrapper = styled.div`
  margin-top: ${props => props.theme.spaces[2] - 1}px;
-  background: ${props => props.theme.colors.blackShades[3]};
-  box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.6);
+  background: ${props => props.theme.colors.dropdown.menuBg};
+  box-shadow: 0px 12px 28px ${props => props.theme.colors.dropdown.menuShadow};
  width: 100%;
 `;

@ -66,10 +66,14 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
  display: flex;
  align-items: center;
  ${props =>
-    props.selected ? `background: ${props.theme.colors.blackShades[4]}` : null};
+    props.selected
+      ? `background: ${props.theme.colors.dropdown.selected.bg}`
+      : null};
  .${Classes.TEXT} {
    ${props =>
-      props.selected ? `color: ${props.theme.colors.blackShades[9]}` : null};
+      props.selected
+        ? `color: ${props.theme.colors.dropdown.selected.text}`
+        : null};
  }
  .${Classes.ICON} {
    margin-right: ${props => props.theme.spaces[5]}px;
@ -77,20 +81,20 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
      path {
        ${props =>
          props.selected
-            ? `fill: ${props.theme.colors.blackShades[8]}`
-            : `fill: ${props.theme.colors.blackShades[6]}`};
+            ? `fill: ${props.theme.colors.dropdown.selected.icon}`
+            : `fill: ${props.theme.colors.dropdown.icon}`};
      }
    }
  }

  &:hover {
    .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
+      color: ${props => props.theme.colors.dropdown.selected.text};
    }
    .${Classes.ICON} {
      svg {
        path {
-          fill: ${props => props.theme.colors.blackShades[8]};
+          fill: ${props => props.theme.colors.dropdown.selected.icon};
        }
      }
    }
@ -100,7 +104,7 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
 const LabelWrapper = styled.div<{ label?: string }>`
  display: flex;
  flex-direction: column;
-  align-item: flex-start;
+  align-items: flex-start;

  ${props =>
    props.label
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@ -3,7 +3,7 @@ import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
 import styled from "styled-components";
 import Text, { TextType } from "./Text";
 import Spinner from "./Spinner";
-import { hexToRgba, Classes, CommonComponentProps } from "./common";
+import { Classes, CommonComponentProps } from "./common";
 import { noop } from "lodash";
 import Icon, { IconSize } from "./Icon";
 import { getThemeDetails } from "selectors/themeSelectors";
@ -55,9 +55,9 @@ const editModeBgcolor = (
  theme: any,
 ): string => {
  if ((isInvalid && isEditing) || savingState === SavingState.ERROR) {
-    return hexToRgba(theme.colors.danger.main, 0.08);
+    return theme.colors.editableText.dangerBg;
  } else if (!isInvalid && isEditing) {
-    return theme.colors.blackShades[2];
+    return theme.colors.editableText.bg;
  } else {
    return "transparent";
  }
@ -89,7 +89,7 @@ const TextContainer = styled.div<{

  &&& .bp3-editable-text-content {
    cursor: pointer;
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.editableText.color};
    overflow: hidden;
    text-overflow: ellipsis;
    ${props => (props.isEditing ? "display: none" : "display: block")};
@ -99,7 +99,7 @@ const TextContainer = styled.div<{
    border: none;
    outline: none;
    height: ${props => props.theme.spaces[13] + 3}px;
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.editableText.color};
    min-width: 100%;
    border-radius: ${props => props.theme.spaces[0]}px;
  }
--- a/app/client/src/components/ads/Icon.tsx
+++ b/app/client/src/components/ads/Icon.tsx
@ -101,7 +101,7 @@ const IconWrapper = styled.span<IconProps>`
    width: ${props => sizeHandler(props.size)}px;
    height: ${props => sizeHandler(props.size)}px;
    path {
-      fill: ${props => props.theme.colors.blackShades[6]};
+      fill: ${props => props.theme.colors.icon.normal};
    }
  }
  visibility: ${props => (props.invisible ? "hidden" : "visible")};
@ -109,14 +109,14 @@ const IconWrapper = styled.span<IconProps>`
  &:hover {
    cursor: pointer;
    path {
-      fill: ${props => props.theme.colors.blackShades[8]};
+      fill: ${props => props.theme.colors.icon.hover};
    }
  }

  &:active {
    cursor: pointer;
    path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.icon.active};
    }
  }
 `;
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import AppIcon, { AppIconName, AppIconCollection } from "./AppIcon";
 import { Size } from "./Button";
-import { CommonComponentProps } from "./common";
+import { CommonComponentProps, Classes } from "./common";

 type IconSelectorProps = CommonComponentProps & {
  onSelect?: (icon: AppIconName) => void;
@ -28,7 +28,7 @@ const IconBox = styled.div<{ selectedColor?: string }>`
  justify-content: center;
  align-items: center;
  background-color: ${props =>
-    props.selectedColor || props.theme.colors.blackShades[2]};
+    props.selectedColor || props.theme.colors.appIcon.background};
  margin: 0 ${props => props.theme.spaces[2]}px
    ${props => props.theme.spaces[2]}px 0;
  position: relative;
@ -36,6 +36,17 @@ const IconBox = styled.div<{ selectedColor?: string }>`
  &:nth-child(6n) {
    margin-right: ${props => props.theme.spaces[0]}px;
  }
+
+  ${props =>
+    props.selectedColor
+      ? `.${Classes.APP_ICON} {
+    svg {
+      path {
+        fill: #fff;
+      }
+    }
+  }`
+      : null};
 `;

 const IconSelector = (props: IconSelectorProps) => {
--- a/app/client/src/components/ads/Menu.tsx
+++ b/app/client/src/components/ads/Menu.tsx
@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { CommonComponentProps, Classes } from "./common";
+import { CommonComponentProps } from "./common";
 import styled from "styled-components";
 import { Popover } from "@blueprintjs/core/lib/esm/components/popover/popover";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
@ -14,18 +14,12 @@ type MenuProps = CommonComponentProps & {

 const MenuWrapper = styled.div`
  width: 234px;
-  background: ${props => props.theme.colors.blackShades[3]};
-  box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.75);
+  background: ${props => props.theme.colors.menu.background};
+  box-shadow: 0px 12px 28px ${props => props.theme.colors.menu.shadow};
 `;

 const MenuOption = styled.div`
-  color: ${props => props.theme.colors.blackShades[6]};
  font-family: ${props => props.theme.fonts[3]};
-  .${Classes.ICON} {
-    path {
-      fill: ${props => props.theme.colors.blackShades[6]};
-    }
-  }
 `;

 const Menu = (props: MenuProps) => {
@ -36,6 +30,7 @@ const Menu = (props: MenuProps) => {
      onOpening={props.onOpening}
      onClosing={props.onClosing}
      className={props.className}
+      portalClassName={props.className}
      data-cy={props.cypressSelector}
    >
      {props.target}
--- a/app/client/src/components/ads/MenuDivider.tsx
+++ b/app/client/src/components/ads/MenuDivider.tsx
@ -3,7 +3,7 @@ import styled from "styled-components";
 const MenuDivider = styled.div`
  margin: ${props => props.theme.spaces[1]}px
    ${props => props.theme.spaces[6]}px;
-  border-top: 1px solid #404040;
+  border-top: 1px solid ${props => props.theme.colors.menuBorder};
 `;

 export default MenuDivider;
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@ -18,21 +18,31 @@ const ItemRow = styled.a<{ disabled?: boolean }>`
  justify-content: space-between;
  text-decoration: none;
  padding: 0px ${props => props.theme.spaces[6]}px;
+  .${Classes.TEXT} {
+    color: ${props => props.theme.colors.menuItem.normalText};
+  }
+  .${Classes.ICON} {
+    svg {
+      path {
+        fill: ${props => props.theme.colors.menuItem.normalIcon};
+      }
+    }
+  }
  height: 38px;

  ${props =>
    !props.disabled
      ? ` 
    &:hover {
-      cursor: pointer;
      text-decoration: none;
-      background-color: ${props.theme.colors.blackShades[4]};
+      cursor: pointer;
+      background-color: ${props.theme.colors.menuItem.hoverBg};
      .${Classes.TEXT} {
-        color: ${props.theme.colors.blackShades[9]};
+        color: ${props.theme.colors.menuItem.hoverText};
      }
      .${Classes.ICON} {
        path {
-          fill: ${props.theme.colors.blackShades[9]};
+          fill: ${props.theme.colors.menuItem.hoverIcon};
        }
      }
    }`
--- a/app/client/src/components/ads/Radio.tsx
+++ b/app/client/src/components/ads/Radio.tsx
@ -44,7 +44,7 @@ const Radio = styled.label<{
  font-weight: ${props => props.theme.typography.p1.fontWeight};
  line-height: ${props => props.theme.typography.p1.lineHeight}px;
  letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.radio.text};
  ${props =>
    props.rows && props.rows > 0
      ? `flex-basis: calc(100% / ${props.rows})`
@ -71,7 +71,7 @@ const Radio = styled.label<{
    height: ${props => props.theme.spaces[8]}px;
    background-color: transparent;
    border: ${props => props.theme.spaces[1] - 2}px solid
-      ${props => props.theme.colors.blackShades[4]};
+      ${props => props.theme.colors.radio.border};
    border-radius: 50%;
    margin-top: ${props => props.theme.spaces[0]}px;
  }
--- a/app/client/src/components/ads/RectangularSwitcher.tsx
+++ b/app/client/src/components/ads/RectangularSwitcher.tsx
@ -30,7 +30,7 @@ const StyledSwitch = styled.label<{
    cursor: pointer;
    top: 0;
    left: 0;
-    border: 1px solid ${props => props.theme.colors.blackShades[5]};
+    border: 1px solid ${props => props.theme.colors.switch.border};
    background-color: ${props => props.theme.colors.info.main};
    width: 78px;
    height: 26px;
@ -43,7 +43,7 @@ const StyledSwitch = styled.label<{
 			width: 36px;
 			height: 20px;
 			top: 2px;
-	    background-color: ${props.theme.colors.blackShades[0]};
+	    background-color: ${props.theme.colors.switch.bg};
      left: ${props.value && !props.firstRender ? "38px" : "2px"};
    	transition: ${props.firstRender ? "0.4s" : "none"};
 		}
@ -54,17 +54,20 @@ const StyledSwitch = styled.label<{
  }

  input:checked + .slider:before {
-    background-color: ${props => props.theme.colors.blackShades[0]};
+    background-color: ${props => props.theme.colors.switch.hover.bg};
  }

  input:hover + .slider {
-    border: 1px solid ${props => props.theme.colors.blackShades[7]};
+    border: 1px solid ${props => props.theme.colors.switch.hover.border};
  }
 `;

 const Light = styled.div<{ value: boolean }>`
  .${Classes.TEXT} {
-    color: ${props => (props.value ? "#FFFFFF" : "#939090")};
+    color: ${props =>
+      props.value
+        ? props.theme.colors.switch.lightText
+        : props.theme.colors.switch.darkText};
    font-size: 10px;
    line-height: 12px;
    letter-spacing: -0.171429px;
@ -75,11 +78,11 @@ const Light = styled.div<{ value: boolean }>`
 `;

 const Dark = styled.div<{ value: boolean }>`
-  .${Classes.TEXT} {
+  &&&& .${Classes.TEXT} {
    font-size: 10px;
    line-height: 12px;
    letter-spacing: -0.171429px;
-    color: ${props => (!props.value ? "#FFFFFF" : "#939090")};
+    color: ${props => props.theme.colors.switch.lightText};
  }
  position: absolute;
  top: 3px;
--- a/app/client/src/components/ads/SearchInput.tsx
+++ b/app/client/src/components/ads/SearchInput.tsx
@ -41,10 +41,10 @@ const StyledInput = styled.input<
  letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
  text-overflow: ellipsis;

-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.searchInput.text};

  &::placeholder {
-    color: ${props => props.theme.colors.blackShades[5]};
+    color: ${props => props.theme.colors.searchInput.placeholder};
  }
 `;

@ -61,12 +61,14 @@ const InputWrapper = styled.div<{
    ${props => props.theme.spaces[6]}px;
  width: ${props => (props.fill ? "100%" : "210px")};
  background-color: ${props =>
-    props.variant === SearchVariant.SEAMLESS ? "transparent" : "#262626"};
+    props.variant === SearchVariant.SEAMLESS
+      ? "transparent"
+      : props.theme.colors.searchInput.bg};
  ${props =>
    props.variant === SearchVariant.BACKGROUND
      ? props.isFocused || props.value
        ? `box-shadow: 0px 1px 0px ${props.theme.colors.info.main}`
-        : `box-shadow: 0px 1px 0px ${props.theme.colors.blackShades[4]}`
+        : `box-shadow: 0px 1px 0px ${props.theme.colors.searchInput.border}`
      : null}
 `;

@ -82,8 +84,8 @@ const SearchIcon = styled.div<{
      circle {
        stroke: ${props =>
          props.isFocused || props.value
-            ? props.theme.colors.blackShades[7]
-            : props.theme.colors.blackShades[5]};
+            ? props.theme.colors.searchInput.icon.focused
+            : props.theme.colors.searchInput.icon.normal};
      }
    }
  }
--- a/app/client/src/components/ads/Spinner.tsx
+++ b/app/client/src/components/ads/Spinner.tsx
@ -31,7 +31,7 @@ const SvgContainer = styled.svg<SpinnerProp>`
 `;

 const SvgCircle = styled.circle`
-  stroke: ${props => props.theme.colors.blackShades[9]};
+  stroke: ${props => props.theme.colors.spinner};
  stroke-linecap: round;
  animation: ${dash} 1.5s ease-in-out infinite;
  stroke-width: ${props => props.theme.spaces[1]}px;
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@ -12,7 +12,7 @@ const Styles = styled.div`

    thead {
      tr {
-        background-color: ${props => props.theme.colors.blackShades[2]};
+        background-color: ${props => props.theme.colors.table.headerBg};

        th:first-child {
          padding: 0 ${props => props.theme.spaces[9]}px;
@ -21,7 +21,7 @@ const Styles = styled.div`
        th {
          padding: ${props => props.theme.spaces[5]}px 0;
          text-align: left;
-          color: ${props => props.theme.colors.blackShades[5]};
+          color: ${props => props.theme.colors.table.headerText};
          font-weight: ${props => props.theme.fontWeights[1]};
          font-size: ${props => props.theme.typography.h6.fontSize}px;
          line-height: ${props => props.theme.typography.h6.lineHeight}px;
@ -33,11 +33,11 @@ const Styles = styled.div`
          }

          &:hover {
-            color: ${props => props.theme.colors.blackShades[7]};
+            color: ${props => props.theme.colors.table.hover.headerColor};
            cursor: pointer;
            svg {
              path {
-                fill: ${props => props.theme.colors.blackShades[7]};
+                fill: ${props => props.theme.colors.table.hover.headerColor};
              }
            }
          }
@ -48,33 +48,33 @@ const Styles = styled.div`
    tbody {
      tr {
        td:first-child {
-          color: ${props => props.theme.colors.blackShades[7]};
+          color: ${props => props.theme.colors.table.rowTitle};
          padding: 0 ${props => props.theme.spaces[9]}px;
          font-weight: ${props => props.theme.fontWeights[1]};
        }

        td {
          padding: ${props => props.theme.spaces[4]}px 0;
-          color: ${props => props.theme.colors.blackShades[6]};
+          color: ${props => props.theme.colors.table.rowData};
          font-size: ${props => props.theme.typography.p1.fontSize}px;
          line-height: ${props => props.theme.typography.p1.lineHeight}px;
          letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
          font-weight: normal;
-          border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
+          border-bottom: 1px solid ${props => props.theme.colors.table.border};
        }

        &:hover {
-          background-color: ${props => props.theme.colors.blackShades[4]};
+          background-color: ${props => props.theme.colors.table.hover.rowBg};
          .${Classes.ICON} {
            path {
-              fill: ${props => props.theme.colors.blackShades[9]};
+              fill: ${props => props.theme.colors.table.hover.rowTitle};
            }
          }
          td:first-child {
-            color: ${props => props.theme.colors.blackShades[9]};
+            color: ${props => props.theme.colors.table.hover.rowTitle};
          }
          td {
-            color: ${props => props.theme.colors.blackShades[7]};
+            color: ${props => props.theme.colors.table.hover.rowData};
          }
        }
      }
--- a/app/client/src/components/ads/TableDropdown.tsx
+++ b/app/client/src/components/ads/TableDropdown.tsx
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CommonComponentProps, hexToRgba, Classes } from "./common";
+import { CommonComponentProps, Classes } from "./common";
 import { ReactComponent as DownArrow } from "assets/icons/ads/down_arrow.svg";
 import Text, { TextType } from "./Text";
 import styled from "styled-components";
@ -36,10 +36,10 @@ const OptionsWrapper = styled.div`
  width: 200px;
  display: flex;
  flex-direction: column;
-  background-color: ${props => props.theme.colors.blackShades[3]};
+  background-color: ${props => props.theme.colors.tableDropdown.bg};
  box-shadow: ${props => props.theme.spaces[0]}px
    ${props => props.theme.spaces[5]}px ${props => props.theme.spaces[13] - 2}px
-    ${props => hexToRgba(props.theme.colors.blackShades[0], 0.75)};
+    ${props => props.theme.colors.tableDropdown.shadow};
 `;

 const DropdownOption = styled.div<{
@ -51,7 +51,7 @@ const DropdownOption = styled.div<{
  cursor: pointer;
  ${props =>
    props.isSelected
-      ? `background-color: ${props.theme.colors.blackShades[4]}`
+      ? `background-color: ${props.theme.colors.tableDropdown.selectedBg}`
      : null};

  .${Classes.TEXT}:last-child {
@ -60,7 +60,7 @@ const DropdownOption = styled.div<{

  &:hover {
    .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
+      color: ${props => props.theme.colors.tableDropdown.selectedText};
    }
  }
 `;
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@ -30,10 +30,10 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
    display: flex;
    align-items: center;
    border-bottom: ${props => props.theme.spaces[1] - 2}px solid
-      ${props => props.theme.colors.blackShades[3]};
-    color: ${props => props.theme.colors.blackShades[6]};
+      ${props => props.theme.colors.tabs.border};
+    color: ${props => props.theme.colors.tabs.normal};
    path {
-      fill: ${props => props.theme.colors.blackShades[6]};
+      fill: ${props => props.theme.colors.tabs.normal};
    }
    ${props =>
      props.shouldOverflow &&
@ -57,17 +57,17 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
    position: relative;
  }
  .react-tabs__tab:hover {
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.tabs.hover};
    path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
    }
  }
  .react-tabs__tab--selected {
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.tabs.hover};
    background-color: transparent;

    path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
    }

    &::after {
@ -93,7 +93,7 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
    box-shadow: none;
    border-color: transparent;
    path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
    }
  }
 `;
--- a/app/client/src/components/ads/Text.tsx
+++ b/app/client/src/components/ads/Text.tsx
@ -38,16 +38,16 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
  let color = "";
  switch (props.type) {
    case TextType.P1:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
      break;
    case TextType.P2:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
      break;
    case TextType.P3:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
      break;
    default:
-      color = props.theme.colors.blackShades[7];
+      color = props.theme.colors.text.heading;
      break;
  }
  return color;
@ -70,7 +70,7 @@ const Text = styled.span.attrs((props: TextProps) => ({
  letter-spacing: ${props =>
    props.theme.typography[props.type].letterSpacing}px;
  color: ${props =>
-    props.highlight ? props.theme.colors.blackShades[9] : typeSelector(props)};
+    props.highlight ? props.theme.colors.text.hightlight : typeSelector(props)};
  text-transform: ${props => (props.case ? props.case : "none")};
 `;

--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@ -52,14 +52,14 @@ const boxStyles = (
  isValid: boolean,
  theme: any,
 ): boxReturnType => {
-  let bgColor = theme.colors.blackShades[0];
-  let color = theme.colors.blackShades[9];
-  let borderColor = theme.colors.blackShades[0];
+  let bgColor = theme.colors.textInput.normal.bg;
+  let color = theme.colors.textInput.normal.text;
+  let borderColor = theme.colors.textInput.normal.border;

  if (props.disabled) {
-    bgColor = theme.colors.blackShades[2];
-    color = theme.colors.blackShades[6];
-    borderColor = theme.colors.blackShades[2];
+    bgColor = theme.colors.textInput.disable.bg;
+    color = theme.colors.textInput.disable.text;
+    borderColor = theme.colors.textInput.disable.border;
  }
  if (!isValid) {
    bgColor = hexToRgba(theme.colors.danger.main, 0.1);
@ -83,7 +83,7 @@ const StyledInput = styled.input<
  color: ${props => props.inputStyle.color};

  &::placeholder {
-    color: ${props => props.theme.colors.blackShades[5]};
+    color: ${props => props.theme.colors.textInput.placeholder};
  }
  &:focus {
    border: 1px solid
--- a/app/client/src/components/ads/Toggle.tsx
+++ b/app/client/src/components/ads/Toggle.tsx
@ -29,8 +29,8 @@ const StyledToggle = styled.label<{
    left: 0;
    background-color: ${props =>
      props.isLoading
-        ? props.theme.colors.blackShades[3]
-        : props.theme.colors.blackShades[4]};
+        ? props.theme.colors.toggle.disable.off
+        : props.theme.colors.toggle.bg};
    transition: 0.4s;
    width: 46px;
    height: 23px;
@ -56,8 +56,8 @@ const StyledToggle = styled.label<{
      left: 2px;
      background-color: ${
        props.disabled && !props.value
-          ? lighten(props.theme.colors.tertiary.dark, 16)
-          : props.theme.colors.blackShades[9]
+          ? props.theme.colors.toggle.disabledSlider.off
+          : props.theme.colors.toggle.disabledSlider.on
      };
      box-shadow: ${
        props.value
@ -93,21 +93,21 @@ const StyledToggle = styled.label<{
  input:focus + .slider {
    background-color: ${props =>
      props.value
-        ? lighten(props.theme.colors.info.main, 12)
-        : lighten(props.theme.colors.blackShades[3], 16)};
+        ? props.theme.colors.toggle.hover.on
+        : props.theme.colors.toggle.hover.off};
  }

  input:disabled + .slider {
    cursor: not-allowed;
    background-color: ${props =>
      props.value && !props.isLoading
-        ? darken(props.theme.colors.info.darker, 20)
-        : props.theme.colors.tertiary.dark};
+        ? props.theme.colors.toggle.disable.on
+        : props.theme.colors.toggle.disable.off};
  }

  .${Classes.SPINNER} {
    circle {
-      stroke: ${props => props.theme.colors.blackShades[6]};
+      stroke: ${props => props.theme.colors.toggle.spinner};
    }
  }
 `;
--- a/app/client/src/components/ads/Tooltip.tsx
+++ b/app/client/src/components/ads/Tooltip.tsx
@ -19,21 +19,24 @@ const TooltipWrapper = styled.div<{ variant?: Variant }>`
    border-radius: 0px;
    background-color: ${props =>
      props.variant === "dark"
-        ? props.theme.colors.blackShades[0]
-        : props.theme.colors.blackShades[8]};
+        ? props.theme.colors.tooltip.darkBg
+        : props.theme.colors.tooltip.lightBg};
  }
  div.${Classes.POPOVER_ARROW} {
    display: block;
  }
  .${Classes.TOOLTIP} {
-    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.35);a
+    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.35);
  }
-  .${Classes.TOOLTIP} .${CsClasses.BP3_POPOVER_ARROW_BORDER},
-  &&&& .${Classes.TOOLTIP} .${CsClasses.BP3_POPOVER_ARROW_FILL} {
+  .${Classes.TOOLTIP}
+    .${CsClasses.BP3_POPOVER_ARROW_BORDER},
+    &&&&
+    .${Classes.TOOLTIP}
+    .${CsClasses.BP3_POPOVER_ARROW_FILL} {
    fill: ${props =>
      props.variant === "dark"
-        ? props.theme.colors.blackShades[0]
-        : props.theme.colors.blackShades[8]};
+        ? props.theme.colors.tooltip.darkBg
+        : props.theme.colors.tooltip.lightBg};
  }
 `;

--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@ -429,25 +429,226 @@ export const largeButton = css`
  letter-spacing: ${props => props.theme.typography.btnLarge.letterSpacing}px;
 `;

-export const dark = {
-  blackShades: [
-    // "#090707",
-    "#1A191C",
-    "#232324",
-    "#262626",
-    "#2B2B2B",
-    "#404040",
-    "#6D6D6D",
-    "#9F9F9F",
-    "#D4D4D4",
-    "#E9E9E9",
-    "#FFFFFF",
-  ],
+const darkShades = [
+  "#1A191C",
+  "#232324",
+  "#262626",
+  "#2B2B2B",
+  "#404040",
+  "#6D6D6D",
+  "#9F9F9F",
+  "#D4D4D4",
+  "#E9E9E9",
+  "#FFFFFF",
+] as const;
+
+const lightShades = [
+  "#FAFAFA",
+  "#F7F7F7",
+  "#F0F0F0",
+  "#E8E8E8",
+  "#C5C5C5",
+  "#A9A7A7",
+  "#939090",
+  "#716E6E",
+  "#4B4848",
+  "#302D2D",
+  "#090707",
+  "#FFFFFF",
+] as const;
+
+type ColorPalette = typeof darkShades[number] | typeof lightShades[number];
+
+type buttonVariant = {
+  main: string;
+  light: string;
+  dark: string;
+  darker: string;
+  darkest: string;
+};
+
+type ColorType = {
+  button: {
+    disabledText: ColorPalette;
+  };
+  tertiary: buttonVariant;
+  info: buttonVariant;
+  success: buttonVariant;
+  warning: buttonVariant;
+  danger: buttonVariant;
+  homepageBackground: string;
+  card: {
+    hoverBG: Color;
+    hoverBGOpacity: number;
+    hoverBorder: ColorPalette;
+    targetBg: string;
+    iconColor: ColorPalette;
+  };
+  appCardColors: string[];
+  text: {
+    normal: ColorPalette;
+    heading: ColorPalette;
+    hightlight: ColorPalette;
+  };
+  icon: {
+    normal: ColorPalette;
+    hover: ColorPalette;
+    active: ColorPalette;
+  };
+  appIcon: {
+    normal: ColorPalette;
+    background: ColorPalette;
+  };
+  menu: {
+    background: ColorPalette;
+    shadow: string;
+  };
+  menuItem: {
+    normalText: ColorPalette;
+    normalIcon: ColorPalette;
+    hoverIcon: ColorPalette;
+    hoverText: ColorPalette;
+    hoverBg: ColorPalette;
+  };
+  colorSelector: {
+    shadow: string;
+    checkmark: ColorPalette;
+  };
+  checkbox: {
+    disabled: ColorPalette;
+    unchecked: ColorPalette;
+    disabledCheck: string;
+    normalCheck: ColorPalette;
+    labelColor: ColorPalette;
+  };
+  dropdown: {
+    header: {
+      text: ColorPalette;
+      disabled: ColorPalette;
+      bg: ColorPalette;
+      disabledBg: ColorPalette;
+    };
+    menuBg: ColorPalette;
+    menuShadow: string;
+    selected: {
+      text: ColorPalette;
+      bg: ColorPalette;
+      icon: ColorPalette;
+    };
+    icon: ColorPalette;
+  };
+  toggle: {
+    bg: ColorPalette;
+    hover: {
+      on: string;
+      off: string;
+    };
+    disable: {
+      on: string;
+      off: ColorPalette;
+    };
+    disabledSlider: {
+      on: ColorPalette;
+      off: string;
+    };
+    spinner: ColorPalette;
+  };
+  textInput: {
+    disable: {
+      bg: ColorPalette;
+      text: ColorPalette;
+      border: ColorPalette;
+    };
+    normal: {
+      bg: ColorPalette;
+      text: ColorPalette;
+      border: ColorPalette;
+    };
+    placeholder: ColorPalette;
+  };
+  menuBorder: ColorPalette;
+  editableText: {
+    color: ColorPalette;
+    bg: string;
+    dangerBg: string;
+  };
+  radio: {
+    disable: string;
+    border: ColorPalette;
+  };
+  searchInput: {
+    placeholder: ColorPalette;
+    text: ColorPalette;
+    border: ColorPalette;
+    bg: ColorPalette;
+    icon: {
+      focused: ColorPalette;
+      normal: ColorPalette;
+    };
+  };
+  spinner: ColorPalette;
+  tableDropdown: {
+    bg: ColorPalette;
+    selectedBg: ColorPalette;
+    selectedText: ColorPalette;
+    shadow: string;
+  };
+  tabs: {
+    normal: ColorPalette;
+    hover: ColorPalette;
+    border: ColorPalette;
+  };
+  settingHeading: ColorPalette;
+  table: {
+    headerBg: ColorPalette;
+    headerText: ColorPalette;
+    rowData: ColorPalette;
+    rowTitle: ColorPalette;
+    border: ColorPalette;
+    hover: {
+      headerColor: ColorPalette;
+      rowBg: ColorPalette;
+      rowTitle: ColorPalette;
+      rowData: ColorPalette;
+    };
+  };
+  applications: {
+    bg: ColorPalette;
+    textColor: ColorPalette;
+    orgColor: ColorPalette;
+    iconColor: ColorPalette;
+    hover: {
+      bg: ColorPalette;
+      textColor: ColorPalette;
+      orgColor: ColorPalette;
+    };
+  };
+  switch: {
+    border: ColorPalette;
+    bg: ColorPalette;
+    hover: {
+      border: ColorPalette;
+      bg: ColorPalette;
+    };
+    lightText: ColorPalette;
+    darkText: ColorPalette;
+  };
+  queryTemplate: {
+    bg: ColorPalette;
+    color: ColorPalette;
+  };
+};
+
+export const dark: ColorType = {
+  button: {
+    disabledText: darkShades[6],
+  },
  tertiary: {
    main: "#D4D4D4",
    light: "#FFFFFF",
    dark: "#2B2B2B",
    darker: "#202021",
+    darkest: "#1A191C",
  },
  info: {
    main: "#CB4810",
@ -481,6 +682,9 @@ export const dark = {
  card: {
    hoverBG: Colors.BLACK,
    hoverBGOpacity: 0.5,
+    hoverBorder: darkShades[4],
+    targetBg: "rgba(0, 0, 0, 0.1)",
+    iconColor: darkShades[9],
  },
  appCardColors: [
    "#4F70FD",
@ -493,34 +697,174 @@ export const dark = {
    "#A8D76C",
    "#6C4CF1",
  ],
+  text: {
+    normal: darkShades[6],
+    heading: darkShades[7],
+    hightlight: darkShades[9],
+  },
+  icon: {
+    normal: darkShades[6],
+    hover: darkShades[8],
+    active: darkShades[9],
+  },
+  appIcon: {
+    normal: darkShades[9],
+    background: darkShades[1],
+  },
+  menu: {
+    background: darkShades[3],
+    shadow: "rgba(0, 0, 0, 0.75)",
+  },
+  menuItem: {
+    normalText: darkShades[7],
+    normalIcon: darkShades[6],
+    hoverIcon: darkShades[8],
+    hoverText: darkShades[9],
+    hoverBg: darkShades[4],
+  },
+  colorSelector: {
+    shadow: "#353535",
+    checkmark: darkShades[9],
+  },
+  checkbox: {
+    disabled: darkShades[3],
+    unchecked: darkShades[4],
+    disabledCheck: "#565656",
+    normalCheck: darkShades[9],
+    labelColor: darkShades[7],
+  },
+  dropdown: {
+    header: {
+      text: darkShades[7],
+      disabled: darkShades[6],
+      bg: darkShades[2],
+      disabledBg: darkShades[0],
+    },
+    menuBg: darkShades[3],
+    menuShadow: "rgba(0, 0, 0, 0.6)",
+    selected: {
+      text: darkShades[9],
+      bg: darkShades[4],
+      icon: darkShades[8],
+    },
+    icon: darkShades[6],
+  },
+  toggle: {
+    bg: darkShades[4],
+    hover: {
+      on: "#F56426",
+      off: "#5E5E5E",
+    },
+    disable: {
+      on: "#3D2219",
+      off: darkShades[3],
+    },
+    disabledSlider: {
+      on: darkShades[9],
+      off: "#565656",
+    },
+    spinner: darkShades[6],
+  },
+  textInput: {
+    disable: {
+      bg: darkShades[2],
+      text: darkShades[6],
+      border: darkShades[2],
+    },
+    normal: {
+      bg: darkShades[0],
+      text: darkShades[9],
+      border: darkShades[0],
+    },
+    placeholder: darkShades[5],
+  },
+  menuBorder: darkShades[4],
+  editableText: {
+    color: darkShades[9],
+    bg: darkShades[1],
+    dangerBg: "rgba(226, 44, 44, 0.08)",
+  },
+  radio: {
+    disable: "#565656",
+    border: darkShades[4],
+  },
+  searchInput: {
+    placeholder: darkShades[5],
+    text: darkShades[9],
+    border: darkShades[4],
+    bg: darkShades[2],
+    icon: {
+      focused: darkShades[7],
+      normal: darkShades[5],
+    },
+  },
+  spinner: darkShades[6],
+  tableDropdown: {
+    bg: darkShades[3],
+    selectedBg: darkShades[4],
+    selectedText: darkShades[9],
+    shadow: "rgba(0, 0, 0, 0.75)",
+  },
+  tabs: {
+    normal: darkShades[6],
+    hover: darkShades[9],
+    border: darkShades[3],
+  },
+  settingHeading: darkShades[9],
+  table: {
+    headerBg: darkShades[2],
+    headerText: darkShades[5],
+    rowData: darkShades[6],
+    rowTitle: darkShades[7],
+    border: darkShades[3],
+    hover: {
+      headerColor: darkShades[7],
+      rowBg: darkShades[4],
+      rowTitle: darkShades[9],
+      rowData: darkShades[7],
+    },
+  },
+  applications: {
+    bg: darkShades[1],
+    textColor: darkShades[7],
+    orgColor: darkShades[7],
+    iconColor: darkShades[7],
+    hover: {
+      bg: darkShades[4],
+      textColor: darkShades[8],
+      orgColor: darkShades[9],
+    },
+  },
+  switch: {
+    border: darkShades[5],
+    bg: darkShades[0],
+    hover: {
+      border: darkShades[7],
+      bg: darkShades[0],
+    },
+    lightText: darkShades[9],
+    darkText: darkShades[6],
+  },
+  queryTemplate: {
+    bg: darkShades[3],
+    color: darkShades[7],
+  },
 };

-export const light = {
-  blackShades: [
-    "#FAFAFA",
-    "#F7F7F7",
-    "#F0F0F0",
-    "#E8E8E8",
-    "#C5C5C5",
-    // "#EFEFEF",
-    // "#E7E7E7",
-    "#A9A7A7",
-    "#939090",
-    "#716E6E",
-    "#4B4848",
-    // "#4B4848",
-    "#302D2D",
-    // "#161414"
-  ],
+export const light: ColorType = {
+  button: {
+    disabledText: lightShades[6],
+  },
  tertiary: {
    main: "#716E6E",
    light: "#090707",
-    dark: "#F0F0F0",
+    dark: "#F7F7F7",
    darker: "#E8E8E8",
+    darkest: "#939090",
  },
  info: {
    main: "#F86A2B",
-    light: "#FB773C",
+    light: "#DC5B21",
    dark: "#BF4109",
    darker: "#FEEDE5",
    darkest: "#F7EBE6",
@ -550,6 +894,9 @@ export const light = {
  card: {
    hoverBG: Colors.WHITE,
    hoverBGOpacity: 0.7,
+    hoverBorder: lightShades[2],
+    targetBg: "rgba(0, 0, 0, 0.1)",
+    iconColor: lightShades[11],
  },
  appCardColors: [
    "#4266FD",
@ -562,6 +909,158 @@ export const light = {
    "#B0E968",
    "#9177FF",
  ],
+  text: {
+    normal: lightShades[8],
+    heading: lightShades[9],
+    hightlight: lightShades[11],
+  },
+  icon: {
+    normal: lightShades[4],
+    hover: lightShades[8],
+    active: lightShades[9],
+  },
+  appIcon: {
+    normal: lightShades[7],
+    background: lightShades[1],
+  },
+  menu: {
+    background: lightShades[11],
+    shadow: "rgba(0, 0, 0, 0.32)",
+  },
+  menuItem: {
+    normalText: lightShades[8],
+    normalIcon: lightShades[6],
+    hoverIcon: lightShades[8],
+    hoverText: lightShades[10],
+    hoverBg: lightShades[2],
+  },
+  colorSelector: {
+    shadow: lightShades[3],
+    checkmark: lightShades[11],
+  },
+  checkbox: {
+    disabled: lightShades[3],
+    unchecked: lightShades[4],
+    disabledCheck: lightShades[6],
+    normalCheck: lightShades[11],
+    labelColor: lightShades[9],
+  },
+  dropdown: {
+    header: {
+      text: lightShades[9],
+      disabled: darkShades[6],
+      bg: lightShades[2],
+      disabledBg: lightShades[1],
+    },
+    menuBg: lightShades[11],
+    menuShadow: "rgba(0, 0, 0, 0.32)",
+    selected: {
+      text: lightShades[9],
+      bg: lightShades[2],
+      icon: lightShades[8],
+    },
+    icon: lightShades[7],
+  },
+  toggle: {
+    bg: lightShades[4],
+    hover: {
+      on: "#E4500E",
+      off: lightShades[5],
+    },
+    disable: {
+      on: "#FDE0D2",
+      off: lightShades[3],
+    },
+    disabledSlider: {
+      off: lightShades[11],
+      on: lightShades[11],
+    },
+    spinner: lightShades[6],
+  },
+  textInput: {
+    disable: {
+      bg: lightShades[1],
+      text: darkShades[6],
+      border: lightShades[1],
+    },
+    normal: {
+      bg: lightShades[2],
+      text: lightShades[9],
+      border: lightShades[2],
+    },
+    placeholder: lightShades[6],
+  },
+  menuBorder: lightShades[3],
+  editableText: {
+    color: lightShades[10],
+    bg: "rgba(247, 247, 247, 0.8)",
+    dangerBg: "rgba(242, 43, 43, 0.06)",
+  },
+  radio: {
+    disable: lightShades[4],
+    border: lightShades[3],
+  },
+  searchInput: {
+    placeholder: lightShades[6],
+    text: lightShades[10],
+    border: lightShades[3],
+    bg: lightShades[1],
+    icon: {
+      focused: lightShades[7],
+      normal: lightShades[5],
+    },
+  },
+  spinner: lightShades[6],
+  tableDropdown: {
+    bg: lightShades[11],
+    selectedBg: lightShades[2],
+    selectedText: lightShades[9],
+    shadow: "rgba(0, 0, 0, 0.32)",
+  },
+  tabs: {
+    normal: lightShades[6],
+    hover: lightShades[10],
+    border: lightShades[3],
+  },
+  settingHeading: lightShades[9],
+  table: {
+    headerBg: lightShades[1],
+    headerText: lightShades[6],
+    rowData: lightShades[7],
+    rowTitle: lightShades[9],
+    border: lightShades[3],
+    hover: {
+      headerColor: lightShades[9],
+      rowBg: lightShades[2],
+      rowTitle: lightShades[10],
+      rowData: lightShades[9],
+    },
+  },
+  applications: {
+    bg: lightShades[2],
+    textColor: lightShades[7],
+    orgColor: lightShades[7],
+    iconColor: lightShades[7],
+    hover: {
+      bg: lightShades[3],
+      textColor: lightShades[8],
+      orgColor: lightShades[9],
+    },
+  },
+  switch: {
+    border: lightShades[5],
+    bg: lightShades[11],
+    hover: {
+      border: lightShades[7],
+      bg: lightShades[11],
+    },
+    lightText: lightShades[11],
+    darkText: lightShades[6],
+  },
+  queryTemplate: {
+    bg: lightShades[3],
+    color: lightShades[7],
+  },
 };

 export const theme: Theme = {
@ -664,6 +1163,10 @@ export const theme: Theme = {
  },
  drawerWidth: "80%",
  colors: {
+    tooltip: {
+      lightBg: lightShades[0],
+      darkBg: lightShades[10],
+    },
    callout: {
      note: {
        dark: {
@ -686,9 +1189,6 @@ export const theme: Theme = {
        },
      },
    },
-    radio: {
-      disabled: "#565656",
-    },
    appBackground: "#EFEFEF",
    primaryOld: Colors.GREEN,
    primaryDarker: Colors.JUNGLE_GREEN,
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@ -40,6 +40,7 @@ import { getThemeDetails } from "selectors/themeSelectors";
 import { useSelector } from "react-redux";
 import { UpdateApplicationPayload } from "api/ApplicationApi";
 import { getIsSavingAppName } from "selectors/applicationSelectors";
+import { Classes as CsClasses } from "components/ads/common";

 type NameWrapperProps = {
  hasReadPermission: boolean;
@ -57,7 +58,7 @@ const NameWrapper = styled((props: HTMLDivProps & NameWrapperProps) => (
    props.showOverlay &&
    `
      {
-        background-color: ${props.theme.colors.blackShades[4]};
+        background-color: ${props.theme.colors.card.hoverBorder}};
        justify-content: center;
        align-items: center;

@ -125,6 +126,14 @@ const Wrapper = styled(
  .bp3-card {
    border-radius: 0;
  }
+  .${CsClasses.APP_ICON} {
+    margin: 0 auto;
+    svg {
+      path {
+        fill: #fff;
+      }
+    }
+  }
 `;

 const ApplicationImage = styled.div`
@ -193,13 +202,16 @@ const ContextDropdownWrapper = styled.div`
  position: absolute;
  top: -6px;
  right: -3px;
-`;

-const StyledAppIcon = styled(AppIcon)`
-  margin: 0 auto;
-  svg {
-    path {
-      fill: #fff;
+  .${Classes.POPOVER_TARGET} {
+    span {
+      background: ${props => props.theme.colors.card.targetBg};
+
+      svg {
+        path {
+          fill: ${props => props.theme.colors.card.iconColor};
+        }
+      }
    }
  }
 `;
@ -379,7 +391,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
        hasReadPermission={hasReadPermission}
        backgroundColor={colorCode}
      >
-        <StyledAppIcon size={Size.large} name={appIcon} />
+        <AppIcon size={Size.large} name={appIcon} />
        {/* <Initials>{initials}</Initials> */}
        {showOverlay && (
          <div className="overlay">
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@ -174,8 +174,8 @@ const textIconStyles = (props: { color: string; hover: string }) => {
 const NewWorkspaceWrapper = styled.div`
  ${props => {
    return `${textIconStyles({
-      color: props.theme.colors.blackShades[7],
-      hover: props.theme.colors.blackShades[8],
+      color: props.theme.colors.applications.textColor,
+      hover: props.theme.colors.applications.hover.textColor,
    })}`;
  }}
 `;
@ -184,7 +184,7 @@ const ApplicationAddCardWrapper = styled(Card)`
  display: flex;
  flex-direction: column;
  // justify-content: center;
-  background: ${props => props.theme.colors.blackShades[2]};
+  background: ${props => props.theme.colors.applications.bg};
  align-items: center;
  width: ${props => props.theme.card.minWidth}px;
  height: ${props => props.theme.card.minHeight}px;
@ -205,12 +205,12 @@ const ApplicationAddCardWrapper = styled(Card)`
  }
  cursor: pointer;
  &:hover {
-    background: ${props => props.theme.colors.blackShades[4]};
+    background: ${props => props.theme.colors.applications.hover.bg};
  }
  ${props => {
    return `${textIconStyles({
-      color: props.theme.colors.blackShades[7],
-      hover: props.theme.colors.blackShades[8],
+      color: props.theme.colors.applications.textColor,
+      hover: props.theme.colors.applications.hover.textColor,
    })}`;
  }}
 `;
@ -260,8 +260,8 @@ const OrgNameWrapper = styled.div<{ disabled?: boolean }>`
 cursor: ${props => (!props.disabled ? "pointer" : "inherit")};
 ${props => {
  const color = props.disabled
-    ? props.theme.colors.blackShades[7]
-    : props.theme.colors.blackShades[9];
+    ? props.theme.colors.applications.orgColor
+    : props.theme.colors.applications.hover.orgColor[9];
  return `${textIconStyles({
    color: color,
    hover: color,
@ -271,6 +271,7 @@ ${props => {
 .${Classes.ICON} {
  display: ${props => (!props.disabled ? "inline" : "none")};;
  margin-left: 8px;
+  color: ${props => props.theme.colors.applications.iconColor};
 }
 `;

@ -405,41 +406,48 @@ const ApplicationsSection = () => {
                )}
              </OrgDropDown>
              <ApplicationCardsWrapper key={organization.id}>
-                <FormDialogComponent
-                  permissions={organization.userPermissions}
-                  permissionRequired={PERMISSION_TYPE.CREATE_APPLICATION}
-                  trigger={
-                    <PaddingWrapper>
-                      <ApplicationAddCardWrapper>
-                        <Icon
-                          className="t--create-app-popup"
-                          name={"plus"}
-                          size={IconSize.LARGE}
-                        ></Icon>
-                        <CreateNewLabel
-                          type={TextType.H4}
-                          className="createnew"
-                          // cypressSelector={"t--create-new-app"}
-                        >
-                          Create New
-                        </CreateNewLabel>
-                      </ApplicationAddCardWrapper>
-                    </PaddingWrapper>
-                  }
-                  Form={CreateApplicationForm}
-                  orgId={organization.id}
-                  title={"Create Application"}
-                />
+                {isPermitted(
+                  organization.userPermissions,
+                  PERMISSION_TYPE.CREATE_APPLICATION,
+                ) && (
+                  <PaddingWrapper>
+                    <FormDialogComponent
+                      permissions={organization.userPermissions}
+                      permissionRequired={PERMISSION_TYPE.CREATE_APPLICATION}
+                      trigger={
+                        <ApplicationAddCardWrapper>
+                          <Icon
+                            className="t--create-app-popup"
+                            name={"plus"}
+                            size={IconSize.LARGE}
+                          ></Icon>
+                          <CreateNewLabel
+                            type={TextType.H4}
+                            className="createnew"
+                            // cypressSelector={"t--create-new-app"}
+                          >
+                            Create New
+                          </CreateNewLabel>
+                        </ApplicationAddCardWrapper>
+                      }
+                      Form={CreateApplicationForm}
+                      orgId={organization.id}
+                      title={"Create Application"}
+                    />
+                  </PaddingWrapper>
+                )}
                {applications.map((application: any) => {
                  return (
                    application.pages?.length > 0 && (
-                      <ApplicationCard
-                        key={application.id}
-                        application={application}
-                        delete={deleteApplication}
-                        update={updateApplicationDispatch}
-                        duplicate={duplicateApplicationDispatch}
-                      />
+                      <PaddingWrapper>
+                        <ApplicationCard
+                          key={application.id}
+                          application={application}
+                          delete={deleteApplication}
+                          update={updateApplicationDispatch}
+                          duplicate={duplicateApplicationDispatch}
+                        />
+                      </PaddingWrapper>
                    )
                  );
                })}
--- a/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
@ -15,13 +15,13 @@ import { ExplorerURLParams } from "../helpers";
 import { QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";

 const Container = styled.div`
-  background-color: ${props => props.theme.colors.blackShades[3]};
+  background-color: ${props => props.theme.colors.queryTemplate.bg};
  color: ${props => props.theme.colors.textOnDarkBG};
  width: 250px;
 `;

 const TemplateType = styled.div`
-  color: ${props => props.theme.colors.blackShades[7]};
+  color: ${props => props.theme.colors.queryTemplate.color};
  padding: 8px;
  &:hover {
    cursor: pointer;
--- a/app/client/src/pages/common/ProfileDropdown.tsx
+++ b/app/client/src/pages/common/ProfileDropdown.tsx
@ -1,10 +1,10 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { CommonComponentProps } from "components/ads/common";
 import { getInitialsAndColorCode } from "utils/AppsmithUtils";
 import { useSelector } from "react-redux";
 import { getThemeDetails } from "selectors/themeSelectors";
 import Text, { TextType } from "components/ads/Text";
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { Position } from "@blueprintjs/core";
 import Menu from "components/ads/Menu";
 import ThemeSwitcher from "./ThemeSwitcher";
@ -32,6 +32,14 @@ const ProfileImage = styled.div<{ backgroundColor?: string }>`
  background-color: ${props => props.backgroundColor};
 `;

+const ProfileMenuStyle = createGlobalStyle`
+  .profile-menu {
+    .bp3-popover .bp3-popover-content{
+      margin-top: 2px;
+    }
+  }
+`;
+
 export default function ProfileDropdown(props: TagProps) {
  const themeDetails = useSelector(getThemeDetails);

@ -41,27 +49,31 @@ export default function ProfileDropdown(props: TagProps) {
  );

  return (
-    <Menu
-      position={Position.BOTTOM}
-      target={
-        <ProfileImage backgroundColor={initialsAndColorCode[1]}>
-          <Text type={TextType.H6} highlight>
-            {initialsAndColorCode[0]}
-          </Text>
-        </ProfileImage>
-      }
-    >
-      <ThemeSwitcher />
-      <MenuDivider />
-      <MenuItem
-        icon="logout"
-        text="Sign Out"
-        onSelect={() =>
-          getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
-            type: ReduxActionTypes.LOGOUT_USER_INIT,
-          })
+    <Fragment>
+      <ProfileMenuStyle />
+      <Menu
+        className="profile-menu"
+        position={Position.BOTTOM}
+        target={
+          <ProfileImage backgroundColor={initialsAndColorCode[1]}>
+            <Text type={TextType.H6} highlight>
+              {initialsAndColorCode[0]}
+            </Text>
+          </ProfileImage>
        }
-      />
-    </Menu>
+      >
+        <ThemeSwitcher />
+        <MenuDivider />
+        <MenuItem
+          icon="logout"
+          text="Sign Out"
+          onSelect={() =>
+            getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
+              type: ReduxActionTypes.LOGOUT_USER_INIT,
+            })
+          }
+        />
+      </Menu>
+    </Fragment>
  );
 }
--- a/app/client/src/pages/organization/General.tsx
+++ b/app/client/src/pages/organization/General.tsx
@ -27,7 +27,7 @@ const SettingWrapper = styled.div`
 `;

 export const SettingsHeading = styled(Text)`
-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.settingHeading};
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 32px;