add text

TODO.md

@@ -1,2 +0,0 @@
-- add button group
-- add text

src/Docs.mdx

@@ -12,6 +12,7 @@ import * as MainStories from './Main/Main.stories';
 import * as NotificationStories from './Notifications/Notifications.stories';
 import * as PopoverStories from './Popover/Popover.stories';
 import * as TableStories from './Table/Table.stories';
+import * as TextStories from './Text/Text.stories';
 
 <Meta title="" />
 
@@ -107,3 +108,11 @@ document.dispatchEvent(new ErrorNotificationEvent('Failure'));
 
 <Canvas of={TableStories.Default} />
 <Canvas of={TableStories.WithSelection} />
+
+# Text
+
+<Canvas of={TextStories.Default} />
+<Canvas of={TextStories.Green} />
+<Canvas of={TextStories.Red} />
+<Canvas of={TextStories.White} />
+<Canvas of={TextStories.Blue} />

src/Text/Text.css

@@ -0,0 +1,23 @@
+[bt-text] {
+  color: hsl(218, 11%, 65%);
+  font-family: system-ui;
+  font-size: unset;
+  font-weight: initial;
+  margin: initial;
+
+  &[bt-green] {
+    color: hsl(111, 32%, 66%);
+  }
+
+  &[bt-red] {
+    color: hsl(0, 91%, 74%);
+  }
+
+  &[bt-white] {
+    color: hsl(216, 12%, 84%);
+  }
+
+  &[bt-blue] {
+    color: hsl(217, 93%, 72%);
+  }
+}

src/Text/Text.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: Meta = {
+  title: 'BTText',
+};
+type Story = StoryObj;
+
+export default meta;
+
+export const Default: Story = {
+  render: () => html`<span bt-text>Example text </span>`,
+};
+
+export const Green: Story = {
+  render: () => html`<p bt-text bt-green>Example text </p>`,
+};
+
+export const Red: Story = {
+  render: () => html`<h1 bt-text bt-red>Example text </h1>`,
+};
+
+export const White: Story = {
+  render: () => html`<h2 bt-text bt-white>Example text </h2>`,
+};
+
+export const Blue: Story = {
+  render: () => html`<h3 bt-text bt-blue>Example text </h3>`,
+};

src/Text/Text.ts

@@ -0,0 +1,4 @@
+import { injectStyles } from '../utils';
+import styles from './Text.css?raw&inline';
+
+injectStyles(styles);

src/index.ts

@@ -12,4 +12,5 @@ export * from './Notifications/Notifications';
 export * from './Popover/Popover';
 export * from './Table/RowSelector';
 export * from './Table/Table';
+export * from './Text/Text';
 export * from './utils';