@feedlog-ai/webcomponents 0.0.36 → 0.0.38

package/dist/collection/components/feedlog-badge/feedlog-badge.css

@@ -1,98 +1,88 @@
 :host {
   display: inline-block;
 
-  /* Light theme defaults */
-  --feedlog-badge-font-size: 0.75rem;
-  --feedlog-badge-font-weight: 500;
-  --feedlog-badge-padding-x: 0.625rem;
-  --feedlog-badge-padding-y: 0.125rem;
-  --feedlog-badge-border-radius: 9999px; /* Pill shape */
-
-  /* Default/Enhancement variant colors - Soft Blue */
-  --feedlog-blue-bg: #eff6ff;
-  --feedlog-blue-text: #1e40af;
-  --feedlog-blue-bg-hover: #dbeafe;
-
-  /* Destructive variant colors - Soft Red */
-  --feedlog-red-bg: #fef2f2;
-  --feedlog-red-text: #991b1b;
-  --feedlog-red-bg-hover: #fee2e2;
+  /* Use global tokens */
+  --feedlog-badge-font-size: var(--feedlog-text-xs);
+  --feedlog-badge-font-weight: var(--feedlog-font-medium);
+  --feedlog-badge-padding-x: var(--feedlog-space-3);
+  --feedlog-badge-padding-y: 0.25rem;
+  --feedlog-badge-border-radius: 9999px;
+
+  /* Default/Enhancement variant colors - Primary */
+  --feedlog-blue-bg: var(--feedlog-badge-enhancement-bg, #eef2ff);
+  --feedlog-blue-text: var(--feedlog-badge-enhancement-text, #4338ca);
+  --feedlog-blue-border: color-mix(in oklab, var(--feedlog-blue-text) 15%, transparent);
+
+  /* Destructive variant colors */
+  --feedlog-red-bg: var(--feedlog-badge-destructive-bg, #fef2f2);
+  --feedlog-red-text: var(--feedlog-badge-destructive-text, #b91c1c);
+  --feedlog-red-border: color-mix(in oklab, var(--feedlog-red-text) 15%, transparent);
 
   /* Secondary variant - Muted */
-  --feedlog-muted-bg: #f1f5f9;
-  --feedlog-muted-text: #475569;
-  --feedlog-muted-bg-hover: #e2e8f0;
+  --feedlog-muted-bg: var(--feedlog-badge-secondary-bg, #f1f5f9);
+  --feedlog-muted-text: var(--feedlog-badge-secondary-text, #475569);
+  --feedlog-muted-border: color-mix(in oklab, var(--feedlog-muted-text) 15%, transparent);
 }
 
 :host(.dark) {
-  /* Dark theme values */
-  /* Default/Enhancement variant colors - Dark Blue */
-  --feedlog-blue-bg: rgba(37, 99, 235, 0.15);
-  --feedlog-blue-text: #93c5fd;
-  --feedlog-blue-bg-hover: rgba(37, 99, 235, 0.25);
-
-  /* Destructive variant colors - Dark Red */
-  --feedlog-red-bg: rgba(220, 38, 38, 0.15);
-  --feedlog-red-text: #fca5a5;
-  --feedlog-red-bg-hover: rgba(220, 38, 38, 0.25);
-
-  /* Secondary variant - Dark Muted */
-  --feedlog-muted-bg: oklch(0.32 0.01 260);
-  --feedlog-muted-text: oklch(0.8 0.02 260);
-  --feedlog-muted-bg-hover: oklch(0.38 0.01 260);
+  /* Inherits from global dark theme */
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
+  gap: var(--feedlog-space-1);
   font-size: var(--feedlog-badge-font-size);
   font-weight: var(--feedlog-badge-font-weight);
   padding: var(--feedlog-badge-padding-y) var(--feedlog-badge-padding-x);
   border-radius: var(--feedlog-badge-border-radius);
   white-space: nowrap;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  font-family: inherit;
+  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+  font-family: var(--feedlog-font-family);
   border: 1px solid transparent;
 }
 
-/* Default variant - Soft Blue */
+/* Default variant */
 .badge-default {
   background-color: var(--feedlog-blue-bg);
   color: var(--feedlog-blue-text);
+  border: 1px solid var(--feedlog-blue-border);
 }
 
 .badge-default:hover {
-  background-color: var(--feedlog-blue-bg-hover);
+  opacity: 0.9;
 }
 
-/* Enhancement variant - Soft Blue */
+/* Enhancement variant */
 .badge-enhancement {
   background-color: var(--feedlog-blue-bg);
   color: var(--feedlog-blue-text);
+  border: 1px solid var(--feedlog-blue-border);
 }
 
 .badge-enhancement:hover {
-  background-color: var(--feedlog-blue-bg-hover);
+  opacity: 0.9;
 }
 
-/* Destructive variant - Soft Red */
+/* Destructive variant */
 .badge-destructive {
   background-color: var(--feedlog-red-bg);
   color: var(--feedlog-red-text);
+  border: 1px solid var(--feedlog-red-border);
 }
 
 .badge-destructive:hover {
-  background-color: var(--feedlog-red-bg-hover);
+  opacity: 0.9;
 }
 
-/* Secondary variant - Muted styling */
+/* Secondary variant */
 .badge-secondary {
   background-color: var(--feedlog-muted-bg);
   color: var(--feedlog-muted-text);
+  border: 1px solid var(--feedlog-muted-border);
 }
 
 .badge-secondary:hover {
-  background-color: var(--feedlog-muted-bg-hover);
+  opacity: 0.9;
 }

package/dist/collection/components/feedlog-badge/feedlog-badge.js

@@ -12,7 +12,7 @@ export class FeedlogBadge {
         this.variant = 'default';
     }
     render() {
-        return (h("span", { key: '22e5d49e033459b4e3e409ffa0e76641457ad740', class: `badge badge-${this.variant}` }, h("slot", { key: '8f986c5150aa39034f090a258231e45363f9cac9' })));
+        return (h("span", { key: '6ea83e77cecfa5589ba64b86d96053668407be8f', class: `badge badge-${this.variant}`, part: "base" }, h("slot", { key: '292fba2dd5ca3ec6455c9114f883e21c74846695' })));
     }
     static get is() { return "feedlog-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-button/feedlog-button.css

@@ -1,55 +1,21 @@
 :host {
   display: inline-block;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  
-  /* Light theme defaults */
-  --feedlog-background: #ffffff;
-  --feedlog-foreground: oklch(0.145 0 0);
-  --feedlog-primary: #030213;
-  --feedlog-primary-foreground: oklch(1 0 0);
-  --feedlog-secondary: oklch(0.95 0.0058 264.53);
-  --feedlog-secondary-foreground: #030213;
-  --feedlog-muted: #ececf0;
-  --feedlog-accent: #e9ebef;
-  --feedlog-accent-foreground: #030213;
-  --feedlog-border: rgba(0, 0, 0, 0.1);
-  --feedlog-input: transparent;
-  --feedlog-ring: oklch(0.708 0 0);
-  --feedlog-destructive: #d4183d;
-  --feedlog-radius: 0.625rem;
-}
-
-:host(.dark) {
-  /* Dark theme values */
-  --feedlog-background: oklch(0.145 0 0);
-  --feedlog-foreground: oklch(0.985 0 0);
-  --feedlog-primary: oklch(0.985 0 0);
-  --feedlog-primary-foreground: oklch(0.205 0 0);
-  --feedlog-secondary: oklch(0.269 0 0);
-  --feedlog-secondary-foreground: oklch(0.985 0 0);
-  --feedlog-muted: oklch(0.269 0 0);
-  --feedlog-accent: oklch(0.269 0 0);
-  --feedlog-accent-foreground: oklch(0.985 0 0);
-  --feedlog-border: oklch(0.269 0 0);
-  --feedlog-input: oklch(0.269 0 0);
-  --feedlog-ring: oklch(0.439 0 0);
-  --feedlog-destructive: oklch(0.396 0.141 25.723);
 }
 
 button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--feedlog-space-2);
   white-space: nowrap;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: calc(var(--feedlog-radius) - 2px);
+  font-size: var(--feedlog-text-sm);
+  font-weight: var(--feedlog-font-medium);
+  border-radius: var(--feedlog-radius);
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 0.15s ease;
   outline: none;
-  font-family: inherit;
+  font-family: var(--feedlog-font-family);
 }
 
 button:disabled {
@@ -59,26 +25,25 @@ button:disabled {
 }
 
 button:focus-visible {
-  border-color: var(--feedlog-ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--feedlog-ring) 50%, transparent);
+  outline: 2px solid var(--feedlog-ring);
+  outline-offset: 2px;
 }
 
 /* Default variant */
 .button-default {
   background-color: var(--feedlog-primary);
   color: var(--feedlog-primary-foreground);
-  border-color: transparent;
 }
 
 .button-default:hover:not(:disabled) {
-  background-color: color-mix(in oklab, var(--feedlog-primary) 90%, transparent);
+  opacity: 0.9;
 }
 
 /* Outline variant */
 .button-outline {
   background-color: var(--feedlog-background);
   color: var(--feedlog-foreground);
-  border-color: var(--feedlog-border);
+  border-color: var(--feedlog-input);
 }
 
 .button-outline:hover:not(:disabled) {
@@ -86,20 +51,10 @@ button:focus-visible {
   color: var(--feedlog-accent-foreground);
 }
 
-:host(.dark) .button-outline {
-  background-color: transparent;
-  border-color: var(--feedlog-input);
-}
-
-:host(.dark) .button-outline:hover:not(:disabled) {
-  background-color: color-mix(in oklab, var(--feedlog-accent) 50%, transparent);
-}
-
 /* Ghost variant */
 .button-ghost {
   background-color: transparent;
   color: var(--feedlog-foreground);
-  border-color: transparent;
 }
 
 .button-ghost:hover:not(:disabled) {
@@ -110,23 +65,18 @@ button:focus-visible {
 /* Destructive variant */
 .button-destructive {
   background-color: var(--feedlog-destructive);
-  color: #ffffff;
-  border-color: transparent;
+  color: var(--feedlog-destructive-foreground);
 }
 
 .button-destructive:hover:not(:disabled) {
-  background-color: color-mix(in oklab, var(--feedlog-destructive) 90%, transparent);
-}
-
-:host(.dark) .button-destructive {
-  background-color: color-mix(in oklab, var(--feedlog-destructive) 60%, transparent);
+  opacity: 0.9;
 }
 
 /* Size variants */
 .button-size-sm {
   height: 2rem;
   padding: 0 0.75rem;
-  font-size: 0.75rem;
+  font-size: var(--feedlog-text-xs);
 }
 
 /* Icon-only small buttons */
@@ -136,14 +86,14 @@ button:focus-visible {
 }
 
 .button-size-default {
-  height: 2.25rem;
+  height: 2.5rem;
   padding: 0.5rem 1rem;
 }
 
 .button-size-lg {
-  height: 2.5rem;
-  padding: 0.625rem 1.5rem;
-  font-size: 1rem;
+  height: 2.75rem;
+  padding: 0.5rem 1.5rem;
+  font-size: var(--feedlog-text-base);
 }
 
 /* SVG icons styling */

package/dist/collection/components/feedlog-button/feedlog-button.js

@@ -30,7 +30,7 @@ export class FeedlogButton {
     }
     render() {
         const sizeClass = this.size === 'default' ? 'button-size-default' : `button-size-${this.size}`;
-        return (h("button", { key: '6cdd8347def51592707b1fb9aab0dc565ca0f76f', type: this.type, class: `button button-${this.variant} ${sizeClass}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '3f3845195fa4b8a551473ecf1d5702321a31763e' })));
+        return (h("button", { key: 'f8f507c061284f630e36111ee671b29b6d3b20dd', type: this.type, class: `button button-${this.variant} ${sizeClass}`, disabled: this.disabled, onClick: this.handleClick, part: "base" }, h("slot", { key: '48403bd46271b21a4eb54c94c9193dadcd32fdcf' })));
     }
     static get is() { return "feedlog-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-card/feedlog-card.css

@@ -1,23 +1,6 @@
 :host {
   display: block;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  
-  /* Light theme defaults */
-  --feedlog-card: #ffffff;
-  --feedlog-card-foreground: oklch(0.145 0 0);
-  --feedlog-border: rgba(0, 0, 0, 0.1);
-  --feedlog-radius: 0.625rem;
-  --feedlog-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --feedlog-card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-:host(.dark) {
-  /* Dark theme values */
-  --feedlog-card: oklch(0.145 0 0);
-  --feedlog-card-foreground: oklch(0.985 0 0);
-  --feedlog-border: oklch(0.269 0 0);
-  --feedlog-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --feedlog-card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+  font-family: var(--feedlog-font-family);
 }
 
 .feedlog-card {
@@ -25,23 +8,38 @@
   color: var(--feedlog-card-foreground);
   border: 1px solid var(--feedlog-border);
   border-radius: var(--feedlog-radius);
-  box-shadow: var(--feedlog-card-shadow);
+  box-shadow: var(--feedlog-shadow-sm);
   transition: box-shadow 0.15s ease;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .feedlog-card:hover {
-  box-shadow: var(--feedlog-card-hover-shadow);
+  box-shadow: var(--feedlog-shadow);
 }
 
-::slotted([slot="header"]) {
-  display: block;
+.feedlog-card-header {
+  padding: var(--feedlog-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--feedlog-space-1);
 }
 
-::slotted([slot="content"]) {
-  display: block;
+.feedlog-card-content {
+  padding: var(--feedlog-space-6);
+  padding-top: 0;
+}
+
+.feedlog-card-footer {
+  padding: var(--feedlog-space-6);
+  padding-top: 0;
+  display: flex;
+  align-items: center;
 }
 
+::slotted([slot="header"]),
+::slotted([slot="content"]),
 ::slotted([slot="footer"]) {
   display: block;
 }

package/dist/collection/components/feedlog-card/feedlog-card.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class FeedlogCard {
     render() {
-        return (h("div", { key: '293a80e66adedfc1af29daf72390a4f464321b96', class: "feedlog-card" }, h("slot", { key: 'b7e5a827f89035e791d9c756db0f66198e6c5a38', name: "header" }), h("slot", { key: 'da89fee0a01068c8438564848f218faa9c5d849e', name: "content" }), h("slot", { key: '30b05e80e4189c0f73810a48f64e072dfac83267', name: "footer" })));
+        return (h("div", { key: 'c95d00e338fcf8d985407cda878f50d173c86c71', class: "feedlog-card", part: "base" }, h("div", { key: '5001f2e08495d54abb59ddcada568c9ff4c6fb87', class: "feedlog-card-header", part: "header" }, h("slot", { key: 'b6c6f18a458249aedfb4a95679d4592cfcac4187', name: "header" })), h("div", { key: '99faa1bd9af52fb23cb304e0a87d35b8e14a6358', class: "feedlog-card-content", part: "content" }, h("slot", { key: '44370b05b0c2335d6c7271f2807189a7a208be71', name: "content" })), h("div", { key: 'e3876d4f589f9ecf917b5a9b5919363c19d08c93', class: "feedlog-card-footer", part: "footer" }, h("slot", { key: 'be69074d341c8e88f9227d2f035f22838469b035', name: "footer" }))));
     }
     static get is() { return "feedlog-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-card/feedlog-card.stories.js

@@ -17,5 +17,5 @@ export const HeaderOnly = {
     render: () => (h("feedlog-card", { style: { width: '400px' } }, h("div", { slot: "header" }, h("h3", { style: { margin: '0' } }, "Simple Header Card"), h("p", { style: { margin: '0.5rem 0 0 0', color: '#666', fontSize: '0.875rem' } }, "This card only uses the header slot.")))),
 };
 export const IssueCard = {
-    render: () => (h("feedlog-card", { style: { width: '500px' } }, h("div", { slot: "header", style: { display: 'flex', alignItems: 'flex-start', gap: '1rem' } }, h("feedlog-button", { variant: "outline", size: "sm" }, "\uD83D\uDC4D 12"), h("div", null, h("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' } }, h("h3", { style: { margin: '0' } }, "Add dark mode support"), h("feedlog-badge", null, "Enhancement")), h("p", { style: { margin: '0', color: '#666', fontSize: '0.875rem' } }, "It would be great to have a dark mode option for the dashboard."))))),
+    render: () => (h("feedlog-card", { style: { width: '500px' } }, h("div", { slot: "header", style: { display: 'flex', alignItems: 'flex-start', gap: '1rem' } }, h("feedlog-button", { variant: "outline", size: "sm" }, "\uD83D\uDC4D 12"), h("div", null, h("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' } }, h("h3", { style: { margin: '0' } }, "Enable media support for card components"), h("feedlog-badge", null, "Enhancement")), h("p", { style: { margin: '0', color: '#666', fontSize: '0.875rem' } }, "Support for embedded media in card components using standard Markdown syntax."))))),
 };