Merge pull request #39 from outshift-open/fix-tags

fix: tags and select in dark theme

Author: psterpu-c

packages/open-ui-kit/src/components/tags/tag/types/index.ts

@@ -6,6 +6,7 @@
 
 export interface TagStatusStyle {
   backgroundColor: string;
+  border: string;
   iconColor: string;
   icon: React.ElementType;
 }

packages/open-ui-kit/src/components/tags/tag/utils/index.ts

@@ -25,56 +25,100 @@ import {
 export const selectTagStyle = (theme: Theme) => ({
   [TagStatus.Excellent]: {
     backgroundColor: theme.palette.vars?.excellentBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.excellentBorderWeak}`
+        : `none`,
     icon: StarIcon,
     iconColor: theme.palette.vars?.excellentIconDefault,
   },
   [TagStatus.Positive]: {
     backgroundColor: theme.palette.vars?.successBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.successBorderWeak}`
+        : `none`,
     icon: CheckCircleIcon,
     iconColor: theme.palette.vars?.successIconDefault,
   },
   [TagStatus.Warning]: {
     backgroundColor: theme.palette.vars?.warningBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.warningBorderWeak}`
+        : `none`,
     icon: WarningIcon,
     iconColor: theme.palette.vars?.warningIconDefault,
   },
   [TagStatus.SevereWarning]: {
     backgroundColor: theme.palette.vars?.severeWarningBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.severeWarningBorderWeak}`
+        : `none`,
     icon: WarningIcon,
     iconColor: theme.palette.vars?.severeWarningIconDefault,
   },
   [TagStatus.Negative]: {
     backgroundColor: theme.palette.vars?.negativeBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.negativeBorderWeak}`
+        : `none`,
     iconColor: theme.palette.vars?.negativeIconDefault,
     icon: CancelIcon,
   },
   [TagStatus.Inactive]: {
     backgroundColor: theme.palette.vars?.inactiveBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.inactiveBorderWeak}`
+        : `none`,
     iconColor: theme.palette.vars?.inactiveIconDefault,
     icon: RemoveCircleIcon,
   },
   [TagStatus.Disabled]: {
     backgroundColor: theme.palette.vars?.inactiveBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.inactiveBorderWeak}`
+        : `none`,
     iconColor: theme.palette.vars?.inactiveIconDefault,
     icon: BlockFlippedIcon,
   },
   [TagStatus.InProgress]: {
     backgroundColor: theme.palette.vars?.infoBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.infoBorderWeak}`
+        : `none`,
     icon: ScheduleIcon,
     iconColor: theme.palette.vars?.infoIconDefault,
   },
   [TagStatus.Info]: {
     backgroundColor: theme.palette.vars?.infoBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.infoBorderWeak}`
+        : `none`,
     icon: InfoIcon,
     iconColor: theme.palette.vars?.infoIconDefault,
   },
   [TagStatus.Allow]: {
     backgroundColor: theme.palette.vars?.neutralBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.neutralBorderWeak}`
+        : `none`,
     icon: CheckCircleOutlineIcon,
     iconColor: theme.palette.vars?.neutralIconDefault,
   },
   [TagStatus.Deny]: {
     backgroundColor: theme.palette.vars?.negativeBackgroundWeak,
+    border:
+      theme.palette.mode === "dark"
+        ? `1px solid ${theme.palette.vars?.negativeBorderWeak}`
+        : `none`,
     iconColor: theme.palette.vars?.negativeIconDefault,
     icon: BlockFlippedIcon,
   },
@@ -104,6 +148,7 @@ export const getTagStyle = ({
     }),
     ...(statusStyle && {
       backgroundColor: statusStyle?.backgroundColor,
+      border: statusStyle?.border,
     }),
     "&.MuiChip-outlinedDefault": {
       border: `2px dashed ${theme.palette.vars?.controlBorderDefault}`,

packages/open-ui-kit/src/theme/dark/dark-vars.ts

@@ -137,6 +137,7 @@ export const darkVars: VarsType = {
   successBorderActive: greenPalette[600],
   successBorderHover: greenPalette[300],
   successBorderDefault: greenPalette[500],
+  successBorderWeak: greenPalette[500],
   successIconInDisabled: greenPalette[10],
   successIconInActive: greenPalette[200],
   successIconInHover: greenPalette[100],
@@ -153,6 +154,7 @@ export const darkVars: VarsType = {
   negativeBorderHover: redPalette[300],
   negativeBorderDisabled: redPalette["alpha40"],
   negativeBorderDefault: redPalette[500],
+  negativeBorderWeak: redPalette[500],
   negativeIconDisabled: redPalette["alpha40"],
   negativeIconActive: redPalette[600],
   negativeIconHover: redPalette[300],
@@ -177,6 +179,7 @@ export const darkVars: VarsType = {
   excellentBorderHover: lightBluePalette[400],
   excellentBorderActive: lightBluePalette[900],
   excellentBorderDisabled: lightBluePalette["alpha40"],
+  excellentBorderWeak: lightBluePalette[700],
   excellentIconDefault: lightBluePalette[700],
   excellentIconHover: lightBluePalette[400],
   excellentIconActive: lightBluePalette[900],
@@ -199,6 +202,7 @@ export const darkVars: VarsType = {
   neutralBorderHover: bluePalette[200],
   neutralBorderActive: bluePalette[500],
   neutralBorderDisabled: bluePalette["alpha40"],
+  neutralBorderWeak: bluePalette[300],
   neutralIconDefault: bluePalette[300],
   neutralIconHover: bluePalette[200],
   neutralIconActive: bluePalette[500],
@@ -221,6 +225,7 @@ export const darkVars: VarsType = {
   infoBorderHover: purplePalette[300],
   infoBorderActive: purplePalette[600],
   infoBorderDisabled: purplePalette["alpha40"],
+  infoBorderWeak: purplePalette[500],
   infoIconDefault: purplePalette[400],
   infoIconHover: purplePalette[300],
   infoIconActive: purplePalette[600],
@@ -243,6 +248,7 @@ export const darkVars: VarsType = {
   inactiveBorderHover: greyPalette[500],
   inactiveBorderActive: greyPalette[800],
   inactiveBorderDisabled: greyPalette["alpha40"],
+  inactiveBorderWeak: greyPalette[400],
   inactiveIconDefault: greyPalette[400],
   inactiveIconHover: greyPalette[500],
   inactiveIconActive: greyPalette[800],
@@ -265,6 +271,7 @@ export const darkVars: VarsType = {
   warningBorderHover: lightOrangePalette[300],
   warningBorderActive: lightOrangePalette[600],
   warningBorderDisabled: lightOrangePalette["alpha40"],
+  warningBorderWeak: lightOrangePalette[500],
   warningIconDefault: lightOrangePalette[400],
   warningIconHover: lightOrangePalette[300],
   warningIconActive: lightOrangePalette[600],
@@ -287,6 +294,7 @@ export const darkVars: VarsType = {
   severeWarningBorderHover: orangePalette[300],
   severeWarningBorderActive: orangePalette[600],
   severeWarningBorderDisabled: orangePalette["alpha40"],
+  severeWarningBorderWeak: orangePalette[500],
   severeWarningIconDefault: orangePalette[400],
   severeWarningIconHover: orangePalette[300],
   severeWarningIconActive: orangePalette[600],
@@ -309,6 +317,7 @@ export const darkVars: VarsType = {
   moderateBorderHover: yellowPalette[300],
   moderateBorderActive: yellowPalette[600],
   moderateBorderDisabled: yellowPalette["alpha40"],
+  moderateBorderWeak: yellowPalette[500],
   moderateIconDefault: yellowPalette[50],
   moderateIconHover: yellowPalette[100],
   moderateIconActive: yellowPalette[200],

packages/open-ui-kit/src/theme/light/light-vars.ts

@@ -133,6 +133,7 @@ export const lightVars: VarsType = {
   successBorderActive: greenPalette[700],
   successBorderHover: greenPalette[400],
   successBorderDefault: greenPalette[600],
+  successBorderWeak: greenPalette[50],
   successIconInDisabled: greenPalette[10],
   successIconInActive: greenPalette[200],
   successIconInHover: greenPalette[100],
@@ -149,6 +150,7 @@ export const lightVars: VarsType = {
   negativeBorderHover: redPalette[400],
   negativeBorderDisabled: redPalette["alpha40"],
   negativeBorderDefault: redPalette[600],
+  negativeBorderWeak: redPalette[50],
   negativeIconDisabled: redPalette["alpha40"],
   negativeIconActive: redPalette[700],
   negativeIconHover: redPalette[400],
@@ -173,6 +175,7 @@ export const lightVars: VarsType = {
   excellentBorderHover: lightBluePalette[400],
   excellentBorderActive: lightBluePalette[900],
   excellentBorderDisabled: lightBluePalette["alpha40"],
+  excellentBorderWeak: lightBluePalette[700],
   excellentIconDefault: lightBluePalette[700],
   excellentIconHover: lightBluePalette[400],
   excellentIconActive: lightBluePalette[900],
@@ -195,6 +198,7 @@ export const lightVars: VarsType = {
   neutralBorderHover: bluePalette[500],
   neutralBorderActive: bluePalette[800],
   neutralBorderDisabled: bluePalette["alpha40"],
+  neutralBorderWeak: bluePalette[50],
   neutralIconDefault: bluePalette[600],
   neutralIconHover: bluePalette[500],
   neutralIconActive: bluePalette[800],
@@ -217,6 +221,7 @@ export const lightVars: VarsType = {
   infoBorderHover: purplePalette[500],
   infoBorderActive: purplePalette[800],
   infoBorderDisabled: purplePalette["alpha40"],
+  infoBorderWeak: purplePalette[50],
   infoIconDefault: purplePalette[600],
   infoIconHover: purplePalette[500],
   infoIconActive: purplePalette[800],
@@ -239,6 +244,7 @@ export const lightVars: VarsType = {
   inactiveBorderHover: greyPalette[500],
   inactiveBorderActive: greyPalette[800],
   inactiveBorderDisabled: greyPalette["alpha40"],
+  inactiveBorderWeak: greyPalette[50],
   inactiveIconDefault: greyPalette[400],
   inactiveIconHover: greyPalette[500],
   inactiveIconActive: greyPalette[800],
@@ -261,6 +267,7 @@ export const lightVars: VarsType = {
   warningBorderHover: lightOrangePalette[400],
   warningBorderActive: lightOrangePalette[700],
   warningBorderDisabled: lightOrangePalette["alpha40"],
+  warningBorderWeak: lightOrangePalette[50],
   warningIconDefault: lightOrangePalette[600],
   warningIconHover: lightOrangePalette[400],
   warningIconActive: lightOrangePalette[700],
@@ -283,6 +290,7 @@ export const lightVars: VarsType = {
   severeWarningBorderHover: orangePalette[400],
   severeWarningBorderActive: orangePalette[700],
   severeWarningBorderDisabled: orangePalette["alpha40"],
+  severeWarningBorderWeak: orangePalette[50],
   severeWarningIconDefault: orangePalette[600],
   severeWarningIconHover: orangePalette[400],
   severeWarningIconActive: orangePalette[700],
@@ -305,6 +313,7 @@ export const lightVars: VarsType = {
   moderateBorderHover: yellowPalette[400],
   moderateBorderActive: yellowPalette[700],
   moderateBorderDisabled: yellowPalette["alpha40"],
+  moderateBorderWeak: yellowPalette[50],
   moderateIconDefault: yellowPalette[600],
   moderateIconHover: yellowPalette[400],
   moderateIconActive: yellowPalette[700],

packages/open-ui-kit/src/theme/mui/input.tsx

@@ -135,7 +135,7 @@ export const inputComponents = (theme: Theme): Components => {
       styleOverrides: {
         root: {
           "& .MuiSelect-select": {
-            backgroundColor: theme.palette.vars.controlBackgroundWeak,
+            backgroundColor: theme.palette.vars.controlBackgroundDefault,
           },
         },
         icon: {

packages/open-ui-kit/src/theme/mui/tooltip.tsx

@@ -13,6 +13,10 @@ export const tooltipComponent = (theme: Theme): Components => {
         tooltip: {
           ...theme.typography.captionMedium,
           backgroundColor: theme.palette.vars.inactiveBackgroundActive,
+          color: theme.palette.vars.baseTextInverse,
+        },
+        arrow: {
+          color: theme.palette.vars.inactiveBackgroundActive,
         },
       },
     },

packages/open-ui-kit/src/types/vars.ts

@@ -112,6 +112,7 @@ export interface VarsType {
   successBorderActive: string;
   successBorderHover: string;
   successBorderDefault: string;
+  successBorderWeak: string;
   successIconInDisabled: string;
   successIconInActive: string;
   successIconInHover: string;
@@ -128,6 +129,7 @@ export interface VarsType {
   negativeBorderHover: string;
   negativeBorderDisabled: string;
   negativeBorderDefault: string;
+  negativeBorderWeak: string;
   negativeIconDisabled: string;
   negativeIconActive: string;
   negativeIconHover: string;
@@ -152,6 +154,7 @@ export interface VarsType {
   excellentBorderHover: string;
   excellentBorderActive: string;
   excellentBorderDisabled: string;
+  excellentBorderWeak: string;
   excellentIconDefault: string;
   excellentIconHover: string;
   excellentIconActive: string;
@@ -174,6 +177,7 @@ export interface VarsType {
   neutralBorderHover: string;
   neutralBorderActive: string;
   neutralBorderDisabled: string;
+  neutralBorderWeak: string;
   neutralIconDefault: string;
   neutralIconHover: string;
   neutralIconActive: string;
@@ -196,6 +200,7 @@ export interface VarsType {
   infoBorderHover: string;
   infoBorderActive: string;
   infoBorderDisabled: string;
+  infoBorderWeak: string;
   infoIconDefault: string;
   infoIconHover: string;
   infoIconActive: string;
@@ -218,6 +223,7 @@ export interface VarsType {
   inactiveBorderHover: string;
   inactiveBorderActive: string;
   inactiveBorderDisabled: string;
+  inactiveBorderWeak: string;
   inactiveIconDefault: string;
   inactiveIconHover: string;
   inactiveIconActive: string;
@@ -240,6 +246,7 @@ export interface VarsType {
   warningBorderHover: string;
   warningBorderActive: string;
   warningBorderDisabled: string;
+  warningBorderWeak: string;
   warningIconDefault: string;
   warningIconHover: string;
   warningIconActive: string;
@@ -262,6 +269,7 @@ export interface VarsType {
   severeWarningBorderHover: string;
   severeWarningBorderActive: string;
   severeWarningBorderDisabled: string;
+  severeWarningBorderWeak: string;
   severeWarningIconDefault: string;
   severeWarningIconHover: string;
   severeWarningIconActive: string;
@@ -284,6 +292,7 @@ export interface VarsType {
   moderateBorderHover: string;
   moderateBorderActive: string;
   moderateBorderDisabled: string;
+  moderateBorderWeak: string;
   moderateIconDefault: string;
   moderateIconHover: string;
   moderateIconActive: string;