Drop lit css

mucsi96 · May 4, 2024 · aad973e · aad973e
1 parent 3ac4acd
commit aad973e
Show file tree

Hide file tree

Showing 40 changed files with 509 additions and 639 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,3 +1,4 @@
 - add button group
 - add header menu
 - add text
+- drop dependency to lit and ungap
diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css
@@ -0,0 +1,14 @@
+button[bt-avatar] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  background-color: hsl(215, 14%, 34%);
+  border-radius: 9999px;
+  border: none;
+  color: hsl(216, 12%, 84%);
+  cursor: pointer;
+}
diff --git a/src/Avatar/Avatar.stories.ts b/src/Avatar/Avatar.stories.ts
@@ -1,19 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTAvatarProps } from './Avatar';
 
-const meta: Meta<BTAvatarProps> = {
+const meta: Meta = {
   title: 'BTAvatar',
   render: () =>
-    html`<header is="bt-header">
+    html`<header bt>
         <nav>
-          <a href="/"><h1 is="bt-heading">App</h1></a>
+          <a href="/"><h1 bt>App</h1></a>
           <section>
-            <button is="bt-avatar" id="avatar" popovertarget="avatar-popover">
+            <button bt-avatar id="avatar" popovertarget="avatar-popover">
               JD
             </button>
             <div popover id="avatar-popover" is="bt-popover">
-              <ul is="bt-dropdown-menu">
+              <ul bt-dropdown-menu>
                 <li separated>
                   <p>John Doe</p>
                   <p>[email protected]</p>
@@ -29,7 +28,7 @@ const meta: Meta<BTAvatarProps> = {
     layout: 'fullscreen',
   },
 };
-type Story = StoryObj<BTAvatarProps>;
+type Story = StoryObj;
 
 export default meta;
 

diff --git a/src/Avatar/Avatar.ts b/src/Avatar/Avatar.ts
@@ -1,26 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTAvatarProps = {};
-
-@customElement({
-  name: 'bt-avatar',
-  extends: 'button',
-  styles: css`
-    :host {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      overflow: hidden;
-      background-color: hsl(215, 14%, 34%);
-      border-radius: 9999px;
-      border: none;
-      color: hsl(216, 12%, 84%);
-      cursor: pointer;
-    }
-  `,
-})
-export class BTAvatar extends HTMLButtonElement {}
+import './Avatar.css';
diff --git a/src/Badge/Badge.css b/src/Badge/Badge.css
@@ -0,0 +1,21 @@
+span[bt-badge] {
+  position: relative;
+  color: rgb(30, 66, 159);
+  display: inline-block;
+  font-weight: 700;
+  white-space: nowrap;
+  margin: 0 0.6em;
+  z-index: 1;
+  transform: scale(0.8) translateY(0.05em);
+  transform-origin: center left;
+
+  &:before {
+    display: inline-block;
+    content: '';
+    inset: 0 -0.4em;
+    border-radius: 0.6em;
+    background-color: var(--bt-strong-text-color);
+    position: absolute;
+    z-index: -1;
+  }
+}
diff --git a/src/Badge/Badge.stories.ts b/src/Badge/Badge.stories.ts
@@ -1,18 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTBadgeProps } from './Badge';
 
-const meta: Meta<BTBadgeProps> = {
+const meta: Meta = {
   title: 'BTBadge',
 };
-type Story = StoryObj<BTBadgeProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Normal: Story = {
-  render: () => html`text<span is="bt-badge">Badge text</span>`,
+  render: () => html`text<span bt-badge>Badge text</span>`,
 };
 
 export const Large: Story = {
-  render: () => html`<h1>text<span is="bt-badge">Badge text</span></h1>`,
+  render: () => html`<h1>text<span bt-badge>Badge text</span></h1>`,
 };
diff --git a/src/Badge/Badge.ts b/src/Badge/Badge.ts
@@ -1,33 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTBadgeProps = {};
-
-@customElement({
-  name: 'bt-badge',
-  extends: 'span',
-  styles: css`
-    :host {
-      position: relative;
-      color: rgb(30, 66, 159);
-      display: inline-block;
-      font-weight: 700;
-      white-space: nowrap;
-      margin: 0 0.6em;
-      z-index: 1;
-      transform: scale(0.8) translateY(0.05em);
-      transform-origin: center left;
-
-      &:before {
-        display: inline-block;
-        content: '';
-        inset: 0 -0.4em;
-        border-radius: 0.6em;
-        background-color: var(--bt-strong-text-color);
-        position: absolute;
-        z-index: -1;
-      }
-    }
-  `,
-})
-export class BTBadge extends HTMLSpanElement {}
+import './Badge.css'
diff --git a/src/Button/Button.css b/src/Button/Button.css
@@ -0,0 +1,40 @@
+button[bt] {
+  --button-color: hsl(220, 89%, 53%);
+  --button-hover-color: hsl(221, 79%, 48%);
+  background-color: var(--button-color);
+  border: 1px solid var(--button-color);
+  padding: 10px 20px;
+  border-radius: 8px;
+  color: var(--bt-strong-text-color);
+  font-weight: 500;
+  font-family: inherit;
+  transition: background-color 0.3s;
+
+  &:not([disabled]):hover {
+    background-color: var(--button-hover-color);
+    border: 1px solid var(--button-hover-color);
+    cursor: pointer;
+  }
+
+  &[disabled] {
+    background-color: hsl(215, 28%, 17%);
+    color: var(--bt-text-color);
+    border: 1px solid hsl(215, 14%, 34%);
+    pointer-events: none;
+  }
+
+  &[bt-color='green'] {
+    --button-color: hsl(161, 92%, 25%);
+    --button-hover-color: hsl(163, 93%, 22%);
+  }
+
+  &[bt-color='red'] {
+    --button-color: hsl(0, 75%, 51%);
+    --button-hover-color: hsl(0, 74%, 45%);
+  }
+
+  &[bt-color='yellow'] {
+    --button-color: hsl(42, 93%, 46%);
+    --button-hover-color: hsl(37, 97%, 39%);
+  }
+}
diff --git a/src/Button/Button.stories.ts b/src/Button/Button.stories.ts
@@ -1,31 +1,30 @@
 import { spread } from '@open-wc/lit-helpers';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTButtonProps } from './Button';
 
-const meta: Meta<BTButtonProps> = {
+const meta: Meta = {
   title: 'BTButton',
   render: (props: any) =>
-    html`<button is="bt-button" ${spread(props)}>Button text</button>`,
+    html`<button bt ${spread(props)}>Button text</button>`,
 };
-type Story = StoryObj<BTButtonProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Green: Story = {
   args: {
-    color: 'green',
+    'bt-color': 'green',
   },
 };
 
 export const Red: Story = {
   args: {
-    color: 'red',
+    'bt-color': 'red',
   },
 };
 
 export const Yellow: Story = {
   args: {
-    color: 'yellow',
+    'bt-color': 'yellow',
   },
 };
diff --git a/src/Button/Button.ts b/src/Button/Button.ts
@@ -1,54 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTButtonProps = {
-  color: 'green' | 'red' | 'yellow';
-};
-
-@customElement({
-  name: 'bt-button',
-  extends: 'button',
-  styles: css`
-    :host {
-      --button-color: hsl(220, 89%, 53%);
-      --button-hover-color: hsl(221, 79%, 48%);
-      background-color: var(--button-color);
-      border: 1px solid var(--button-color);
-      padding: 10px 20px;
-      border-radius: 8px;
-      color: var(--bt-strong-text-color);
-      font-weight: 500;
-      font-family: inherit;
-      transition: background-color 0.3s;
-
-      &:not([disabled]):hover {
-        background-color: var(--button-hover-color);
-        border: 1px solid var(--button-hover-color);
-        cursor: pointer;
-      }
-
-      &[disabled] {
-        background-color: hsl(215, 28%, 17%);
-        color: var(--bt-text-color);
-        border: 1px solid hsl(215, 14%, 34%);
-        pointer-events: none;
-      }
-
-      &[color='green'] {
-        --button-color: hsl(161, 92%, 25%);
-        --button-hover-color: hsl(163, 93%, 22%);
-      }
-
-      &[color='red'] {
-        --button-color: hsl(0, 75%, 51%);
-        --button-hover-color: hsl(0, 74%, 45%);
-      }
-
-      &[color='yellow'] {
-        --button-color: hsl(42, 93%, 46%);
-        --button-hover-color: hsl(37, 97%, 39%);
-      }
-    }
-  `,
-})
-export class BTButton extends HTMLButtonElement {}
+import './Button.css';
diff --git a/src/DropdownMenu/DropdownMenu.css b/src/DropdownMenu/DropdownMenu.css
@@ -0,0 +1,76 @@
+ul[bt-dropdown-menu] {
+  list-style-type: unset;
+  margin: unset;
+  padding: unset;
+
+  li {
+    display: block;
+    font-size: 0.875rem;
+    color: hsl(220, 13%, 91%);
+    --padding: var(--padding-top, 0.5rem) 1rem var(--padding-bottom, 0.5rem);
+    --separator-gap: calc(0.3rem + 1px);
+
+    &:has(a, button):hover {
+      background-color: hsl(215, 14%, 34%);
+      color: var(--bt-strong-text-color);
+    }
+
+    &:not(:has(a, button)) {
+      padding: var(--padding);
+    }
+
+    &:first-child {
+      --padding-top: 0.75rem;
+    }
+
+    &:last-child {
+      --padding-bottom: 0.75rem;
+    }
+
+    &[separated] {
+      position: relative;
+      margin-bottom: var(--separator-gap);
+
+      &:after {
+        position: absolute;
+        height: 0.3rem;
+        bottom: calc(-0.15rem - 1px);
+        left: 0;
+        right: 0;
+        border-bottom: 1px solid hsla(215, 14%, 34%);
+        content: '';
+        display: block;
+      }
+    }
+
+    [separated] + & {
+      margin-top: var(--separator-gap);
+    }
+  }
+
+  a,
+  button {
+    padding: var(--padding);
+  }
+
+  a {
+    display: block;
+    text-decoration: unset;
+    color: inherit;
+  }
+
+  button {
+    width: 100%;
+    border: unset;
+    background-color: unset;
+    font: inherit;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+  }
+
+  p {
+    margin: unset;
+    padding: 0.2rem 0;
+  }
+}