@mailstep/design-system 0.8.32 → 0.8.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.32",
+  "version": "0.8.33",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -24,7 +24,7 @@ const StyledColumnButton = styled$1(Button)`
   margin-left: 8px;
 
   > span > svg {
-    stroke: ${th$1("colors.blue2")};
+    stroke: ${th$1("colors.iconStroke")};
     width: 18px;
     height: 18px;
   }

package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.js

@@ -29,7 +29,7 @@ const StyledIcon = styled$1.div`
   height: 20px;
   margin: 9px;
   & > svg {
-    stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : th$1.color("white")};
+    stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : "#ffffff"};
   }
 `;
 const Separator = styled$1.div`

package/ui/Blocks/Modal/styles.js

@@ -58,7 +58,7 @@ const DialogOverlay = styled$1.div`
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: ${({ backgroundColor, theme }) => createRgba(backgroundColor || theme.colors.blue2, .6)};
+  background-color: ${({ backgroundColor, theme }) => createRgba(backgroundColor || theme.colors.modalBackground, .6)};
   text-align: center;
 
   @media print {

package/ui/Elements/Badge/Badge.js

@@ -8,7 +8,7 @@ const Circle = styled$1.div`
   align-items: center;
   height: ${({ size }) => size === "small" ? "16px" : "24px"};
   padding: ${({ size }) => size === "small" ? "0 5px" : "3px 8px"};
-  color: white;
+  color: #fff;
   gap: 10px;
   background-color: ${({ color }) => color};
   border-radius: 29px;

package/ui/Elements/Button/styles.js

@@ -44,7 +44,7 @@ const StyledButton = styled$1.button`
   &[data-variant='default'] {
     &[data-appearance='primary'] {
       background-color: red1;
-      color: white;
+      color: #fff;
 
       :not(:disabled) {
         @media (hover: hover) {

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -26,7 +26,7 @@ const tooltip = css`
       top: 3px;
       right: 100%;
       border: mediumThick;
-      border-color: transparent ${th.color("red1")} transparent transparent;
+      border-color: transparent ${th.color("inputErrorColor")} transparent transparent;
     }
   }
 
@@ -38,7 +38,7 @@ const tooltip = css`
   }
 `;
 const ErrorWrap = styled$1.div`
-  color: red1;
+  color: inputErrorColor;
   font-size: 1;
   display: flex;
   align-items: flex-start;

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -45,6 +45,7 @@ type HighlightBoxType = {
     appearance: FlagAppearanceType;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
     className?: string;
+    cursor?: string;
     prefix?: string;
 };
 declare const HighlightBox: React.FC<HighlightBoxType>;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -25,7 +25,7 @@ const StyledHighlightBox = styled$1.div`
     height: 2.75em;
     display: flex;
     flex-flow: row wrap;
-    width: 11rem;
+    width: 12rem;
     align-content: center;
     line-height: 14px;
     padding: 0.5px 12px;
@@ -40,6 +40,7 @@ const StyledHighlightBox = styled$1.div`
   }
   background-color: ${({ $bgcolor }) => $bgcolor};
   color: ${({ $fontColor }) => $fontColor};
+  cursor: ${({ $cursor }) => $cursor || "auto"};
 `;
 const OverflowWrap = styled$1.span`
   text-overflow: ellipsis;
@@ -47,7 +48,7 @@ const OverflowWrap = styled$1.span`
 `;
 const flagAppearanceToColorMap = {
 	neutralBold: "neutral300",
-	neutralSubtle: "neutral20",
+	neutralSubtle: "bgLightGray2",
 	blueBold: "blue70",
 	blueSubtle: "blue20",
 	tealBold: "teal60",
@@ -67,30 +68,31 @@ const flagAppearanceToColorMap = {
 };
 const flagAppearanceToFontColorMap = {
 	neutralBold: "white",
-	neutralSubtle: "typoPrimary",
-	blueBold: "white",
+	neutralSubtle: "#22394E",
+	blueBold: "#ffffff",
 	blueSubtle: "blue80",
-	tealBold: "white",
+	tealBold: "#ffffff",
 	tealSubtle: "teal90",
-	greenBold: "white",
+	greenBold: "#ffffff",
 	greenSubtle: "green80",
-	orangeBold: "white",
+	orangeBold: "#ffffff",
 	orangeSubtle: "orange80",
-	yellowBold: "typoPrimary",
-	yellowSubtle: "typoPrimary",
+	yellowBold: "#22394e",
+	yellowSubtle: "#22394e",
 	pinkBold: "white",
 	pinkSubtle: "magenta80",
-	purpleBold: "white",
+	purpleBold: "#ffffff",
 	purpleSubtle: "purple80",
-	redBold: "white",
+	redBold: "#ffffff",
 	redSubtle: "red80"
 };
-const HighlightBox = ({ children, appearance, size = "default", className, prefix }) => {
+const HighlightBox = ({ children, appearance, size = "default", cursor, className, prefix }) => {
 	const theme = useTheme();
 	return /* @__PURE__ */ jsx(StyledHighlightBox, {
 		$bgcolor: th$1.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({ theme }),
 		$fontColor: th$1.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({ theme }),
 		"data-cy": prefix ? `${prefix}Label` : "label",
+		$cursor: cursor,
 		children: /* @__PURE__ */ jsx(OverflowWrap, {
 			className: size + " " + (className || ""),
 			children

package/ui/Elements/Select/themes/selectStyles.js

@@ -5,7 +5,7 @@ const CustomStyles = {
 		const colors = theme.colors;
 		return {
 			...styles,
-			borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor,
+			borderColor: selectProps.isInvalid ? colors.errorColor : isFocused ? colors.inputTextColor : colors.inputBorderColor,
 			backgroundColor: isDisabled ? colors.backgroundColorDisabled : colors.backgroundColor,
 			boxShadow: theme.focusBoxShadow,
 			borderRadius: theme.borderRadius,
@@ -36,7 +36,7 @@ const CustomStyles = {
 			position: "absolute",
 			top: "50%",
 			transform: "translateY(-50%)",
-			color: selectProps.isInvalid ? theme.colors.primary : isDisabled ? theme.colors.disabledTextColor : theme.colors.inputTextColor,
+			color: selectProps.isInvalid ? theme.colors.errorColor : isDisabled ? theme.colors.disabledTextColor : theme.colors.inputTextColor,
 			fontSize: "14px",
 			fontWeight: theme.textWeightNormal
 		};
@@ -163,6 +163,7 @@ const CustomStyles = {
 const getCustomTheme = (theme, optionVariant, useFilterSubvariant) => {
 	const customColors = {
 		primary: th.color("red1")({ theme }),
+		errorColor: th.color("inputErrorColor")({ theme }),
 		inputTextColor: th.color("blue1")({ theme }),
 		backgroundColor: th.color("white")({ theme }),
 		backgroundColorDisabled: th.color("neutral20")({ theme }),

package/ui/Elements/Select/types.d.ts

@@ -58,6 +58,7 @@ export type SelectProps = {
 };
 export type BaseColors = {
     primary: string;
+    errorColor: string;
     optionTextColor: string;
     inputDisabledColor: string;
     inputBorderColor: string;

package/ui/Elements/Toggle/Toggle.js

@@ -6,7 +6,7 @@ import "react";
 import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Elements/Toggle/Toggle.tsx
-const isHorizontal = (position) => position && ["left", "right"].includes(position);
+const isHorizontal = (position) => !!position && ["left", "right"].includes(position);
 const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`
   display: flex;
   flex-direction: ${({ labelPosition }) => labelPosition === "left" ? "row" : labelPosition === "right" ? "row-reverse" : "column"};
@@ -40,7 +40,7 @@ const StyledToggle = styled$1.div`
 
     & > span {
       transform: translate(75%, -50%);
-      background-color: white;
+      background-color: #ffffff;
     }
   }
 `;

package/ui/Forms/Input/styles.js

@@ -19,7 +19,7 @@ const InputIcon = styled$1.div`
   svg {
     stroke: lightGray3;
     cursor: pointer;
-    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
   }
 `;
 const ClearableInputIcon = styled$1(InputIcon)`
@@ -44,7 +44,7 @@ const IconWrapper = styled$1.div`
 const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "textarea" : "input" }))`
   ${system};
   border: slim;
-  border-color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("lightGray6")};
+  border-color: ${({ $isInvalid }) => $isInvalid ? th.color("inputErrorColor") : th.color("lightGray6")};
   background-color: white;
   box-sizing: border-box;
   background-clip: padding-box;
@@ -145,9 +145,9 @@ const Suffix = styled$1.div`
 `;
 const InputRow = styled$1.div`
   position: relative;
-  color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("gray")};
+  color: ${({ $isInvalid }) => $isInvalid ? th.color("inputErrorColor") : th.color("gray")};
   & > * {
-    border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
+    border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("inputErrorColor") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
     color: ${({ hasValue }) => hasValue ? th.color("typoPrimary") : th.color("gray")};
   }
   :hover > * {

package/ui/ThemeProvider/themes/dark.d.ts

@@ -11,33 +11,30 @@ declare const darkTheme: {
         neutral20: string;
         neutral30: string;
         neutral300: string;
-        red1: string;
-        red20: string;
         red30: string;
-        red60: string;
-        red70: string;
-        red80: string;
-        yellow20: string;
-        yellow60: string;
-        neutral500: string;
         lightGray1: string;
         lightGray2: string;
         lightGray3: string;
         lightGray4: string;
         lightGray6: string;
         blue1: string;
-        blue2: string;
         blue3: string;
         blue10: string;
+        inputErrorColor: string;
         sideMenuSelectedText: string;
+        dashboardBackground: string;
+        iconStroke: string;
+        modalBackground: string;
         black: string;
         lightGray5: string;
+        neutral500: string;
         gray: string;
         gray1: string;
         gray2: string;
         gray3: string;
         gray4: string;
         gray5: string;
+        blue2: string;
         blue4: string;
         textTertiary: string;
         blue20: string;
@@ -72,15 +69,22 @@ declare const darkTheme: {
         orange60: string;
         orange80: string;
         yellow10: string;
+        yellow20: string;
+        yellow60: string;
         yellow70: string;
         yellow80: string;
         yellow90: string;
         yellow1: string;
         yellow2: string;
         red10: string;
+        red20: string;
         red50: string;
+        red70: string;
+        red1: string;
         red2: string;
         red3: string;
+        red60: string;
+        red80: string;
         dangerColor: string;
         purple20: string;
         purple40: string;

package/ui/ThemeProvider/themes/dark.js

@@ -4,7 +4,7 @@ const darkTheme = {
 	...defaultTheme,
 	colors: {
 		...defaultTheme.colors,
-		bgLightGray: "#355069",
+		bgLightGray: "#203444",
 		bgLightGray1: "#3a667b",
 		bgLightGray2: "#F1F5F9",
 		typoPrimary: "#ededed",
@@ -15,25 +15,20 @@ const darkTheme = {
 		neutral20: "#2e475d",
 		neutral30: "#42505d",
 		neutral300: "#d6d9df",
-		red1: "#73e1ff",
-		red20: "#3a667b",
 		red30: "#8594A5",
-		red60: "#55d1f3",
-		red70: "#d1f5ff",
-		red80: "#d1f5ff",
-		yellow20: "#857000",
-		yellow60: "#e77c00",
-		neutral500: "#55d1f3",
 		lightGray1: "#162C3F",
 		lightGray2: "#1a2b38",
 		lightGray3: "#7e8489",
 		lightGray4: "#7A90A1",
 		lightGray6: "#7A90A1",
 		blue1: "#ffffff",
-		blue2: "#d9fffa",
-		blue3: "#081724",
+		blue3: "#05111b",
 		blue10: "#2e475d",
-		sideMenuSelectedText: "#fff"
+		inputErrorColor: "#E94324",
+		sideMenuSelectedText: "#ffffff",
+		dashboardBackground: "#1b2b38",
+		iconStroke: "#d9fffa",
+		modalBackground: "#647483"
 	},
 	shadows: {
 		...defaultTheme.shadows,

package/ui/ThemeProvider/themes/default.d.ts

@@ -107,7 +107,11 @@ declare const defaultTheme: {
         magenta80: string;
         magenta90: string;
         error: string;
+        inputErrorColor: string;
         sideMenuSelectedText: string;
+        dashboardBackground: string;
+        iconStroke: string;
+        modalBackground: string;
     };
     fonts: {
         primary: string;

package/ui/ThemeProvider/themes/default.js

@@ -108,7 +108,11 @@ const defaultTheme = {
 		magenta80: "#9F1853",
 		magenta90: "#7B1340",
 		error: "#ea5455",
-		sideMenuSelectedText: "#ffffff"
+		inputErrorColor: "#DB2B19",
+		sideMenuSelectedText: "#ffffff",
+		dashboardBackground: "#ffffff",
+		iconStroke: "#22394E",
+		modalBackground: "#22394E"
 	},
 	fonts: {
 		primary: "Inter, sans-serif",

package/ui/ThemeProvider/themes/index.d.ts

@@ -108,7 +108,11 @@ declare const themes: {
             magenta80: string;
             magenta90: string;
             error: string;
+            inputErrorColor: string;
             sideMenuSelectedText: string;
+            dashboardBackground: string;
+            iconStroke: string;
+            modalBackground: string;
         };
         fonts: {
             primary: string;
@@ -368,7 +372,11 @@ declare const themes: {
             magenta80: string;
             magenta90: string;
             error: string;
+            inputErrorColor: string;
             sideMenuSelectedText: string;
+            dashboardBackground: string;
+            iconStroke: string;
+            modalBackground: string;
         };
         fonts: {
             primary: string;
@@ -400,33 +408,30 @@ declare const themes: {
             neutral20: string;
             neutral30: string;
             neutral300: string;
-            red1: string;
-            red20: string;
             red30: string;
-            red60: string;
-            red70: string;
-            red80: string;
-            yellow20: string;
-            yellow60: string;
-            neutral500: string;
             lightGray1: string;
             lightGray2: string;
             lightGray3: string;
             lightGray4: string;
             lightGray6: string;
             blue1: string;
-            blue2: string;
             blue3: string;
             blue10: string;
+            inputErrorColor: string;
             sideMenuSelectedText: string;
+            dashboardBackground: string;
+            iconStroke: string;
+            modalBackground: string;
             black: string;
             lightGray5: string;
+            neutral500: string;
             gray: string;
             gray1: string;
             gray2: string;
             gray3: string;
             gray4: string;
             gray5: string;
+            blue2: string;
             blue4: string;
             textTertiary: string;
             blue20: string;
@@ -461,15 +466,22 @@ declare const themes: {
             orange60: string;
             orange80: string;
             yellow10: string;
+            yellow20: string;
+            yellow60: string;
             yellow70: string;
             yellow80: string;
             yellow90: string;
             yellow1: string;
             yellow2: string;
             red10: string;
+            red20: string;
             red50: string;
+            red70: string;
+            red1: string;
             red2: string;
             red3: string;
+            red60: string;
+            red80: string;
             dangerColor: string;
             purple20: string;
             purple40: string;

package/ui/ThemeProvider/themes/mailwise.d.ts

@@ -199,7 +199,11 @@ declare const mailwiseTheme: {
         magenta80: string;
         magenta90: string;
         error: string;
+        inputErrorColor: string;
         sideMenuSelectedText: string;
+        dashboardBackground: string;
+        iconStroke: string;
+        modalBackground: string;
     };
     fonts: {
         primary: string;