Merge branch 'main' into ime-support-2

styles/src/styleTree/hoverPopover.ts

@@ -2,22 +2,48 @@ import Theme from "../themes/common/theme";
 import { backgroundColor, border, popoverShadow, text } from "./components";
 
 export default function HoverPopover(theme: Theme) {
+  let baseContainer = {
+    background: backgroundColor(theme, "on500"),
+    cornerRadius: 8,
+    padding: {
+      left: 8,
+      right: 8,
+      top: 4,
+      bottom: 4
+    },
+    shadow: popoverShadow(theme),
+    border: border(theme, "secondary"),
+    margin: {
+      left: -8,
+    },
+  };
+
   return {
-    container: {
-      background: backgroundColor(theme, "on500"),
-      cornerRadius: 8,
-      padding: {
-        left: 8,
-        right: 8,
-        top: 4,
-        bottom: 4,
+    container: baseContainer,
+    infoContainer: {
+      ...baseContainer,
+      background: backgroundColor(theme, "on500Info"),
+      border: {
+        color: theme.ramps.blue(0).hex(),
+        width: 1,
       },
-      shadow: popoverShadow(theme),
-      border: border(theme, "primary"),
-      margin: {
-        left: -8,
+    },
+    warningContainer: {
+      ...baseContainer,
+      background: backgroundColor(theme, "on500Warning"),
+      border: {
+        color: theme.ramps.yellow(0).hex(),
+        width: 1,
       },
     },
+    errorContainer: {
+      ...baseContainer,
+      background: backgroundColor(theme, "on500Error"),
+      border: {
+        color: theme.ramps.red(0).hex(),
+        width: 1,
+      }
+    },
     block_style: {
       padding: { top: 4 },
     },

styles/src/themes/common/base16.ts

@@ -88,16 +88,31 @@ export function createTheme(
       hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
       active: withOpacity(sample(ramps.red, 0.5), 0.25),
     },
+    on500Error: {
+      base: sample(ramps.red, 0.05),
+      hovered: sample(ramps.red, 0.1),
+      active: sample(ramps.red, 0.15),
+    },
     warning: {
       base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
       hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
       active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
     },
+    on500Warning: {
+      base: sample(ramps.yellow, 0.05),
+      hovered: sample(ramps.yellow, 0.1),
+      active: sample(ramps.yellow, 0.15),
+    },
     info: {
       base: withOpacity(sample(ramps.blue, 0.5), 0.15),
       hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
       active: withOpacity(sample(ramps.blue, 0.5), 0.25),
     },
+    on500Info: {
+      base: sample(ramps.blue, 0.05),
+      hovered: sample(ramps.blue, 0.1),
+      active: sample(ramps.blue, 0.15),
+    },
   };
 
   const borderColor = {
@@ -106,10 +121,10 @@ export function createTheme(
     muted: sample(ramps.neutral, isLight ? 1 : 3),
     active: sample(ramps.neutral, isLight ? 4 : 3),
     onMedia: withOpacity(darkest, 0.1),
-    ok: withOpacity(sample(ramps.green, 0.5), 0.15),
-    error: withOpacity(sample(ramps.red, 0.5), 0.15),
-    warning: withOpacity(sample(ramps.yellow, 0.5), 0.15),
-    info: withOpacity(sample(ramps.blue, 0.5), 0.15),
+    ok: sample(ramps.green, 0.3),
+    error: sample(ramps.red, 0.3),
+    warning: sample(ramps.yellow, 0.3),
+    info: sample(ramps.blue, 0.3),
   };
 
   const textColor = {

styles/src/themes/common/theme.ts

@@ -79,8 +79,11 @@ export default interface Theme {
     on500: BackgroundColorSet;
     ok: BackgroundColorSet;
     error: BackgroundColorSet;
+    on500Error: BackgroundColorSet;
     warning: BackgroundColorSet;
+    on500Warning: BackgroundColorSet;
     info: BackgroundColorSet;
+    on500Info: BackgroundColorSet;
   };
   borderColor: {
     primary: string;