feat: setup dark theme

DEVELOPMENT.md

@@ -162,7 +162,7 @@ Releases are handled automatically through semantic-release when changes are mer
    This is to support the `exactOptionalPropertyTypes` typescript option.
 
 2. Override MUI component:
-   - Create a file like [this](packages/open-ui-kit/src/theme/light/mui/avatar.ts) inside the `mui` folder in each `theme`(light or dark) and per each component that you want to override;
+   - Create a file like [this](packages/open-ui-kit/src/theme/mui/avatar.ts) inside the `mui` folder in each `theme`(light or dark) and per each component that you want to override;
    - Export this file on the `index.ts` on the `mui` folder;
    - Add the custom override to the theme like [this](https://github.com/outshift-open/open-ui-kit/blob/main/packages/open-ui-kit/src/theme/light/light-theme.tsx#L146-L149);
 

packages/open-ui-kit/.storybook/css/sidebar-headers.css

@@ -10,7 +10,7 @@
   line-height: 18px;
   letter-spacing: 0%;
   vertical-align: middle;
-  color: #00142B;
+  color: inherit;
 }
 
 .sidebar-header img {

packages/open-ui-kit/.storybook/decorators.tsx

@@ -1,25 +1,14 @@
 import "./css/typography.css";
 
-import { useEffect } from "react";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { darkTheme } from "../src/theme/dark/dark-theme";
 import { lightTheme } from "../src/theme/light/light-theme";
 import { Decorator } from "@storybook/react";
 import React from "react";
-
-import { addons } from "@storybook/preview-api";
-import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-
-const channel = addons.getChannel();
+import { useDarkMode } from "storybook-dark-mode";
 
 const ThemeDecorator: Decorator = (Story) => {
-  const [isDark, setDark] = React.useState(false);
-
-  useEffect(() => {
-    // listen to DARK_MODE event
-    channel.on(DARK_MODE_EVENT_NAME, setDark);
-    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
-  }, [channel, setDark]);
+  const isDark = useDarkMode();
 
   return (
     <ThemeProvider theme={isDark ? darkTheme : lightTheme}>

packages/open-ui-kit/.storybook/preview.ts

@@ -15,6 +15,13 @@ export const decorators = [ThemeDecorator, withScreenshot, mockDateDecorator];
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: "Light",
+      values: [
+        { name: "Dark", value: "#00142B" },
+        { name: "Light", value: "#EFF3FC" },
+      ],
+    },
     darkMode: {
       dark: {
         ...comomnTheme,

packages/open-ui-kit/src/colors/colors.mdx

@@ -1,7 +1,7 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
 import { Typography, Divider } from "@mui/material"
 import { lightTheme } from "../theme/light/light-theme";
-import { OS_LIGHT_COLORS } from "../theme/light/light-color-palette";
+import { OS_LIGHT_COLORS } from "../theme/color-palette";
 
 <Meta title="Foundations/Colors" />
 

packages/open-ui-kit/src/common/utils/utils.ts

@@ -16,7 +16,7 @@
 
 import { Theme } from "@mui/material";
 import { Severity } from "../types";
-import { PA_Colors } from "../../theme/dark/dark-color-palette";
+import { orangePalette, redPalette } from "@/theme/color-palette";
 import { SEVERITY_VALUE } from "../constants";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -31,9 +31,9 @@ export const getColorBySeverity = (
   theme: Theme,
 ): string => {
   const severitiesToColors: Record<Severity, string> = {
-    [Severity.CRITICAL]: PA_Colors.bordeaux[500],
+    [Severity.CRITICAL]: redPalette[500],
     [Severity.HIGH]: theme.palette.error.main,
-    [Severity.MEDIUM]: PA_Colors.orange[500],
+    [Severity.MEDIUM]: orangePalette[500],
     [Severity.LOW]: theme.palette.warning.main,
     [Severity.INFORMATION]: theme.palette.info.main,
   };

packages/open-ui-kit/src/components/autocomplete-tree/components/select-node.tsx

@@ -28,7 +28,7 @@ import {
   formatNodeValue,
   isLeaf,
 } from "@/common";
-import { PA_Colors } from "@/theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 import { AugmentedSelectNodeType } from "@/types";
 import { useAutocompleteTreeContext } from "./autocomplete-tree-context";
 import {
@@ -202,7 +202,7 @@ export const SelectNodeListItem = ({
       {selectableLeavesCount && (
         <Typography
           variant="body2"
-          color={PA_Colors.grey[200]}
+          color={greyPalette[200]}
           sx={{ cursor: "pointer" }}
         >
           {selectableLeavesCount}

packages/open-ui-kit/src/components/autocomplete-tree/styles/index.ts

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { PA_Colors } from "@/theme/dark/dark-color-palette";
+import { surfaceDarkPalette } from "@/theme/color-palette";
 import { darkTheme } from "@/theme/dark/dark-theme";
 
 export const defaultPopperContentStyles = {
   width: "480px",
   maxHeight: "375px",
-  backgroundColor: PA_Colors.surface[500],
+  backgroundColor: surfaceDarkPalette[500],
   borderRadius: "4px",
   boxShadow:
     "0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)",

packages/open-ui-kit/src/components/filters/components/filters-bar/filters-bar-actions.tsx

@@ -23,7 +23,7 @@ import {
 import { Box, Button, Stack } from "@mui/material";
 import { useEffect, useState } from "react";
 import { styles } from "./styles";
-import { PA_Colors } from "@/theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 import { SearchField } from "@/components";
 
 export interface FiltersBarActionsProps {
@@ -89,7 +89,7 @@ export const FiltersBarActions = ({
               color:
                 activeFiltersCount && activeFiltersCount > 0
                   ? "inherit"
-                  : PA_Colors.grey[200],
+                  : greyPalette[200],
             }}
           >
             {activeFiltersCount}

packages/open-ui-kit/src/components/filters/components/filters-bar/styles.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PA_Colors } from "@/theme/dark/dark-color-palette";
+import { surfaceDarkPalette } from "@/theme/color-palette";
 import { darkTheme } from "@/theme/dark/dark-theme";
 
 export const styles = {
@@ -38,7 +38,7 @@ export const styles = {
   },
   chipTooltip: {
     "& .MuiTooltip-tooltip": {
-      backgroundColor: PA_Colors.surface[50],
+      backgroundColor: surfaceDarkPalette[50],
       color: darkTheme.palette.grey[50],
       marginBottom: "2px !important",
       height: "auto",

packages/open-ui-kit/src/components/filters/components/filters-drawer/styles.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PA_Colors } from "@/theme/dark/dark-color-palette";
+import { surfaceDarkPalette, greyPalette } from "@/theme/color-palette";
 import { darkTheme } from "@/theme/dark/dark-theme";
 
 const getChildAccordionMarginLeft = (
@@ -40,16 +40,16 @@ const getChildAccordionMarginLeft = (
 const filterItemStyles = {
   loadingStack: {
     padding: "8px 24px",
-    backgroundColor: PA_Colors.surface[700],
+    backgroundColor: surfaceDarkPalette[700],
   },
   parentAccordion: {
     "&.MuiPaper-root": {
       border: "0px solid !important",
-      borderBottom: `0.5px solid ${PA_Colors.surface[400]} !important`,
+      borderBottom: `0.5px solid ${surfaceDarkPalette[400]} !important`,
       boxShadow: "unset",
       margin: "0",
       "&:not(.Mui-disabled) .MuiAccordionSummary-expandIconWrapper": {
-        color: PA_Colors.grey[50],
+        color: greyPalette[50],
       },
       "& .MuiAccordionSummary-content": {
         margin: 0,
@@ -88,7 +88,7 @@ const filterItemStyles = {
         isSelectAllEnabledOnParent,
       )}`,
       "&:not(.Mui-disabled) .MuiAccordionSummary-expandIconWrapper": {
-        color: PA_Colors.grey[50],
+        color: greyPalette[50],
       },
       "& .MuiAccordionSummary-content": {
         margin: 0,
@@ -118,11 +118,11 @@ const filterItemStyles = {
     color: isSelected
       ? (darkTheme.palette.primary[500] ?? "unset")
       : darkTheme.palette.text.primary,
-    backgroundColor: PA_Colors.surface[700],
+    backgroundColor: surfaceDarkPalette[700],
     flexDirection: "row-reverse",
   }),
   accordionDetails: {
-    backgroundColor: PA_Colors.surface[700],
+    backgroundColor: surfaceDarkPalette[700],
   },
   listItem: (level: number, isSelectAllEnabled: boolean) => {
     if (level === 0) {
@@ -139,7 +139,7 @@ const filterItemStyles = {
     return { paddingLeft: "0px" }; // Default return value
   },
   listItemButton: {
-    backgroundColor: PA_Colors.surface[700],
+    backgroundColor: surfaceDarkPalette[700],
     paddingTop: 0,
     paddingBottom: 0,
   },
@@ -163,7 +163,7 @@ const filtersDrawerStyles = {
   drawerHeader: {
     padding: "16px 24px",
     width: "480px",
-    backgroundColor: PA_Colors.surface[400],
+    backgroundColor: surfaceDarkPalette[400],
   },
   drawerTitle: {
     justifyContent: "space-between",
@@ -177,7 +177,7 @@ const filtersDrawerStyles = {
   },
   clearAll: {
     "&.MuiButton-sizeMedium": {
-      backgroundColor: PA_Colors.surface[500],
+      backgroundColor: surfaceDarkPalette[500],
       height: "58px",
       justifyContent: "left",
       padding: "8px 16px",
@@ -186,8 +186,8 @@ const filtersDrawerStyles = {
 };
 
 const emptySearchStyles = {
-  emptySearchTypography: { color: PA_Colors.grey[300], marginTop: "50px" },
-  emptySearchInput: { color: PA_Colors.grey[50] },
+  emptySearchTypography: { color: greyPalette[300], marginTop: "50px" },
+  emptySearchInput: { color: greyPalette[50] },
 };
 
 export const styles = {

packages/open-ui-kit/src/custom-icons/AttackPathIcon.tsx

@@ -15,7 +15,7 @@
  */
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import { grey50 } from "../theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 
 export function AttackPathIcon(props: SvgIconProps) {
   return (
@@ -29,13 +29,13 @@ export function AttackPathIcon(props: SvgIconProps) {
       >
         <path
           d="M12.3641 6.13202C14.1902 5.71854 16.0995 5.86871 17.8305 6.56047C18.5082 6.83128 19.2771 6.50147 19.5479 5.82382C19.8187 5.14617 19.4889 4.37729 18.8112 4.10648C16.5817 3.2155 14.1268 3.02331 11.7805 3.55458C9.43406 4.08588 7.30666 5.31578 5.69004 7.08026C4.07314 8.84505 3.04594 11.059 2.75303 13.4211C2.4601 15.7834 2.91644 18.1746 4.05828 20.2675C5.19995 22.36 6.96978 24.0497 9.12245 25.1097C11.2748 26.1696 13.707 26.5494 16.0876 26.1996C18.0526 25.9109 19.9064 25.1362 21.4783 23.9553L25.8764 28.3535C26.3924 28.8695 27.2291 28.8695 27.7451 28.3535C28.2611 27.8374 28.2611 27.0008 27.7451 26.4848L23.399 22.1387C24.6289 20.6773 25.4806 18.9333 25.8663 17.0571C26.0133 16.3423 25.553 15.6436 24.8382 15.4967C24.1234 15.3497 23.4248 15.81 23.2778 16.5248C22.9097 18.3151 21.9876 19.9556 20.6329 21.2206C19.2779 22.4857 17.5567 23.3127 15.7034 23.585C13.8502 23.8573 11.9594 23.561 10.2899 22.7389C8.62069 21.9169 7.25593 20.6106 6.37814 19.0017C5.50053 17.3932 5.15095 15.5582 5.37564 13.7463C5.60034 11.9342 6.38908 10.2293 7.63857 8.8655C8.88833 7.50142 10.5381 6.54548 12.3641 6.13202Z"
-          fill={grey50}
+          fill={greyPalette[50]}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M22.127 10.7221H17.201C16.6039 10.7221 16.1199 11.2062 16.1199 11.8032C16.1199 12.4003 16.6039 12.8843 17.201 12.8843C19.2576 12.8843 20.9248 14.5515 20.9248 16.6081C20.9248 18.6647 19.2576 20.3319 17.201 20.3319H9.39302C8.66326 20.3319 8.07168 19.7403 8.07168 19.0106C8.07168 18.2808 8.66326 17.6892 9.39302 17.6892H17.201C17.798 17.6892 18.2821 17.2052 18.2821 16.6081C18.2821 16.011 17.798 15.527 17.201 15.527C15.1444 15.527 13.4772 13.8598 13.4772 11.8032C13.4772 9.74663 15.1444 8.07944 17.201 8.07944H22.127C22.6601 6.67513 24.0183 5.67703 25.6095 5.67703C27.6661 5.67703 29.3333 7.34422 29.3333 9.40082C29.3333 11.4574 27.6661 13.1246 25.6095 13.1246C24.0182 13.1246 22.6601 12.1265 22.127 10.7221ZM24.5284 9.40082C24.5284 8.80374 25.0125 8.31972 25.6095 8.31972C26.2066 8.31972 26.6906 8.80374 26.6906 9.40082C26.6906 9.99789 26.2066 10.4819 25.6095 10.4819C25.0125 10.4819 24.5284 9.99789 24.5284 9.40082Z"
-          fill={grey50}
+          fill={greyPalette[50]}
         />
       </svg>
     </SvgIcon>

packages/open-ui-kit/src/custom-icons/AttackPathIconV2.tsx

@@ -15,7 +15,7 @@
  */
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import { grey50 } from "../theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 
 export function AttackPathIconV2(props: SvgIconProps) {
   return (
@@ -31,7 +31,7 @@ export function AttackPathIconV2(props: SvgIconProps) {
           <path
             id="Vector"
             d="M12.605 19.005C12.605 17.925 11.875 16.985 10.855 16.705L10.855 15.875C10.855 14.185 12.225 12.815 13.895 12.815L19.105 12.815L17.315 14.375C17.065 14.595 17.035 15.005 17.255 15.255C17.365 15.385 17.515 15.455 17.675 15.465C17.845 15.475 18.005 15.425 18.125 15.315L21.185 12.645L21.295 12.515L21.385 12.175L21.325 11.925L21.145 12.015L21.285 11.865L21.115 11.975L21.255 11.825L18.135 9.075C18.015 8.965 17.845 8.915 17.685 8.925C17.515 8.93501 17.365 9.015 17.255 9.135C17.045 9.385 17.065 9.79501 17.315 10.015L19.105 11.575L13.895 11.575C12.215 11.575 10.855 10.205 10.855 8.515L10.855 7.685C11.875 7.405 12.605 6.465 12.605 5.385C12.605 4.075 11.545 3.005 10.235 3.005C8.925 3.005 7.865 4.075 7.865 5.385C7.865 6.465 8.595 7.405 9.615 7.685L9.615 8.515C9.615 9.685 10.075 10.765 10.885 11.575L7.655 11.575C7.375 10.545 6.435 9.815 5.365 9.815C4.055 9.815 2.995 10.885 2.995 12.195C2.995 13.505 4.065 14.575 5.365 14.575C6.445 14.575 7.375 13.845 7.655 12.815L10.885 12.815C10.075 13.625 9.615 14.705 9.615 15.875L9.615 16.705C8.585 16.985 7.865 17.925 7.865 19.005C7.865 20.315 8.935 21.385 10.235 21.385C11.535 21.385 12.605 20.315 12.605 19.005ZM10.235 20.145C9.615 20.145 9.105 19.635 9.105 19.005C9.105 18.375 9.615 17.865 10.235 17.865C10.855 17.865 11.365 18.375 11.365 19.005C11.365 19.635 10.855 20.145 10.235 20.145ZM5.365 11.045C5.985 11.045 6.495 11.555 6.495 12.185C6.495 12.815 5.985 13.325 5.365 13.325C4.745 13.325 4.235 12.815 4.235 12.185C4.235 11.555 4.745 11.045 5.365 11.045ZM10.235 6.505C9.615 6.505 9.105 5.995 9.105 5.365C9.105 4.735 9.615 4.225 10.235 4.225C10.855 4.225 11.365 4.735 11.365 5.365C11.365 5.995 10.855 6.505 10.235 6.505Z"
-            fill={props.fill ?? grey50}
+            fill={props.fill ?? greyPalette[50]}
           />
         </g>
       </svg>

packages/open-ui-kit/src/custom-icons/AzureCategory_None.tsx

@@ -15,7 +15,7 @@
  */
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import { PA_Colors } from "../theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 
 export function AzureCategoryNone(props: SvgIconProps) {
   return (
@@ -27,7 +27,7 @@ export function AzureCategoryNone(props: SvgIconProps) {
         fill="none"
       >
         <path
-          fill={props.fill ?? PA_Colors.grey[50]}
+          fill={props.fill ?? greyPalette[50]}
           d="M2 17.535L7.18932 8.89266L13.25 4L6.67866 17.5483V17.535H2ZM15.9923 17.3761L11.11 11.7431L13.6513 4.96782L22 19.0001H6.50003L15.9923 17.3761Z"
         />
       </svg>

packages/open-ui-kit/src/custom-icons/AzureCategory_Storage.tsx

@@ -15,7 +15,7 @@
  */
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import { PA_Colors } from "../theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 
 export function AzureCategoryStorage(props: SvgIconProps) {
   return (
@@ -27,11 +27,11 @@ export function AzureCategoryStorage(props: SvgIconProps) {
         fill="none"
       >
         <path
-          fill={props.fill ?? PA_Colors.grey[50]}
+          fill={props.fill ?? greyPalette[50]}
           d="M4.959 9.346h16v8.922a.536.536 0 0 1-.537.537H5.495a.537.537 0 0 1-.536-.537V9.346ZM5.495 5.939h14.927a.537.537 0 0 1 .537.536v2.87h-16v-2.88a.536.536 0 0 1 .536-.526Z"
         />
         <path
-          fill={props.fill ?? PA_Colors.grey[50]}
+          fill={props.fill ?? greyPalette[50]}
           d="M7.138 10.381h11.643a.254.254 0 0 1 .244.254v1.318a.254.254 0 0 1-.244.254H7.138a.254.254 0 0 1-.244-.254v-1.318a.254.254 0 0 1 .244-.254ZM7.14 13.007h11.642a.254.254 0 0 1 .245.254v1.327a.254.254 0 0 1-.245.254H7.14a.254.254 0 0 1-.245-.254v-1.28a.254.254 0 0 1 .245-.3ZM7.137 15.661H18.78a.254.254 0 0 1 .244.254v1.327a.254.254 0 0 1-.244.255H7.137a.254.254 0 0 1-.244-.255v-1.327a.254.254 0 0 1 .244-.254Z"
         />
       </svg>

packages/open-ui-kit/src/custom-icons/CdrIcon.tsx

@@ -15,7 +15,7 @@
  */
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
-import { grey50 } from "../theme/dark/dark-color-palette";
+import { greyPalette } from "@/theme/color-palette";
 
 export function CdrIcon(props: SvgIconProps) {
   return (
@@ -31,13 +31,13 @@ export function CdrIcon(props: SvgIconProps) {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M5.64378 13.3289C8.35038 2.58795 23.0684 2.56259 26.3883 11.9994C26.5843 12.5567 27.1535 12.8915 27.7358 12.7921C28.3181 12.6926 28.744 12.1879 28.744 11.5972V4.78168C28.744 4.11221 28.2013 3.56949 27.5318 3.56949C26.8623 3.56949 26.3196 4.11221 26.3196 4.78168V7.11755C19.9867 -0.173889 6.16197 1.35077 3.29289 12.7365C3.12931 13.3857 3.52296 14.0445 4.17214 14.2081C4.82132 14.3717 5.4802 13.9781 5.64378 13.3289ZM26.3562 18.6698C23.6496 29.4107 8.93162 29.4361 5.6117 19.9993C5.41566 19.442 4.84647 19.1072 4.26416 19.2066C3.68185 19.3061 3.25602 19.8108 3.25602 20.4015V27.217C3.25602 27.8865 3.79874 28.4292 4.46821 28.4292C5.13768 28.4292 5.6804 27.8865 5.6804 27.217V24.8811C12.0133 32.1726 25.838 30.6479 28.7071 19.2622C28.8707 18.613 28.477 17.9542 27.8279 17.7906C27.1787 17.627 26.5198 18.0206 26.3562 18.6698Z"
-          fill={grey50}
+          fill={greyPalette[50]}
         />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M11.1678 19.4104L15.4404 21.8515C15.7869 22.0495 16.213 22.0495 16.5596 21.8515L20.8322 19.4104C21.1793 19.2121 21.3962 18.8434 21.3962 18.4411V13.5589C21.3962 13.1566 21.1793 12.7879 20.8322 12.5896L16.5596 10.1485C16.213 9.95051 15.7869 9.95051 15.4404 10.1485L11.1678 12.5896C10.8207 12.7879 10.6038 13.1566 10.6038 13.5589V18.4411C10.6038 18.8434 10.8207 19.2121 11.1678 19.4104ZM17.6652 16C17.6652 16.9014 16.9251 17.642 16 17.642C15.0748 17.642 14.3348 16.9014 14.3348 16C14.3348 15.0986 15.0748 14.358 16 14.358C16.9251 14.358 17.6652 15.0986 17.6652 16Z"
-          fill={grey50}
+          fill={greyPalette[50]}
         />
       </svg>
     </SvgIcon>