Style Customization

Customize the changelog widget to match your product. Set CSS custom properties on the component and it will work with vanilla HTML, React, Vue, or any framework.

Quick copy-paste examples

1. Emerald theme (serif typography, green accent):

feedlog-issues-client,
feedlog-issues {
  font-family: 'Georgia', 'Times New Roman', serif;
  /* Card */
  --feedlog-card-padding: 1.5rem;
  --feedlog-card-radius: 0.875rem;
  --feedlog-radius: 0.875rem;
  --feedlog-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 3px -1px rgba(0, 0, 0, 0.1);
  --feedlog-shadow-hover-enhancement:
    0 8px 24px -4px rgba(5, 150, 105, 0.15), 0 4px 8px -2px rgba(5, 150, 105, 0.1);
  --feedlog-shadow-hover-bug:
    0 8px 24px -4px rgba(220, 38, 38, 0.15), 0 4px 8px -2px rgba(220, 38, 38, 0.1);
  /* Typography */
  --feedlog-title-font-size: 1.0625rem;
  --feedlog-title-font-weight: 700;
  --feedlog-body-font-size: 0.875rem;
  --feedlog-body-line-height: 1.6;
  --feedlog-timestamp-font-size: 0.75rem;
  /* Colors */
  --feedlog-accent-color: #059669;
  --feedlog-muted: #ecfdf5;
  --feedlog-muted-foreground: #047857;
  --feedlog-border: rgba(5, 150, 105, 0.2);
}

2. Minimal (compact, subtle shadows):

feedlog-issues-client,
feedlog-issues {
  --feedlog-card-padding: 1rem;
  --feedlog-card-radius: 0.5rem;
  --feedlog-radius: 0.5rem;
  --feedlog-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --feedlog-shadow-hover-enhancement: 0 2px 8px rgba(0, 0, 0, 0.08);
  --feedlog-shadow-hover-bug: 0 2px 8px rgba(0, 0, 0, 0.08);
  --feedlog-title-font-size: 0.9375rem;
  --feedlog-body-font-size: 0.8125rem;
}

3. Brand accent (swap accent color only):

feedlog-issues-client,
feedlog-issues {
  --feedlog-accent-color: #7c3aed; /* purple */
  /* Or: #dc2626 (red), #0891b2 (cyan), #ea580c (orange) */
}

See the CustomCSSVars story (packages/webcomponents/src/components/feedlog-issues/feedlog-issues.stories.tsx) in Storybook for a live example. Run npm run storybook in the feedlog-toolkit repo to explore all variants.

CSS variables reference

Light-theme defaults from @feedlog-ai/webcomponents (global tokens, each component host, and optional overrides). The copy button includes every host-defined default; optional hooks are listed in the table but omitted from the paste (they only override built-in fallbacks).

VariableDescriptionDefault (light)Source
--feedlog-accentAccent#e9ebeffeedlog-button
--feedlog-accent-colorAccent color#2563ebfeedlog-issue
--feedlog-accent-foregroundAccent foreground#030213feedlog-button
--feedlog-backgroundBackground#fffffffeedlog-issue
--feedlog-badge-border-radiusBadge border radius9999pxfeedlog-badge
--feedlog-badge-font-sizeBadge font size0.75remfeedlog-badge
--feedlog-badge-font-weightBadge font weight500feedlog-badge
--feedlog-badge-padding-xBadge padding x0.625remfeedlog-badge
--feedlog-badge-padding-yBadge padding y0.125remfeedlog-badge
--feedlog-blue-100Blue 100oklch(0.932 0.032 255.585)feedlog-issues
--feedlog-blue-400Blue 400oklch(0.707 0.165 254.624)feedlog-issue
--feedlog-blue-500Blue 500oklch(0.623 0.214 259.815)Global (:root)
--feedlog-blue-600Blue 600oklch(0.546 0.245 262.881)feedlog-issue
--feedlog-blue-700Blue 700oklch(0.488 0.243 264.376)Global (:root)
--feedlog-blue-900Blue 900oklch(0.379 0.146 265.522)Global (:root)
--feedlog-blue-bgBlue bg#eff6fffeedlog-badge
--feedlog-blue-bg-hoverBlue bg hover#dbeafefeedlog-badge
--feedlog-blue-textBlue text#1e40affeedlog-badge
--feedlog-body-font-sizeBody font size0.9375remfeedlog-issue
--feedlog-body-line-heightBody line height1.65feedlog-issue
--feedlog-borderBorderrgba(0, 0, 0, 0.06)feedlog-issue
--feedlog-cardCard#fffffffeedlog-issue
--feedlog-card-accent-gradient-bugCard accent gradient buglinear-gradient( 90deg, var(--feedlog-red-600), var(--feedlog-destructive), var(--feedlog-red-600) )feedlog-issue
--feedlog-card-accent-gradient-enhancementCard accent gradient enhancementlinear-gradient( 90deg, var(--feedlog-blue-400), var(--feedlog-accent-color), var(--feedlog-blue-600) )feedlog-issue
--feedlog-card-accent-heightCard accent height3pxfeedlog-issue
--feedlog-card-accent-opacityCard accent opacity0.85feedlog-issue
--feedlog-card-foregroundCard foregroundoklch(0.145 0 0)feedlog-issue
--feedlog-card-hover-shadowCard hover shadow0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)feedlog-card
--feedlog-card-hover-translate-yCard hover translate y0feedlog-issue
--feedlog-card-paddingCard padding1.5remfeedlog-issue
--feedlog-card-padding-mobileCard padding mobile1remfeedlog-issue
--feedlog-card-radiusCard radius1remfeedlog-issue
--feedlog-card-shadowCard shadow0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)feedlog-card
--feedlog-content-gapContent gap0.875remfeedlog-issue
--feedlog-content-gap-mobileContent gap mobile0.75remfeedlog-issue
--feedlog-destructiveDestructive#d4183dfeedlog-issue
--feedlog-destructive-foregroundDestructive foreground#ffffffGlobal (:root)
--feedlog-empty-illustration-bgEmpty illustration bgoklch(0.96 0.01 260)feedlog-issues-list
--feedlog-empty-illustration-mutedEmpty illustration mutedoklch(0.82 0.01 260)feedlog-issues-list
--feedlog-empty-illustration-strokeEmpty illustration strokeoklch(0.75 0.02 260)feedlog-issues-list
--feedlog-font-familyFont familyui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-seriffeedlog-issue
--feedlog-font-sizeFont size16pxGlobal (:root)
--feedlog-footer-margin-topFooter margin top1remfeedlog-issue
--feedlog-footer-padding-topFooter padding top1.25remfeedlog-issue
--feedlog-foregroundForegroundoklch(0.145 0 0)feedlog-issue
--feedlog-gapGap0.5remfeedlog-issue
--feedlog-header-margin-bottomHeader margin bottom0.875remfeedlog-issue
--feedlog-icon-colorIcon color (optional override)var(--feedlog-muted-foreground)Optional override
--feedlog-icon-color-mutedIcon color muted (optional override)var(--feedlog-muted-foreground)Optional override
--feedlog-illustration-bgIllustration bgoklch(0.96 0.01 260)feedlog-issues
--feedlog-illustration-mutedIllustration mutedoklch(0.82 0.01 260)feedlog-issues
--feedlog-illustration-strokeIllustration strokeoklch(0.75 0.02 260)feedlog-issues
--feedlog-inputInputtransparentfeedlog-button
--feedlog-input-backgroundInput background#f3f3f5Global (:root)
--feedlog-min-heightMin height100%feedlog-issues
--feedlog-mutedMuted#f4f4f5feedlog-issue
--feedlog-muted-bgMuted bg#f1f5f9feedlog-badge
--feedlog-muted-bg-hoverMuted bg hover#e2e8f0feedlog-badge
--feedlog-muted-foregroundMuted foreground#64748bfeedlog-issue
--feedlog-muted-textMuted text#475569feedlog-badge
--feedlog-paddingPadding2remfeedlog-issues
--feedlog-padding-mobilePadding mobile1remfeedlog-issues
--feedlog-pin-colorPin color (optional override)var(--feedlog-accent-color)Optional override
--feedlog-popoverPopoveroklch(1 0 0)Global (:root)
--feedlog-popover-foregroundPopover foregroundoklch(0.145 0 0)Global (:root)
--feedlog-primaryPrimary#030213feedlog-button
--feedlog-primary-foregroundPrimary foregroundoklch(1 0 0)feedlog-button
--feedlog-radiusRadius0.625remfeedlog-issue
--feedlog-red-100Red 100#fce7f3feedlog-issues
--feedlog-red-400Red 400#f472b6feedlog-issues
--feedlog-red-600Red 600#db2777feedlog-issue
--feedlog-red-bgRed bg#fef2f2feedlog-badge
--feedlog-red-bg-hoverRed bg hover#fee2e2feedlog-badge
--feedlog-red-textRed text#991b1bfeedlog-badge
--feedlog-ringRingoklch(0.708 0 0)feedlog-button
--feedlog-secondarySecondaryoklch(0.95 0.0058 264.53)feedlog-button
--feedlog-secondary-foregroundSecondary foreground#030213feedlog-button
--feedlog-shadowShadow0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04)feedlog-issue
--feedlog-shadow-hover-bugShadow hover bug (optional override)var(--feedlog-shadow)Optional override
--feedlog-shadow-hover-enhancementShadow hover enhancement (optional override)var(--feedlog-shadow)Optional override
--feedlog-switch-backgroundSwitch background#cbced4Global (:root)
--feedlog-theme-bgTheme bg#fffffffeedlog-issues
--feedlog-timestamp-colorTimestamp color (optional override)var(--feedlog-muted-foreground)Optional override
--feedlog-timestamp-font-sizeTimestamp font size0.75remfeedlog-issue
--feedlog-title-font-familyTitle font family (optional override)inheritOptional override
--feedlog-title-font-sizeTitle font size1.5remfeedlog-issue
--feedlog-title-font-size-mobileTitle font size mobile1.25remfeedlog-issue
--feedlog-title-font-weightTitle font weight700feedlog-issue
--feedlog-title-letter-spacingTitle letter spacing-0.02emfeedlog-issue
--feedlog-title-line-heightTitle line height1.3feedlog-issue
--feedlog-title-margin-bottomTitle margin bottom0.75remfeedlog-issue
--feedlog-title-underline-heightTitle underline height2pxfeedlog-issue
--feedlog-title-underline-offsetTitle underline offset-4pxfeedlog-issue
--feedlog-title-underline-radiusTitle underline radius2pxfeedlog-issue
--feedlog-title-underline-widthTitle underline width3remfeedlog-issue
--feedlog-upvote-backdrop-blurUpvote backdrop blur8pxfeedlog-issue
--feedlog-upvote-bgUpvote bglinear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%)feedlog-issue
--feedlog-upvote-bg-hoverUpvote bg hoverlinear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)feedlog-issue
--feedlog-upvote-borderUpvote borderrgba(226, 232, 240, 0.8)feedlog-issue
--feedlog-upvote-border-hoverUpvote border hover#cbd5e1feedlog-issue
--feedlog-upvote-hover-liftUpvote hover lift-2pxfeedlog-issue
--feedlog-upvote-icon-colorUpvote icon color (optional override)inheritOptional override
--feedlog-upvote-icon-filled-colorUpvote icon filled color (optional override)inheritOptional override
--feedlog-upvote-reel-borderUpvote reel border (optional override)var(--feedlog-border)Optional override
--feedlog-upvote-reel-border-hoverUpvote reel border hover (optional override)var(--feedlog-muted-foreground)Optional override
--feedlog-upvote-reel-border-upvotedUpvote reel border upvoted#bfdbfefeedlog-issue
--feedlog-upvote-reel-border-upvoted-hoverUpvote reel border upvoted hover#93c5fdfeedlog-issue
--feedlog-upvote-shadowUpvote shadow0 2px 4px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 1)feedlog-issue
--feedlog-upvote-shadow-activeUpvote shadow active0 1px 2px 0 rgba(0, 0, 0, 0.05)feedlog-issue
--feedlog-upvote-shadow-hoverUpvote shadow hover0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 1)feedlog-issue
--feedlog-upvote-textUpvote text (optional override)var(--feedlog-muted-foreground)Optional override
--feedlog-upvote-text-hoverUpvote text hover (optional override)var(--feedlog-card-foreground)Optional override
--feedlog-upvote-upvoted-bgUpvote upvoted bglinear-gradient(180deg, #eff6ff 0%, #e0e7ff 100%)feedlog-issue
--feedlog-upvote-upvoted-bg-hoverUpvote upvoted bg hoverlinear-gradient(180deg, #dbeafe 0%, #c7d2fe 100%)feedlog-issue
--feedlog-upvote-upvoted-borderUpvote upvoted border#bfdbfefeedlog-issue
--feedlog-upvote-upvoted-border-hoverUpvote upvoted border hover#93c5fdfeedlog-issue
--feedlog-upvote-upvoted-textUpvote upvoted text (optional override)var(--feedlog-blue-400)Optional override
--feedlog-upvote-upvoted-text-hoverUpvote upvoted text hover (optional override)var(--feedlog-blue-300)Optional override