feat(ui): add dark mode

src/lib/components/board/_styles.less

@@ -290,7 +290,7 @@
 		}
 
 		&-primary-light {
-			background: var(--coo-primary-04);
+			background-color: rgba(var(--coo-rgb-primary), .1);
 		}
 
 		&-secondary {

src/lib/components/board/index.tsx

@@ -5,6 +5,7 @@ type Props = {
   backgroundImage?: string;
   borderType?: 'light' | 'none';
   buttonPosition?: 'vertical' | 'adaptive';
+  dark?:boolean,
   footer?: ReactNode;
   header?: ReactNode;
   height?: string;
@@ -36,6 +37,7 @@ function Board({
   borderType,
   buttonPosition,
   footer,
+  dark = false,
   header,
   height = undefined,
   main,
@@ -65,6 +67,7 @@ function Board({
     [`l-board--border-type-${borderType}`]: borderType,
     'l-board--no-background': noBackground,
     'l-board--clickable': onClick,
+    dark,
   });
 
   const cssMode = classNames({

src/lib/components/collapse/_styles.less

@@ -12,7 +12,7 @@
 	}
 
 	&.ant-collapse {
-		background-color: var(--coo-white);
+		background: transparent;
 		border: none;
 		font-size: 1rem;
 		border-radius: 0;
@@ -38,10 +38,11 @@
 				border-top: none;
 				color: var(--coo-dark);
 				font-weight: var(--coo-font-weight-light);
+				background: transparent;
 
 				.ant-collapse-content-box {
 					overflow-x: auto;
-					padding: 0 0 .75rem 2.25rem;
+					padding: 0 1rem 1rem 1rem;
 				}
 
 				pre {
@@ -56,6 +57,7 @@
 				padding-right: 1rem;
 				display: flex;
 
+
 				.ant-collapse-extra {
 					margin-left: auto;
 					white-space: nowrap;
@@ -80,6 +82,11 @@
 				border-radius: 0;
 			}
 		}
+
+
+		&-position-end > .ant-collapse-item > .ant-collapse-header {
+			padding: 1rem;
+		}
 	}
 
 	&--minimal {
@@ -172,11 +179,11 @@
 		&.ant-collapse {
 			.ant-collapse-item {
 				.ant-collapse-header {
-					background-color: var(--coo-secondary-04);
+					background-color: var(--coo-rgb-primary, .1);
 				}
 
 				.ant-collapse-content {
-					background-color: var(--coo-secondary-04);
+					background-color: var(--coo-rgb-primary, .1);
 				}
 			}
 		}
@@ -186,11 +193,11 @@
 		&.ant-collapse {
 			.ant-collapse-item {
 				.ant-collapse-header {
-					background-color: var(--coo-primary-04);
+					background-color: var(--coo-rgb-primary, .1);
 				}
 
 				.ant-collapse-content {
-					background-color: var(--coo-primary-04);
+					background-color: var(--coo-rgb-primary, .1);
 				}
 			}
 		}

src/lib/components/collapse/index.tsx

@@ -13,6 +13,7 @@ type Props = CollapseProps & {
   modifier?: string;
   scroll?: 'horizontal' | 'vertical';
   type?: 'minimal' | 'no-border' | 'transparent' | 'error' | 'secondary-medium' | 'primary-light';
+  dark?:boolean
 };
 
 const Collapse = ({
@@ -21,11 +22,13 @@ const Collapse = ({
   modifier = '',
   scroll,
   type,
+  dark = false,
   ...other
 }: Props) => {
   const css = className({
     [`c-collapse--${scroll}_scroll`]: scroll,
     [`c-collapse--${type}`]: type,
+    dark,
   });
 
   return (

src/lib/components/collapse/panel.tsx

@@ -11,6 +11,7 @@ export type PropsPanel = {
   onHover?: () => void;
   isActive?: boolean;
   key: string | number
+  dark?:boolean
 };
 
 type PropsHoverable = {
@@ -27,10 +28,12 @@ const CollapsePanel = ({
   header,
   noBody,
   onHover,
+  dark = false,
   ...others
 }: PropsPanel) => {
   const css = classNames({
     'c-collapse__panel--no-body': noBody,
+    dark,
   });
 
   return (

src/lib/components/data-table/DataTable.tsx

@@ -12,6 +12,7 @@ export interface DataTableProps<T extends Record<string, unknown>>
   noHead?: boolean;
   clickable?: boolean;
   hasFixedColumn?: boolean;
+  dark?: boolean;
 }
 
 type Render<T> = ColumnType<T>['render'];
@@ -36,6 +37,7 @@ const DataTable = <T extends Record<string, unknown>>({
   onRow,
   clickable,
   hasFixedColumn,
+  dark = false,
   ...otherProps
 }: DataTableProps<T>) => {
   const enrichedColumns = columns?.map((c) => {
@@ -67,6 +69,7 @@ const DataTable = <T extends Record<string, unknown>>({
   const css = classNames({
     'l-data-table--no-head': noHead,
     'l-data-table--clickable': clickable,
+    dark,
   });
 
   return (

src/lib/components/data-table/_styles.less

@@ -234,10 +234,10 @@
 				}
 
 				&--primary-light {
-					background-color: var(--coo-primary-04);
+					background-color: rgba(var(--coo-rgb-primary), .1);
 
 					td {
-						color: rgb(var(--coo-rgb-dark));
+						color: var(--coo-dark);
 					}
 				}
 

src/lib/components/layout/secondary-column/_styles.less

@@ -39,6 +39,7 @@
 			line-height: 3rem;
 			margin-top: 0;
 			margin-bottom: 0;
+			padding-left: 2.25rem !important;
 		}
 	}
 

src/lib/components/menu/_styles.less

@@ -64,7 +64,7 @@
 	&__hide-expand-icon {
 		.ant-menu-submenu-title {
 			.ant-menu-submenu-arrow {
-				display: none;
+				display: block;
 			}
 		}
 	}
@@ -80,3 +80,15 @@
 	}
 }
 
+.ant-menu {
+	background: transparent;
+}
+
+.ant-menu-sub.ant-menu-inline {
+	background: var(--coo-secondary-04);
+}
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+	background-color: rgba(var(--coo-rgb-primary), .1);
+	font-weight: bolder;
+}

src/lib/components/menu/index.tsx

@@ -5,16 +5,19 @@ type Props = MenuProps & {
   className?: string;
   modifier?: string;
   alignment?: 'centered';
+  dark?: boolean
 };
 
 const Menu = ({
   className = '',
   modifier = '',
   alignment,
+  dark = false,
   ...others
 }: Props) => {
   const css = classNames({
     [`c-menu--alignment-${alignment}`]: alignment,
+    dark,
   });
 
   return (

src/lib/components/select/_styles.less

@@ -177,6 +177,16 @@
 	}
 }
 
+
+.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+	border-color: var(--coo-secondary-03);
+}
+
+.ant-select-multiple .ant-select-selection-item {
+	background: rgba(var(--coo-rgb-secondary-01), .35);
+	border: none;
+}
+
 // Antd4 styles
 .ant-select-item-option {
 	&-selected:not(.ant-select-item-option-disabled) {

src/lib/components/select/index.tsx

@@ -19,6 +19,7 @@ export type Props = SelectProps & {
     blur: () => void;
     scrollTo: ScrollTo;
   }>;
+  dark?: boolean
 };
 
 const Select = ({
@@ -37,12 +38,14 @@ const Select = ({
   ref,
   removeIcon,
   skeleton,
+  dark = false,
   ...others
 }: Props) => {
   const css = classNames({
     'c-select--readonly': readOnly,
     'c-select--as-tag': asTag,
     'c-select--no-border': noBorder,
+    dark,
   });
 
   const valueOrElse = readOnly ? value ?? '--' : value;

src/lib/components/select/select-with-text.tsx

@@ -17,6 +17,7 @@ type Props = SelectProps & {
   textPlaceholder?: string;
   caseSensitive?: boolean;
   width?: number;
+  dark?: boolean
 };
 
 function SelectWithText({
@@ -31,6 +32,7 @@ function SelectWithText({
   value = undefined,
   defaultActiveFirstOption = false,
   width,
+  dark = false,
   ...others
 }: Props) {
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -81,6 +83,7 @@ function SelectWithText({
 
   const dropdownCss = classNames({
     'c-select-with-text__dropdown--reverse': reverse,
+    dark,
   });
 
   return (

src/lib/components/tabs/_styles.less

@@ -34,7 +34,6 @@
 		}
 	}
 
-
 	&.ant-tabs {
 		.ant-tabs-content,
 		.ant-tabs-tabpane-active {
@@ -78,7 +77,6 @@
 		}
 	}
 
-
 	&--size-large {
 		> .ant-tabs-nav .ant-tabs-nav-wrap {
 			height: 3rem;
@@ -127,4 +125,11 @@
 			border-bottom: 0;
 		}
 	}
+
+	.ant-tabs-top > .ant-tabs-nav::before,
+	.ant-tabs-bottom > .ant-tabs-nav::before,
+	.ant-tabs-top > div > .ant-tabs-nav::before,
+	.ant-tabs-bottom > div > .ant-tabs-nav::before {
+		border-color: var(--coo-secondary-03);
+	}
 }

src/lib/components/tabs/tabs.tsx

@@ -8,6 +8,7 @@ type Props = Omit<TabsProps, 'size'> & {
   maximize?: boolean;
   size?: 'default' | 'large';
   paddedContent?: boolean;
+  dark?: boolean;
 };
 
 const Tabs = ({
@@ -20,6 +21,7 @@ const Tabs = ({
   maximize = false,
   size = 'default',
   paddedContent = false,
+  dark = false,
   ...other
 }: Props) => {
   const css = classNames({
@@ -29,6 +31,7 @@ const Tabs = ({
     'c-tabs--maximize': maximize,
     [`c-tabs--size-${size}`]: size,
     'c-tabs--padded-content': paddedContent,
+    dark,
   });
 
   return (

src/styles/_colors.less

@@ -45,7 +45,7 @@
 	--coo-rgb-special-blue: 0, 30, 255; // #001eff
 	--coo-rgb-special-green: 94, 255, 0; // #5eff00
 	--coo-rgb-special-dark-grey: 18, 16, 16;// #121010
-
+	--coo-rgb-error-dark: 255, 56, 56;  // #FF3838
 
 	// * * * * LIGHT MODE COLORS BASE - to use as color variable * * * *
 
@@ -91,6 +91,7 @@
 		--coo-white-bk: rgb(var(--coo-rgb-secondary-dark));
 		--coo-secondary-04: rgb(var(--coo-rgb-dark));
 		--coo-secondary-03: rgb(var(--coo-rgb-secondary));
+		--coo-error: rgb(var(--coo-rgb-error-dark));
 	}
 }
 

src/styles/_theme.less

@@ -437,6 +437,7 @@ a:hover {
 	color: var(--coo-primary);
 }
 
+
 @rdb-left-sidebar-width: 15rem;
 @rdb-right-sidebar-width: var(--right-column-width, 15rem);
 @rdb-header-height: 5rem;