🦉 additional reaction chip left

src/owl/styles/reactions.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
+
+const addReactionBase = {
+  padding: `${toRem(2)} ${config.space.S200}`,
+  backgroundColor: color.SurfaceVariant.Container,
+  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  selectors: {
+    '&:hover, &:focus-visible': {
+      backgroundColor: color.SurfaceVariant.ContainerHover,
+      opacity: 1,
+    },
+    '&:active': {
+      backgroundColor: color.SurfaceVariant.ContainerActive,
+    },
+  },
+} as const;
+
+export const AddReactionChip = style([
+  DefaultReset,
+  FocusOutline,
+  {
+    ...addReactionBase,
+    opacity: 0.6,
+  },
+]);
+
+export const AddReactionGhost = style([
+  DefaultReset,
+  FocusOutline,
+  {
+    ...addReactionBase,
+    position: 'absolute',
+    left: config.space.S400,
+    bottom: config.space.S100,
+    opacity: 0.5,
+    zIndex: 1,
+  },
+]);