feat: add meta fields

.storybook/ThemeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import styles from "./theme.module.css";
+
+export const ThemeProvider = <Theme,>({
+  children,
+  theme,
+}: {
+  children?: ReactNode;
+  theme?: Theme;
+}) => {
+  return (
+    <div className={styles.theme} data-theme={theme}>
+      {children}
+    </div>
+  );
+};

.storybook/main.ts

@@ -6,9 +6,14 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-themes",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+<<<<<<< HEAD
     "@storybook/addon-themes",
+=======
+    "storybook-addon-theme-provider",
+>>>>>>> 6c519e8 (theming etc)
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.tsx

@@ -1,3 +1,8 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 import React from "react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { Preview, StoryFn } from "@storybook/react";
@@ -6,24 +11,84 @@ import "../lib/css/global.css";
 
 /** @type { import('@storybook/react').Preview } */
 const preview: Preview = {
+=======
+import type { Preview } from "@storybook/react";
+=======
+import { Preview } from "@storybook/react";
+>>>>>>> 6df61e2 (etc)
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { ThemeProvider } from "./ThemeProvider";
+import "../lib/css/global.css";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+>>>>>>> 269fc2e (list item)
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+<<<<<<< HEAD
+<<<<<<< HEAD
   },
   decorators: [
     (Story: StoryFn, data) => {
       const { tags, globals } = data;
 
+<<<<<<< HEAD
+      return (
+        <StoryDecorator tags={tags} theme={globals?.theme}>
+          <Story />
+        </StoryDecorator>
+      );
+    },
+=======
+  } /*
+=======
+  },
+  decorators: [
+    /*
+    withThemeFromJSXProvider({
+      themes: {
+        global: "global",
+        neutral: "neutral",
+        company: "company",
+        person: "person",
+      },
+      defaultTheme: "neutral",
+      Provider: ThemeProvider,
+    }),
+  */
+    (Story: StoryFn, data) => {
+      const { tags, parameters } = data;
+
+      console.log("DATA", data);
+
+      const isStable = (tags || []).includes("stable");
+      const state = isStable ? "stable" : "experimental";
+      return (
+        <>
+          <span className="preview-container-stage-tag" data-tag={state}>
+            {state}
+          </span>
+          <Story />
+        </>
+=======
       return (
         <StoryDecorator tags={tags} theme={globals?.theme}>
           <Story />
         </StoryDecorator>
+>>>>>>> bfd012c (feat: list item + meta tags)
       );
     },
+  ],
+<<<<<<< HEAD
+  /*
+>>>>>>> 1b23eba (push it)
+  decorators: [
+>>>>>>> 269fc2e (list item)
     withThemeByDataAttribute({
       themes: {
         global: "global",
@@ -32,8 +97,42 @@ const preview: Preview = {
         person: "person",
       },
       defaultTheme: "neutral",
+<<<<<<< HEAD
+    }),
+=======
+      attributeName: "data-theme",
     }),
   ],
+  /*
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case "page":
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case "page-mobile":
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+>>>>>>> 269fc2e (list item)
+  ],
+  */
+=======
+>>>>>>> 6c519e8 (theming etc)
 };
 
 export default preview;

.storybook/theme.module.css

@@ -0,0 +1,3 @@
+.theme[data-theme] {
+  background: var(--theme-background-subtle);
+}

lib/components/Avatar/avatar.module.css

@@ -1,4 +1,6 @@
 .avatar {
+  flex-grow: 0;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;

lib/components/Badge/Badge.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Atoms/Badge/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Alert: Story = {
+  args: {
+    color: 'alert',
+  },
+};
+
+export const UnreadCount: Story = {
+  args: {
+    label: '2',
+    color: 'alert',
+  },
+};

lib/components/Badge/Badge.tsx

@@ -1,19 +1,82 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './badge.module.css';
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
 
+export type BadgeColor = "subtle" | "alert";
+export type BadgeSize = "sm";
+>>>>>>> 5a289ef (badge fixes restored)
+
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
+=======
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+>>>>>>> 1b23eba (push it)
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
+=======
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+>>>>>>> 722d2dc (badge biome fix)
+
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+>>>>>>> 5364fc1 (badge fixes)
 export interface BadgeProps {
   label?: string | number;
-  variant?: 'neutral' | 'strong';
-  size?: 'medium' | 'small';
+  color?: BadgeColor;
+  size?: BadgeSize;
+  className?: string;
   children?: ReactNode;
 }
 
-// TODO: add aria-label to the badge
-export const Badge = ({ label, variant = 'neutral', size = 'medium', children }: BadgeProps) => {
-  const classNames = cx(styles.badge, {
-    [styles.strong]: variant === 'strong',
-    [styles.small]: size === 'small',
-  });
-  return <span className={classNames}>{label || children}</span>;
+<<<<<<< HEAD
+<<<<<<< HEAD
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+=======
+export const Badge = ({
+  label,
+  color = "subtle",
+  size = "sm",
+  className,
+  children,
+}: BadgeProps) => {
+  return (
+    <span
+      className={cx(styles.badge, className)}
+      data-color={color}
+      data-size={size}
+    >
+>>>>>>> 5a289ef (badge fixes restored)
+=======
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+>>>>>>> 722d2dc (badge biome fix)
+      <span className={styles.label}>{label || children}</span>
+    </span>
+  );
 };

lib/components/Badge/badge.module.css

@@ -1,36 +1,27 @@
 .badge {
   display: inline-flex;
-  box-sizing: border-box;
-  padding: 4px 8px;
-  justify-content: center;
-  min-height: 24px;
-  min-width: 24px;
-  width: auto;
-  height: 24px;
   align-items: center;
-  flex-shrink: 0;
-  background: var(--black-5, rgba(0, 0, 0, 0.05));
-  color: var(--black-100, #000);
+  justify-content: center;
+  white-space: nowrap;
+
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.5em 0.5em;
+
+  min-width: 2em;
+  border-radius: 2em;
+}
+
+.badge[data-size="sm"] {
   font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1rem;
-  border-radius: 12px;
 }
 
-.strong {
-  font-weight: 700;
-  background: var(--Action-Important, #e02e49);
-  color: #ffffff;
+.badge[data-color="subtle"] {
+  background-color: var(--theme-surface-default);
+  color: var(--theme-text-subtle);
 }
 
-.small {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 4px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+.badge[data-color="alert"] {
+  background-color: #e02e49;
+  color: white;
 }

lib/components/Button/ButtonBase.tsx

@@ -1,11 +1,21 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
+=======
+import type { ElementType, ReactNode } from "react";
+import cx from "classnames";
+>>>>>>> df5a3c6 (button colors)
+=======
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+>>>>>>> 058ad14 (list + dialogs)
 
 import styles from './buttonBase.module.css';
 
 export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonColor = 'primary' | 'link';
+export type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**