Styles for flowbite@v4 #1915
Styles for flowbite@v4 #1915
Conversation
|
@shinokada is attempting to deploy a commit to the Bergside Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughExpands and reorganizes the theming system: adds a large semantic color palette (primary/secondary + many color families with soft/medium/strong/subtle variants), updates component variant definitions (alert, badge, button) to use the new tokens, and updates many theme CSS files and docs examples. Changes
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (10)
static/themes/themes-runtime.css (1)
94-94: Duplicate--color-grayproperty will cause unexpected override.Line 94 defines
--color-gray: var(--color-gray-300);but line 153 redefines it as--color-gray: var(--color-gray-500);. The second declaration silently overrides the first. If both values are intentional for different purposes, consider using distinct token names (e.g.,--color-gray-bordervs--color-gray-base).This pattern repeats in other theme blocks (minimal, enterprise, playful, mono).
Also applies to: 153-153
static/themes/mono-runtime.css (1)
80-80: Duplicate--color-grayproperty override.Line 80 sets
--color-gray: var(--color-neutral-300);but line 135 redefines it as--color-gray: var(--color-gray-500);. Determine which value is intended and remove the other, or use distinct token names.Also applies to: 135-135
src/lib/theme-selector/themes/enterprise-runtime.css (1)
84-84: Duplicate--color-grayproperty will cause unexpected behavior.
--color-grayis defined twice in the:rootscope:
- Line 84:
--color-gray: var(--color-zinc-300);- Line 139:
--color-gray: var(--color-gray-500);The second definition overrides the first. If both values are needed, consider using distinct names (e.g.,
--color-gray-basefor the gray family). If line 139 is the intended value, remove the definition at line 84.🔧 Suggested fix (if line 139 is correct)
Remove the earlier definition at line 84:
- --color-gray: var(--color-zinc-300);Or rename one of them if both semantic meanings are needed.
Also applies to: 137-141
static/themes/default-runtime.css (1)
107-107: Duplicate--color-grayproperty declarations will cause the second to override the first.Line 107 defines
--color-gray: var(--color-gray-300)for neutral backgrounds, while Line 166 redefines it as--color-gray: var(--color-gray-500)within the new Gray color family section. The second declaration wins, which may not be the intended behavior.Consider renaming one of these tokens to avoid ambiguity—for example, keep
--color-grayfor the neutral background role and use a distinct name like--color-gray-basefor the Gray family's base shade.Also applies to: 164-168
static/themes/enterprise-runtime.css (1)
84-84: Duplicate--color-grayproperty—same issue as in default-runtime.css.Line 84 sets
--color-gray: var(--color-zinc-300)while Line 139 redefines it as--color-gray: var(--color-gray-500). Consider using distinct token names for the neutral background role versus the Gray color family base.Also applies to: 137-141
src/lib/theme-selector/themes/mono-runtime.css (1)
80-80: Duplicate--color-grayproperty in mono theme.Line 80 defines
--color-gray: var(--color-neutral-300)and Line 135 redefines it as--color-gray: var(--color-gray-500). Same resolution needed as other theme files.Also applies to: 133-137
src/lib/theme-selector/themes/themes-runtime.css (1)
94-94: Duplicate--color-grayin root theme block.Line 94 defines
--color-gray: var(--color-gray-300)and Line 153 redefines it asvar(--color-gray-500). This pattern repeats across all theme blocks in this file (minimal, enterprise, playful, mono). Consider a consistent naming strategy.Also applies to: 151-155
static/themes/playful-runtime.css (2)
80-80: Duplicate--color-grayproperty detected.
--color-grayis defined at Line 80 asvar(--color-slate-300)and redefined at Line 135 asvar(--color-gray-500). The second definition overrides the first within:root, which may cause unexpected styling.If the Line 80 definition is legacy, consider removing it or renaming to avoid confusion.
🔧 Proposed fix (remove legacy definition)
--color-neutral-quaternary-medium: var(--color-slate-200); - --color-gray: var(--color-slate-300); --color-brand-softer: var(--color-pink-50);Also applies to: 133-137
306-306: Duplicate--color-grayin dark mode (same pattern as :root).Within
.dark,--color-grayis defined at Line 306 asvar(--color-slate-600)and again at Line 363 asvar(--color-gray-600). Consider removing the legacy definition at Line 306 for consistency with the:rootfix.Also applies to: 361-365
src/lib/theme-selector/themes/playful-runtime.css (1)
80-80: Same duplicate--color-grayas static/themes version.This file has the same duplicate
--color-grayissue (Line 80 vs Line 135). Apply the same fix as thestatic/themes/playful-runtime.cssfile.Also applies to: 133-137
🤖 Fix all issues with AI agents
In `@src/lib/theme-selector/themes/minimal-runtime.css`:
- Around line 295-297: Duplicate CSS custom property --color-fg-yellow is
redefined (var(--color-yellow-500)) and overrides the earlier declaration
(var(--color-yellow-400)); remove the later duplicate declaration
(--color-fg-yellow: var(--color-yellow-500)) from the block so only the intended
original --color-fg-yellow remains, or if you meant to use the 500 scale
globally, update the original --color-fg-yellow definition to
var(--color-yellow-500) instead of adding a second entry.
- Around line 141-145: The CSS defines --color-gray twice (earlier as
--color-gray: var(--color-stone-300) and again here as --color-gray:
var(--color-gray-500)), causing the latter to override the former; resolve this
by renaming the new semantic token (e.g., change the second occurrence to
--color-gray-base or --color-gray-semantic) or remove it if the override was
intentional, then update all references that should use the new semantic name
(search for usages of --color-gray that expect stone-based gray and change them
to the retained name, or update components to use the new semantic token).
- Around line 369-373: The dark-mode CSS redefines --color-gray to
var(--color-gray-600), which duplicates and overrides the earlier mapping to
--color-stone-600; update the dark-mode declaration for --color-gray to use
var(--color-stone-600) (or remove the redundant redefinition) so it matches the
:root/light-mode intent and avoids overriding the original --color-stone
mapping; adjust the declaration in the same selector that contains
--color-gray-soft/--color-gray-medium/--color-gray-strong to use
--color-stone-600 instead.
- Around line 336-338: Define the missing CSS custom properties
--color-primary-500 and --color-secondary-500 in the :root block of
minimal-runtime.css so the .dark and light-mode references resolve; add entries
for --color-primary-500 and --color-secondary-500 (copy the same values used for
these variables in default-runtime.css or map them to existing root tokens like
--color-primary / --color-secondary) within the existing :root selector so both
light and dark styles can cascade correctly.
In `@src/lib/theme-selector/themes/themes-runtime.css`:
- Around line 1308-1348: Remove the duplicate "subtle" token block that sets
--color-*-subtle to the -900 variants (e.g., --color-secondary-subtle:
var(--color-secondary-900); etc.) and keep the correct light/mono definitions
that use the -200 variants (e.g., --color-secondary-subtle:
var(--color-secondary-200);). Locate the two consecutive "subtle" sections in
themes-runtime.css (the first using -900, the second using -200) and delete the
entire -900 section so only the -200 assignments remain for the mono theme.
In `@static/themes/themes-runtime.css`:
- Around line 1308-1348: The file defines each --color-*-subtle twice (first set
mapping to --*-900, immediately followed by a set mapping to --*-200), causing
the second definitions to silently override the first; remove the unintended
duplicate block so each subtle token (e.g., --color-secondary-subtle,
--color-amber-subtle, --color-blue-subtle, --color-gray-subtle,
--color-red-subtle, --color-yellow-subtle, etc.) is defined only once — keep the
intended shade (likely the -200 mappings for subtle) and delete the other
duplicate block.
🟡 Minor comments (18)
static/themes/default.css-326-326 (1)
326-326: Duplicate--color-fg-yellowin.darkscope.This property is already defined earlier in the
.darksection (withvar(--color-yellow-400)). The duplicate at line 326 overrides it withvar(--color-yellow-500). Remove the earlier declaration to avoid confusion.🔧 Suggested fix
Remove the earlier
--color-fg-yellowdeclaration in the.darksection (around the other--color-fg-*properties that aren't marked as changed), keeping only this line 326 declaration with theyellow-500value.static/themes/minimal-runtime.css-297-297 (1)
297-297: Duplicate--color-fg-yellowin.darkscope.Same issue as in
default.css—this property is already defined earlier in the.darksection. Remove the earlier declaration to avoid override confusion.static/themes/minimal-runtime.css-141-145 (1)
141-145: Naming collision:--color-grayhas conflicting purposes.Line 88 defines
--color-gray: var(--color-stone-300)for neutral/border usage, but this new declaration at line 143 overrides it withvar(--color-gray-500)for the gray color family. This may break existing usages expecting the stone-300 value.Consider renaming one of these tokens to distinguish between:
- Neutral gray (stone-based):
--color-neutral-grayor keep as--color-gray- Color family gray:
--color-gray-baseor integrate differentlystatic/themes/minimal-runtime.css-369-373 (1)
369-373: Same--color-graycollision exists in.darksection.Line 314 defines
--color-gray: var(--color-stone-600)and line 371 overrides it withvar(--color-gray-600). Apply the same resolution strategy as the:rootsection.static/themes/mono-runtime.css-268-268 (1)
268-268: Duplicate--color-fg-yellowin dark mode.Line 268 defines
--color-fg-yellow: var(--color-yellow-400);and line 289 redefines it as--color-fg-yellow: var(--color-yellow-500);. Remove one of the duplicate declarations.🔧 Proposed fix
--color-fg-yellow: var(--color-yellow-400); --color-fg-disabled: var(--color-neutral-600); --color-fg-primary: var(--color-primary-500); ... --color-fg-teal: var(--color-teal-500); --color-fg-violet: var(--color-violet-500); - --color-fg-yellow: var(--color-yellow-500);Also applies to: 289-289
static/themes/themes-runtime.css-1367-1388 (1)
1367-1388: Duplicate--color-fg-yellowin dark mode blocks.
--color-fg-yellowis defined at line 1367 asvar(--color-yellow-400)and then again at line 1388 asvar(--color-yellow-500). The second definition overrides the first. This pattern repeats across all dark theme variants (minimal, enterprise, playful, mono).Remove the duplicate declaration or use distinct token names if both values serve different purposes.
🔧 Proposed fix
--color-fg-yellow: var(--color-yellow-400); --color-fg-disabled: var(--color-gray-600); --color-fg-primary: var(--color-primary-500); ... --color-fg-teal: var(--color-teal-500); --color-fg-violet: var(--color-violet-500); - --color-fg-yellow: var(--color-yellow-500);src/routes/docs-examples/components/alert/Dismissable.svelte-55-58 (1)
55-58: Remove leftover "slot" text from the description.The text "An alert with the custom dismissal button. slot" contains "slot" which appears to be leftover from development.
🐛 Proposed fix
<Alert color="purple" dismissable closeIcon={EnvelopeSolid}> {`#snippet` icon()}<InfoCircleSolid class="h-5 w-5" />{/snippet} - An alert with the custom dismissal button. slot + An alert with the custom dismissal button. </Alert>src/routes/docs-examples/components/badge/Dismissable2.svelte-11-11 (1)
11-11: Typo in class name:test-fg-primaryshould betext-fg-primary.The class
test-fg-primaryappears to be a typo. It should likely betext-fg-primaryto apply the primary foreground text color.🐛 Proposed fix
- class="bg-primary test-fg-primary hover:bg-primary-soft my-0.5 ms-1.5 -me-1.5 inline-flex items-center rounded-full p-0.5 text-sm text-white hover:text-white" + class="bg-primary text-fg-primary hover:bg-primary-soft my-0.5 ms-1.5 -me-1.5 inline-flex items-center rounded-full p-0.5 text-sm text-white hover:text-white"src/lib/theme-selector/themes/default-runtime.css-107-107 (1)
107-107: Duplicate--color-grayproperty—same issue as static/themes/default-runtime.css.Line 107 defines
--color-gray: var(--color-gray-300)and Line 166 redefines it asvar(--color-gray-500). Apply the same naming resolution as the static themes variant.Also applies to: 164-168
static/themes/enterprise-runtime.css-273-294 (1)
273-294: Duplicate--color-fg-yellowin dark mode.Same issue: Line 273 defines
--color-fg-yellow: var(--color-yellow-400)and Line 294 overrides it withvar(--color-yellow-500). Remove one to avoid confusion.src/lib/theme-selector/themes/themes-runtime.css-1367-1388 (1)
1367-1388: Duplicate--color-fg-yellowdeclarations in all dark theme blocks.Each dark mode theme block (modern, minimal, enterprise, playful, mono) has
--color-fg-yellowdefined twice—first asvar(--color-yellow-400)then overridden withvar(--color-yellow-500). Remove the earlier declarations ifyellow-500is the intended dark mode value.Also applies to: 1595-1616, 1823-1844, 2051-2072, 2279-2300
src/lib/theme-selector/themes/mono-runtime.css-268-289 (1)
268-289: Duplicate--color-fg-yellowin dark mode.Line 268 defines
var(--color-yellow-400)and Line 289 overrides withvar(--color-yellow-500). Remove the redundant declaration.src/lib/theme-selector/themes/default-runtime.css-305-327 (1)
305-327: Duplicate--color-fg-yellowin dark mode—same issue as static/themes/default-runtime.css.Line 305 (
yellow-400) is overridden by Line 326 (yellow-500). Remove the redundant declaration.static/themes/default-runtime.css-305-327 (1)
305-327: Duplicate--color-fg-yellowin dark mode—remove the redundant declaration.
--color-fg-yellowis defined at Line 305 asvar(--color-yellow-400)and then again at Line 326 asvar(--color-yellow-500). The second declaration silently overrides the first, making theyellow-400value unreachable.If the intended dark mode value is
yellow-500, remove the earlier declaration at Line 305. Otherwise, remove Line 326.Proposed fix (if yellow-500 is intended)
--color-fg-warning: var(--color-orange-300); - --color-fg-yellow: var(--color-yellow-400); --color-fg-disabled: var(--color-gray-600);static/themes/playful-runtime.css-268-268 (1)
268-268: Duplicate--color-fg-yellowin dark mode.Within the
.darkblock,--color-fg-yellowis defined twice:
- Line 268:
var(--color-yellow-400)- Line 289:
var(--color-yellow-500)The second definition overrides the first. Remove the duplicate at Line 268 if Line 289 is the intended value.
🔧 Proposed fix
--color-fg-warning: var(--color-orange-300); - --color-fg-yellow: var(--color-yellow-400); --color-fg-disabled: var(--color-slate-600);Also applies to: 289-289
src/lib/theme-selector/themes/playful-runtime.css-268-268 (1)
268-268: Same duplicate--color-fg-yellowin dark mode.This file has the same duplicate
--color-fg-yellowissue in.dark(Line 268 vs Line 289). Apply the same fix as thestatic/themes/playful-runtime.cssfile.Also applies to: 289-289
src/lib/theme-selector/themes/minimal-runtime.css-466-486 (1)
466-486: Also missing--color-primary-subtlein dark mode.For consistency with the suggestion for
:root, add--color-primary-subtlehere as well.Suggested addition
/* subtle */ + --color-primary-subtle: var(--color-primary-900); --color-secondary-subtle: var(--color-secondary-900);src/lib/theme-selector/themes/minimal-runtime.css-238-259 (1)
238-259: Missing--color-primary-subtletoken.The subtle variants section defines
--color-secondary-subtlebut omits the corresponding--color-primary-subtle. This asymmetry may cause issues if components expect both primary and secondary subtle variants.Suggested addition
/* subtle */ + --color-primary-subtle: var(--color-primary-200); --color-secondary-subtle: var(--color-secondary-200);
🧹 Nitpick comments (5)
static/themes/themes-runtime.css (1)
334-352: Inconsistent indentation in theme blocks.The foreground color variables in themed sections have inconsistent indentation - they start at column 0 instead of being indented to match the surrounding declarations.
♻️ Example fix for minimal theme (lines 334-352)
--color-fg-primary: var(--color-primary-600); - --color-fg-secondary: var(--color-secondary-600); - --color-fg-amber: var(--color-amber-600); + --color-fg-secondary: var(--color-secondary-600); + --color-fg-amber: var(--color-amber-600); ...Also applies to: 597-615, 856-874, 1116-1134
src/lib/theme-selector/themes/themes-runtime.css (1)
334-352: Inconsistent indentation in theme blocks.Several theme blocks (e.g., minimal at lines 334-352, enterprise at lines 597-615) have inconsistent indentation—some properties use 4 spaces while others use 2 spaces. This doesn't affect functionality but reduces readability.
Also applies to: 597-615, 856-874, 1116-1134
src/lib/alert/theme.ts (1)
192-196: Minor formatting inconsistency.Line 192 has inconsistent indentation (single space instead of 4 spaces before the opening brace).
🔧 Proposed fix
- { + { border: true, color: "violet", class: "border-violet-subtle" },src/lib/buttons/theme.ts (1)
122-127: Formatting issue: multiple color definitions on single line.The
fuchsiaandgreencolor definitions are incorrectly joined on the same line, making the code harder to read and maintain.🔧 Proposed fix
- fuchsia: { - base: "text-white bg-fuchsia border border-transparent enabled:hover:bg-fuchsia-strong focus:ring-fuchsia-medium", - outline: - "text-fuchsia bg-neutral-primary border border-fuchsia enabled:hover:bg-fuchsia enabled:hover:text-white focus:ring-fuchsia-subtle", - shadow: "shadow-fuchsia-500/50 dark:shadow-fuchsia-800/80" - }, green: { + fuchsia: { + base: "text-white bg-fuchsia border border-transparent enabled:hover:bg-fuchsia-strong focus:ring-fuchsia-medium", + outline: + "text-fuchsia bg-neutral-primary border border-fuchsia enabled:hover:bg-fuchsia enabled:hover:text-white focus:ring-fuchsia-subtle", + shadow: "shadow-fuchsia-500/50 dark:shadow-fuchsia-800/80" + }, + green: { base: "text-white bg-green border border-transparent enabled:hover:bg-green-strong focus:ring-green-medium",src/lib/theme-selector/themes/playful-runtime.css (1)
1-479: Deduplicate theme files across static and src directories.The theme files in
static/themes/andsrc/lib/theme-selector/themes/are identical (playful-runtime.css, default-runtime.css, enterprise-runtime.css, minimal-runtime.css, mono-runtime.css, and themes-runtime.css). AlthoughthemeStore.svelte.tshas infrastructure to load from either location via aloadFromStaticparameter, this parameter is never set totruein the codebase—all active code paths use the bundled imports fromsrc/lib/theme-selector/themes/. Remove the unused copy fromstatic/themes/and simplify the theme loading logic, or if static files are needed for a specific use case, establish a build step that generates them from a single source.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (36)
src/lib/alert/theme.tssrc/lib/badge/theme.tssrc/lib/buttons/theme.tssrc/lib/theme-selector/themes/default-runtime.csssrc/lib/theme-selector/themes/enterprise-runtime.csssrc/lib/theme-selector/themes/minimal-runtime.csssrc/lib/theme-selector/themes/mono-runtime.csssrc/lib/theme-selector/themes/playful-runtime.csssrc/lib/theme-selector/themes/themes-runtime.csssrc/routes/docs-examples/components/alert/AlertWithList.sveltesrc/routes/docs-examples/components/alert/BorderAccent.sveltesrc/routes/docs-examples/components/alert/Bordered.sveltesrc/routes/docs-examples/components/alert/Default.sveltesrc/routes/docs-examples/components/alert/Dismissable.sveltesrc/routes/docs-examples/components/alert/Icon.sveltesrc/routes/docs-examples/components/badge/Bordered.sveltesrc/routes/docs-examples/components/badge/Default.sveltesrc/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/badge/Icon.sveltesrc/routes/docs-examples/components/badge/Large.sveltesrc/routes/docs-examples/components/badge/Pills.sveltesrc/routes/docs-examples/components/button-group/Outline.sveltesrc/routes/docs-examples/components/button-group/OutlineIcon.sveltesrc/routes/docs-examples/components/buttons/Default.sveltesrc/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/buttons/Pills.sveltesrc/routes/docs-examples/components/buttons/Shadow.sveltesrc/routes/docs/components/buttons.mdsrc/routes/layout.cssstatic/themes/default-runtime.cssstatic/themes/default.cssstatic/themes/enterprise-runtime.cssstatic/themes/minimal-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/playful-runtime.cssstatic/themes/themes-runtime.css
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{svelte,ts,tsx,js,jsx}: Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Always use findComponent tool FIRST to locate the correct Flowbite-Svelte component before fetching documentation
After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Files:
src/routes/docs-examples/components/badge/Default.sveltesrc/routes/docs-examples/components/badge/Pills.sveltesrc/routes/docs-examples/components/alert/Bordered.sveltesrc/routes/docs-examples/components/alert/BorderAccent.sveltesrc/routes/docs-examples/components/buttons/Shadow.sveltesrc/routes/docs-examples/components/alert/Default.sveltesrc/routes/docs-examples/components/badge/Bordered.sveltesrc/routes/docs-examples/components/buttons/Pills.sveltesrc/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/alert/Dismissable.sveltesrc/routes/docs-examples/components/badge/Large.sveltesrc/routes/docs-examples/components/alert/Icon.sveltesrc/routes/docs-examples/components/button-group/Outline.sveltesrc/routes/docs-examples/components/badge/Icon.sveltesrc/lib/alert/theme.tssrc/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/button-group/OutlineIcon.sveltesrc/lib/buttons/theme.tssrc/lib/badge/theme.tssrc/routes/docs-examples/components/alert/AlertWithList.sveltesrc/routes/docs-examples/components/buttons/Default.svelte
🧠 Learnings (4)
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: When using ThemeProvider with reactive themes in Flowbite-Svelte, ensure that getTheme("componentName") calls are placed inside a $derived() expression (not at module scope) so components react to dynamic theme changes. This applies broadly to Svelte components in this repo that rely on theme-derived values. For example:
// bad: at module scope
const theme = getTheme("button");
// good: inside a derived store
import { derived } from 'svelte/store';
const themeDerived = derived(themeProviderStore, ($themeProvider) => getTheme("button"));
// use $themeDerived in template/component
Applied to files:
src/routes/docs-examples/components/badge/Default.sveltesrc/routes/docs-examples/components/badge/Pills.sveltesrc/routes/docs-examples/components/alert/Bordered.sveltesrc/routes/docs-examples/components/alert/BorderAccent.sveltesrc/routes/docs-examples/components/buttons/Shadow.sveltesrc/routes/docs-examples/components/alert/Default.sveltesrc/routes/docs-examples/components/badge/Bordered.sveltesrc/routes/docs-examples/components/buttons/Pills.sveltesrc/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/alert/Dismissable.sveltesrc/routes/docs-examples/components/badge/Large.sveltesrc/routes/docs-examples/components/alert/Icon.sveltesrc/routes/docs-examples/components/button-group/Outline.sveltesrc/routes/docs-examples/components/badge/Icon.sveltesrc/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/button-group/OutlineIcon.sveltesrc/routes/docs-examples/components/alert/AlertWithList.sveltesrc/routes/docs-examples/components/buttons/Default.svelte
📚 Learning: 2026-01-05T11:34:18.947Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:18.947Z
Learning: Ensure that the text-body utility maps to the --color-body CSS variable defined in static/themes/*.css. Verify that body text color comes from the design system, typically gray-600 in light mode and gray-400 in dark mode, but note that exact values may vary by theme. When reviewing related code, check that theme CSS defines --color-body consistently and that the Tailwind v4 integration preserves this mapping in the Flowbite Svelte design system.
Applied to files:
static/themes/default.cssstatic/themes/playful-runtime.cssstatic/themes/enterprise-runtime.cssstatic/themes/default-runtime.cssstatic/themes/themes-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/minimal-runtime.css
📚 Learning: 2026-01-05T11:34:28.194Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:28.194Z
Learning: In the Flowbite Svelte library using Tailwind CSS v4, text-body is a utility class that maps to the --color-body CSS custom property defined in static/themes/*.css files. It provides the semantic "body text" color from the design system (typically gray-600 in light mode and gray-400 in dark mode, though this varies by theme).
Applied to files:
src/routes/layout.csssrc/lib/theme-selector/themes/default-runtime.csssrc/lib/badge/theme.ts
📚 Learning: 2025-03-20T12:47:33.307Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.
Applied to files:
src/lib/buttons/theme.ts
🪛 Biome (2.1.2)
static/themes/default.css
[error] 326-326: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/themes-runtime.css
[error] 153-153: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 424-424: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 687-687: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 946-946: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1206-1206: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1388-1388: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1616-1616: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1844-1844: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 2072-2072: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 2300-2300: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/default-runtime.css
[error] 166-166: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 326-326: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/playful-runtime.css
[error] 135-135: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 289-289: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/playful-runtime.css
[error] 135-135: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 289-289: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/mono-runtime.css
[error] 135-135: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 289-289: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/enterprise-runtime.css
[error] 139-139: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 294-294: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/enterprise-runtime.css
[error] 139-139: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 294-294: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/default-runtime.css
[error] 166-166: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 326-326: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/themes-runtime.css
[error] 153-153: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 424-424: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 687-687: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 946-946: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1206-1206: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1388-1388: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1616-1616: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 1844-1844: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 2072-2072: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 2300-2300: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/mono-runtime.css
[error] 135-135: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 289-289: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
static/themes/minimal-runtime.css
[error] 143-143: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 297-297: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
src/lib/theme-selector/themes/minimal-runtime.css
[error] 143-143: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-gray is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
[error] 297-297: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally.
--color-fg-yellow is already defined here.
Remove or rename the duplicate custom property to ensure consistent styling.
(lint/suspicious/noDuplicateCustomProperties)
🔇 Additional comments (40)
src/routes/docs/components/buttons.md (1)
69-71: LGTM!The increased gap provides better visual separation for the shadow button examples.
src/routes/docs-examples/components/button-group/OutlineIcon.svelte (1)
6-18: LGTM!Consistent with the
Outline.svelteupdate—both files now demonstrate thealternativecolor variant for outlined button groups.static/themes/default.css (3)
71-89: Well-structured foreground color token expansion.The semantic naming convention (
--color-fg-<color>) provides a clean abstraction layer for foreground colors across the design system.
133-240: Consistent tonal scale across color families.The soft/medium/strong pattern provides a predictable API for component theming. The shade mappings (50 → soft, 100 → medium, 800 → strong) establish clear visual hierarchy.
267-288: Subtle tokens provide border/accent options.The 200-shade mapping for light mode subtle variants is appropriate. Note that
--color-primary-subtleis not included here (only--color-secondary-subtle)—verify if this omission is intentional or if it should be added for completeness, as--color-brand-subtleat line 259 may serve a different purpose.static/themes/minimal-runtime.css (2)
53-71: Foreground color tokens align with default theme.The semantic
--color-fg-*tokens follow the same pattern asdefault.css, ensuring consistency across themes.
110-217: Comprehensive color family expansion.The soft/medium/strong pattern mirrors
default.cssstructure, maintaining cross-theme consistency. Based on learnings, the--color-bodytoken correctly follows the design system pattern (stone-600 light, stone-400 dark).src/routes/docs-examples/components/button-group/Outline.svelte (1)
5-9: LGTM! The switch tocolor="alternative"is properly supported in the Button theme configuration with complete styling including semantic color tokens.static/themes/mono-runtime.css (1)
31-32: Body text color correctly follows design system.The
--color-bodymapping usesneutral-600for light mode andneutral-400for dark mode, which aligns with the Flowbite Svelte design system conventions. Based on learnings.Also applies to: 256-257
src/routes/docs-examples/components/badge/Large.svelte (1)
11-16: LGTM!The new color variants (red, green, yellow, indigo, purple, pink) correctly demonstrate the expanded badge color palette introduced in this PR.
src/routes/docs-examples/components/badge/Pills.svelte (1)
11-16: LGTM!Consistent with the Large badge examples, these pill variants showcase the expanded color palette correctly.
src/routes/docs-examples/components/alert/AlertWithList.svelte (1)
19-31: LGTM!The example effectively demonstrates using Flowbite-Svelte
ListandLicomponents within an Alert, complementing the first alert that shows raw HTML list usage. This provides useful documentation for both approaches.src/routes/docs-examples/components/alert/Default.svelte (1)
29-48: LGTM!The new Alert color variants (blue, red, green, yellow, secondary) are added consistently following the existing pattern. This appropriately demonstrates both semantic and literal color options available in the expanded theme system.
src/routes/docs-examples/components/alert/Bordered.svelte (1)
31-55: LGTM!The new bordered Alert variants follow the established pattern consistently, including proper icon snippet usage and appropriate label text. The additions align well with the expanded color token system.
src/routes/docs-examples/components/badge/Default.svelte (1)
11-16: LGTM!The additional Badge color variants are cleanly added, following the existing pattern with self-descriptive labels. This properly showcases the expanded badge color palette.
src/routes/docs-examples/components/badge/Bordered.svelte (1)
12-17: LGTM!The new bordered Badge variants are added consistently to both the regular and large badge groups, maintaining symmetry and following the established pattern.
Also applies to: 26-31
src/routes/docs-examples/components/buttons/Shadow.svelte (1)
13-32: LGTM!The comprehensive set of shadow button variants showcases the full expanded color palette. The additions follow the existing pattern consistently.
Consider verifying that all new color values (
primary,light,secondary,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose) are properly defined in the button theme to ensure no runtime styling gaps:#!/bin/bash # Description: Verify button theme supports all the new color variants # Check the button theme file for color definitions fd -t f "theme.ts" src/lib/buttons --exec cat {} # Also check for any TypeScript color type definitions rg -n "color.*:" src/lib/buttons/ -A 5src/routes/docs-examples/components/alert/Icon.svelte (1)
31-55: LGTM!The new Alert color variants (blue, red, green, yellow, secondary) are well-structured and follow the existing pattern. The labels appropriately reflect the semantic meaning of each color variant.
src/routes/docs-examples/components/buttons/Outline.svelte (1)
13-32: LGTM!The outline button color variants mirror the pill button additions, maintaining consistency across button styles for the expanded color palette.
src/routes/docs-examples/components/buttons/Default.svelte (1)
13-32: LGTM!The default button examples complete the color palette showcase alongside Pills and Outline variants. The additions are consistent across all button style documentation.
src/routes/docs-examples/components/alert/BorderAccent.svelte (1)
31-50: LGTM!The borderAccent alert variants appropriately showcase the raw color options (red, green, yellow, secondary) alongside the existing semantic color variants. Labels correctly reflect the semantic meaning of each color.
src/routes/docs-examples/components/buttons/Pills.svelte (1)
13-32: LGTM!The expanded pill button color variants comprehensively showcase the new Flowbite v4 color palette. The pattern is consistent with existing examples. All 20 color variants (primary, light, secondary, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) are properly defined in the button theme.
src/routes/docs-examples/components/badge/Dismissable2.svelte (1)
3-3: LGTM!The icon change from
CloseCircleSolidtoCloseCircleOutlineis consistent and the import matches the usage.Also applies to: 14-14
src/routes/layout.css (1)
50-51: LGTM!The alias variables
--color-primaryand--color-secondaryare cleanly defined to map to their respective-500shades, providing convenient defaults for the color system.Also applies to: 62-63
src/routes/docs-examples/components/alert/Dismissable.svelte (1)
33-54: LGTM!The new dismissable Alert examples with color variants (blue, red, green, yellow) are well-structured and demonstrate the expanded color system consistently.
src/routes/docs-examples/components/badge/Icon.svelte (1)
3-3: LGTM!The icon update to
ClockOutlineand the new Badge color variants (success, danger, warning, blue) are well-structured and demonstrate the expanded color system consistently.Also applies to: 6-25
src/lib/theme-selector/themes/enterprise-runtime.css (4)
49-67: LGTM!The expanded foreground color tokens for the various color families are well-structured and consistently named.
106-214: LGTM!The comprehensive color family tokens with soft/base/medium/strong variants provide a robust theming foundation.
235-256: LGTM!The subtle border color tokens are consistently defined across all color families.
275-294: LGTM on dark mode tokens.The dark mode color definitions correctly override their light mode counterparts within the
.darkscope. The static analysis warning about--color-fg-yellowat line 294 is a false positive since it's in a different CSS scope (.darkvs:root).Also applies to: 333-443, 463-483
static/themes/default-runtime.css (1)
2-13: Expanded primary color palette and brand token migration looks good.The custom primary color scale (lines 2-13) and the updated brand token mappings (
--color-fg-brand-*,--color-brand-*,--color-brand-subtle,--color-brand-light) correctly reference the new primary palette in both light and dark modes. This provides a solid foundation for theme customization.Also applies to: 58-60, 110-114, 259-260, 296-298, 345-349, 490-491
static/themes/enterprise-runtime.css (1)
49-67: Color token expansion aligns with the PR-wide palette strategy.The new foreground tokens (
--color-fg-primary,--color-fg-secondary, etc.) and the comprehensive color family variants (soft/medium/strong) follow the same pattern as other theme files, ensuring cross-theme consistency.Also applies to: 106-213, 275-293, 333-442, 463-483
src/lib/theme-selector/themes/mono-runtime.css (1)
45-63: Token expansion for mono theme is consistent with other themes.The foreground color tokens and color family variants follow the established pattern across the PR.
Also applies to: 102-209, 270-288, 328-436, 457-477
src/lib/theme-selector/themes/default-runtime.css (2)
2-13: Custom primary color palette is well-structured.The primary color scale from
--color-primary-50through--color-primary-950provides a complete range for the brand color system, following the standard Tailwind shade convention.
51-52: Body color mapping aligns with design system expectations.The
--color-bodyvariable correctly maps togray-600in light mode andgray-400in dark mode, maintaining consistency with the Flowbite Svelte design system. Based on learnings, this ensures thetext-bodyutility class works correctly across themes.Also applies to: 293-294
src/lib/alert/theme.ts (1)
202-321: Missing "alternative" color in borderAccent compound variants.The
alternativecolor variant (Line 11) exists in the main color variants but lacks corresponding entries in bothborderandborderAccentcompound variants. This means<Alert color="alternative" borderAccent>won't receive a border color class.Verify if this is intentional. If not, consider adding:
{ borderAccent: true, color: "alternative", class: "border-default" }src/lib/buttons/theme.ts (1)
70-193: Well-structured color expansion with clear documentation.The pattern comment (lines 72-75) clearly documents the structure, and all new color variants consistently follow it. The
lightvariant appropriately retains legacy color handling for backward compatibility.src/lib/badge/theme.ts (2)
20-38: Well-structured color variant expansion.The new color variants consistently follow the
bg-{color}-soft text-fg-{color}pattern, aligning with the semantic token system introduced in the CSS theme files.
183-307: Complete href compound variants coverage.All color variants have corresponding
href: truecompound variants with appropriatehover:bg-{color}-mediumclasses. This provides consistent hover behavior across the entire color palette.src/lib/theme-selector/themes/minimal-runtime.css (1)
53-71: LGTM!The new foreground color tokens follow a consistent naming pattern and provide semantic color mappings for the expanded color palette.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/alert/theme.ts (1)
101-105: Inconsistent border class forgraycolor betweenborderandborderAccentvariants.The compound variant for
border: true+color: "gray"usesborder-dark-subtle:{ border: true, color: "gray", class: "border-dark-subtle" }But the compound variant for
borderAccent: true+color: "gray"usesborder-gray-subtle:{ borderAccent: true, color: "gray", class: "border-gray-subtle" }This inconsistency may cause visual differences between bordered and border-accent gray alerts. Consider aligning both to use the same token.
🔧 Suggested fix for consistency
Either update the
bordervariant to useborder-gray-subtle:{ border: true, color: "gray", - class: "border-dark-subtle" + class: "border-gray-subtle" },Or update the
borderAccentvariant to useborder-dark-subtle:{ borderAccent: true, color: "gray", - class: "border-gray-subtle" + class: "border-dark-subtle" },Also applies to: 257-261
🤖 Fix all issues with AI agents
In `@src/lib/theme-selector/themes/enterprise-runtime.css`:
- Around line 172-176: The gray family uses zinc variables but
--color-gray-subtle incorrectly references non-existent --color-gray-200 and
--color-gray-900; update the two occurrences of --color-gray-subtle to use
var(--color-zinc-200) and var(--color-zinc-900) respectively so
--color-gray-subtle aligns with the other gray tokens (e.g., --color-gray-soft,
--color-gray, --color-gray-medium, --color-gray-strong) that reference zinc
variants.
In `@src/lib/theme-selector/themes/minimal-runtime.css`:
- Around line 509-529: The dark-mode subtle token list is missing
--color-primary-subtle; add a declaration matching the others (e.g. set
--color-primary-subtle to var(--color-primary-900)) inside the same subtle block
where --color-secondary-subtle and the other --color-*-subtle variables are
defined so dark mode has a primary subtle token.
- Around line 275-294: Add the missing subtle token by defining
--color-primary-subtle to mirror the pattern used for other color families
(e.g., set --color-primary-subtle: var(--color-primary-200)); place this new
declaration alongside the other subtle tokens (near --color-secondary-subtle) in
the subtle section so the primary color has a consistent subtle variant in light
mode.
In `@src/lib/theme-selector/themes/mono-runtime.css`:
- Around line 14-25: The CSS defines secondary colors up to
--color-secondary-900 but references --color-secondary-950 for
--color-secondary-soft in dark mode; add a --color-secondary-950 variable to the
secondary scale so dark mode has a defined value (choose a darker hex consistent
with the existing secondary palette and analogous to the primary's 950 variant)
and place it with the other --color-secondary-50..-900 declarations so the
variable name --color-secondary-950 and the dependent --color-secondary-soft
resolve correctly.
In `@src/lib/theme-selector/themes/playful-runtime.css`:
- Around line 14-25: Add the missing CSS variable --color-secondary-950 to the
Playful theme so the dark-mode reference to --color-secondary-950 for
--color-secondary-soft resolves; define it in the same section as the other
secondary colors (the CUSTOM SECONDARY COLORS block) and use the same hex value
used in mono-runtime.css for --color-secondary-950 to keep both themes
consistent.
In `@static/themes/default-runtime.css`:
- Around line 289-310: The light-mode CSS block is missing the
--color-primary-subtle token; add a --color-primary-subtle declaration alongside
the other subtle tokens and set it to var(--color-primary-200) so it matches the
pattern used for --color-secondary-subtle and the other color families (i.e.,
add "--color-primary-subtle: var(--color-primary-200);" within the same
root/custom-properties section).
- Around line 526-546: The dark-mode CSS token list is missing
--color-primary-subtle; add a declaration for --color-primary-subtle alongside
the other subtle tokens (use the same pattern as the others, e.g. set it to
var(--color-primary-900)) so the --color-primary-subtle variable is defined for
dark mode in the block where other --color-*-subtle variables are declared.
In `@static/themes/enterprise-runtime.css`:
- Around line 270-291: The CSS theme is missing the --color-primary-subtle token
in the light-mode variable block; add a line defining --color-primary-subtle
consistent with the others (e.g., map it to --color-primary-200) alongside
--color-secondary-subtle and the other --color-*-subtle declarations so
components that reference --color-primary-subtle resolve correctly.
- Around line 506-526: The dark-mode CSS variables are missing the
--color-primary-subtle token; add a declaration for --color-primary-subtle in
the same block as the other subtle tokens (e.g., set --color-primary-subtle:
var(--color-primary-900);) so dark-mode has a consistent primary subtle color
alongside --color-secondary-subtle, --color-blue-subtle, etc.
In `@static/themes/minimal-runtime.css`:
- Around line 14-25: Add the missing CSS variable --color-secondary-950 to the
secondary color scale so the dark-mode reference to --color-secondary-950 (used
to compute --color-secondary-soft) is defined; locate the secondary palette
block that defines --color-secondary-50 through --color-secondary-900 and append
a --color-secondary-950 entry with a slightly darker hex consistent with the
existing scale (matching the tone/darkness progression used in the theme) so
dark mode uses a valid value for --color-secondary-soft.
In `@static/themes/mono-runtime.css`:
- Around line 14-25: The secondary color scale is missing --color-secondary-950
which is referenced by --color-secondary-soft in dark mode; add a sensible hex
value for --color-secondary-950 to the CUSTOM SECONDARY COLORS block (alongside
--color-secondary-900) so the dark mode token --color-secondary-soft resolves
correctly and no undefined CSS variable is used.
In `@static/themes/playful-runtime.css`:
- Around line 267-286: The CSS theme is missing the --color-primary-subtle
token; add a declaration for --color-primary-subtle mapped to the same value
pattern as other subtle tokens (e.g., --color-primary-200) alongside the
existing --color-secondary-subtle line in playful-runtime.css so light-mode has
a primary subtle variant; update the variables block where
--color-secondary-subtle and other --color-*-subtle tokens are declared to
include --color-primary-subtle: var(--color-primary-200).
- Around line 501-521: Dark mode CSS is missing the --color-primary-subtle
variable; add a --color-primary-subtle definition alongside the others in the
dark-mode token block and map it to the appropriate dark primary variable (e.g.,
--color-primary-900) so it matches the existing pattern used for
--color-secondary-subtle and the other --color-*-subtle tokens.
🧹 Nitpick comments (4)
src/routes/docs-examples/components/badge/IconOnly.svelte (1)
6-37: Good accessibility implementation withsr-onlylabels on all icon-only badges.Each badge correctly includes screen reader text. Consider whether the
rounded-fullclass is redundant with theroundedprop—verify the Badge component's styling to ensure they don't conflict.For documentation examples that need to stay explicit, the current approach is fine. However, if brevity is preferred, consider using an array-driven approach:
♻️ Optional refactor to reduce repetition
<script lang="ts"> import { Badge } from "flowbite-svelte"; import { CheckOutline } from "flowbite-svelte-icons"; const colors = [undefined, "success", "warning", "danger", "blue", "lime", "amber", "purple"]; </script> {`#each` colors as color} <Badge rounded large {color} class="h-5 w-5 rounded-full"> <CheckOutline class="h-3 w-3" /> <span class="sr-only">Icon description</span> </Badge> {/each}src/lib/theme-selector/themes/default-runtime.css (1)
82-101: Missing--color-fg-yellowtoken for consistency.The foreground color token set includes all color families except
yellow. While--color-fg-yellowis defined elsewhere as a status color (line 80), the pattern for other colors (e.g.,--color-fg-amber,--color-fg-blue) uses the-600shade in light mode and-500in dark mode. Consider adding:--color-fg-yellow: var(--color-yellow-600);This would align with the comprehensive token coverage for other color families.
src/lib/alert/theme.ts (1)
16-34: Consider using semantic tokens for new color variants.The new color variants (primary, secondary, red, orange, amber, etc.) use hardcoded Tailwind classes like
"bg-red-100 text-red-500 dark:bg-red-200 dark:text-red-600", while the semantic colors (brand, danger, success, warning) use the design system tokens like"text-fg-danger-strong bg-danger-soft".This creates two styling paradigms within the same component. Consider whether the new colors should leverage the semantic tokens defined in the CSS files (e.g.,
bg-red-soft text-fg-red) for consistency and easier theme customization.src/lib/buttons/theme.ts (1)
88-92: Light variant uses explicit colors instead of semantic tokens.The
lightvariant uses hardcoded Tailwind colors (text-gray-900,bg-white,dark:bg-gray-800, etc.) instead of semantic tokens like other color variants (primary,secondary,amber,blue,cyan,emerald,fuchsia,green, etc.). This creates maintenance burden when theme colors change and breaks the semantic token pattern used throughout the file.Consider aligning with the semantic pattern or documenting why this variant requires explicit colors.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
src/lib/alert/theme.tssrc/lib/buttons/theme.tssrc/lib/theme-selector/themes/default-runtime.csssrc/lib/theme-selector/themes/enterprise-runtime.csssrc/lib/theme-selector/themes/minimal-runtime.csssrc/lib/theme-selector/themes/mono-runtime.csssrc/lib/theme-selector/themes/playful-runtime.csssrc/lib/theme-selector/themes/themes-runtime.csssrc/routes/docs-examples/components/alert/Dismissable.sveltesrc/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/badge/IconOnly.sveltesrc/routes/docs/components/badge.mdstatic/themes/default-runtime-original.cssstatic/themes/default-runtime.cssstatic/themes/default.cssstatic/themes/enterprise-runtime.cssstatic/themes/minimal-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/playful-runtime.cssstatic/themes/themes-runtime.css
💤 Files with no reviewable changes (3)
- static/themes/default-runtime-original.css
- static/themes/themes-runtime.css
- src/lib/theme-selector/themes/themes-runtime.css
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{svelte,ts,tsx,js,jsx}: Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Always use findComponent tool FIRST to locate the correct Flowbite-Svelte component before fetching documentation
After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Files:
src/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/badge/IconOnly.sveltesrc/lib/alert/theme.tssrc/lib/buttons/theme.tssrc/routes/docs-examples/components/alert/Dismissable.svelte
🧠 Learnings (4)
📚 Learning: 2026-01-05T11:34:28.194Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:28.194Z
Learning: In the Flowbite Svelte library using Tailwind CSS v4, text-body is a utility class that maps to the --color-body CSS custom property defined in static/themes/*.css files. It provides the semantic "body text" color from the design system (typically gray-600 in light mode and gray-400 in dark mode, though this varies by theme).
Applied to files:
src/lib/theme-selector/themes/minimal-runtime.csssrc/lib/theme-selector/themes/default-runtime.csssrc/lib/theme-selector/themes/enterprise-runtime.csssrc/lib/theme-selector/themes/mono-runtime.csssrc/lib/theme-selector/themes/playful-runtime.css
📚 Learning: 2026-01-05T11:34:18.947Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:18.947Z
Learning: Ensure that the text-body utility maps to the --color-body CSS variable defined in static/themes/*.css. Verify that body text color comes from the design system, typically gray-600 in light mode and gray-400 in dark mode, but note that exact values may vary by theme. When reviewing related code, check that theme CSS defines --color-body consistently and that the Tailwind v4 integration preserves this mapping in the Flowbite Svelte design system.
Applied to files:
static/themes/default.cssstatic/themes/playful-runtime.cssstatic/themes/default-runtime.cssstatic/themes/enterprise-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/minimal-runtime.css
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: When using ThemeProvider with reactive themes in Flowbite-Svelte, ensure that getTheme("componentName") calls are placed inside a $derived() expression (not at module scope) so components react to dynamic theme changes. This applies broadly to Svelte components in this repo that rely on theme-derived values. For example:
// bad: at module scope
const theme = getTheme("button");
// good: inside a derived store
import { derived } from 'svelte/store';
const themeDerived = derived(themeProviderStore, ($themeProvider) => getTheme("button"));
// use $themeDerived in template/component
Applied to files:
src/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/badge/IconOnly.sveltesrc/routes/docs-examples/components/alert/Dismissable.svelte
📚 Learning: 2025-03-20T12:47:33.307Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.
Applied to files:
src/lib/buttons/theme.ts
🔇 Additional comments (34)
src/routes/docs/components/badge.md (1)
107-109: LGTM!Adding
class="gap-4"to the IconOnly example block ensures proper spacing between the icon badges, consistent with other examples in this documentation file.src/routes/docs-examples/components/badge/Dismissable2.svelte (1)
1-17: LGTM!The example properly demonstrates a dismissable badge with:
- Appropriate use of
CloseCircleOutlineicon- Good accessibility with
aria-labelandsr-onlytext- Consistent sizing with
largeprop andh-5 w-5icon dimensionssrc/lib/theme-selector/themes/mono-runtime.css (3)
126-244: Well-structured semantic color token system.The soft/medium/strong variant pattern is consistently applied across all color families. Note that
--color-primary-subtleis not defined while other colors have subtle variants (lines 267-286). Verify if this omission is intentional or if it should be added for consistency.
267-286: Subtle token definitions look good.The subtle variants consistently use the
-200shade for light mode across all color families. This provides a cohesive border/accent system.
361-480: Dark mode color tokens properly adjusted.The dark mode semantic tokens appropriately use darker base values (950 for soft, 900 for medium, 700-800 for base/strong), ensuring good contrast in dark themes.
src/lib/theme-selector/themes/playful-runtime.css (2)
1-287: Light mode token system is well-organized.The playful theme appropriately customizes:
- Font family with cursive "Shantell Sans"
- Larger border radius values for a playful aesthetic
- Slate-based neutral colors instead of neutral/gray
- Consistent soft/medium/strong semantic pattern across color families
289-522: Dark mode definitions mirror light mode structure correctly.The
.darksection maintains the same semantic token pattern with appropriately adjusted values for dark backgrounds.src/routes/docs-examples/components/alert/Dismissable.svelte (1)
33-58: LGTM - New color variant examples are well-structured.The new dismissable Alert examples for
blue,red,green,yellow, andpurplecolors follow the existing patterns correctly. The yellow alert withflytransition and purple alert with customcloseIcondemonstrate the full feature set.One minor observation: the link hover classes (e.g.,
hover:text-blue-800,hover:text-red-800) use hardcoded Tailwind colors rather than the new semantic tokens introduced in this PR. Consider whether these should leverage the newfg-*tokens for consistency, though this is a minor documentation concern.src/lib/theme-selector/themes/default-runtime.css (2)
143-262: Well-structured semantic color token system.The expanded color family tokens with consistent
soft/medium/strongvariants provide a solid foundation for the design system. The pattern of using lighter shades (50/100/200) for light mode and darker shades (900/950) for dark mode is properly applied across all color families.
386-506: Dark mode tokens are consistent with light mode structure.The dark mode overrides correctly invert the shade mappings (e.g.,
-softuses 950 instead of 50,-mediumuses 900 instead of 100). This ensures proper contrast in dark mode.Minor formatting note: there's inconsistent whitespace at lines 398 and 526 (trailing spaces), but this doesn't affect functionality.
static/themes/default.css (2)
1-300: Theme structure aligns with runtime CSS.The
@themedirective usage is correct for Tailwind CSS v4's CSS-first configuration approach. The token definitions properly mirror the runtime CSS file, ensuring consistency between static and dynamic theme contexts.
514-535: Dark mode subtle tokens are complete.The subtle variant tokens for dark mode correctly use the 900 shade across all color families, providing appropriate contrast for dark backgrounds.
src/lib/alert/theme.ts (1)
202-321: Comprehensive borderAccent compound variants added.The new
borderAccentcompound variants cover all color families consistently, using the corresponding*-subtleborder tokens. This aligns well with the expanded color system.src/lib/theme-selector/themes/enterprise-runtime.css (2)
2-25: Primary and secondary color scales are identical across themes.The primary (
#fff5f2to#7a2813) and secondary (#f0f9ffto#0c4a6e) color scales are identical to the default theme. This is likely intentional for brand consistency, but verify if the enterprise theme should have distinct brand colors.
366-486: Dark mode color family tokens correctly use zinc for gray.The dark mode gray family tokens (lines 409-413) properly reference zinc shades, maintaining consistency with the enterprise theme's neutral color choice.
src/lib/theme-selector/themes/minimal-runtime.css (3)
2-25: Primary and secondary color scales look good.The custom primary and secondary color scales are well-defined with a complete range from 50 to 950 (primary) and 50 to 900 (secondary). These base scales provide the foundation for the semantic tokens that follow.
77-95: Foreground color tokens are consistently defined.The foreground tokens follow a consistent pattern using the -600 scale for light mode across all color families.
134-252: Color family tokens are well-structured.Each color family (primary, secondary, amber, blue, etc.) consistently defines soft/base/medium/strong variants. The gray family correctly maps to stone colors, maintaining the minimal theme's design identity.
static/themes/playful-runtime.css (2)
2-25: Primary and secondary color scales are consistent across themes.The primary and secondary color scales match those in other theme files, ensuring consistent branding across themes.
168-172: Gray family correctly uses slate colors for playful theme.The gray semantic tokens correctly map to slate colors, maintaining the playful theme's design identity.
static/themes/default-runtime.css (2)
14-24: Secondary color scale is well-defined.The secondary color scale provides a complete range for the secondary brand color.
74-77: Success and danger colors use emerald and rose.The default theme intentionally uses emerald for success and rose for danger states, providing a distinct visual identity compared to themes using standard green/red.
src/lib/buttons/theme.ts (4)
61-70: Dark and ghost variant updates look good.The dark variant outline now uses explicit gray colors for text, and the ghost variant provides a clean transparent option with proper focus styling.
71-75: Good documentation of the color pattern.The inline comment clearly documents the pattern used for the new color variants, making future maintenance easier.
76-87: Primary and secondary variants follow semantic token pattern correctly.The primary and secondary button variants properly leverage the new semantic tokens (
bg-primary,text-primary,border-primary, etc.) and align with the expanded theme token system.
93-194: Color variants are consistently implemented.All new color variants (amber through yellow) follow the documented pattern consistently, using semantic tokens for backgrounds, text, borders, and focus rings. This ensures proper theme switching across all color options.
static/themes/enterprise-runtime.css (2)
2-25: Primary and secondary color scales are consistent.The enterprise theme maintains the same primary and secondary color scales as other themes for consistency.
172-176: Gray family correctly uses zinc colors for enterprise theme.The gray semantic tokens map to zinc colors, maintaining the enterprise theme's professional aesthetic.
static/themes/mono-runtime.css (3)
54-57: Body text color mapping is correct.The
--color-bodytoken correctly maps toneutral-600in light mode andneutral-400in dark mode, aligning with the design system conventions. Based on learnings, this is the expected pattern.
69-87: Comprehensive foreground token coverage.The foreground tokens follow a consistent pattern (
-600for light,-500for dark) across all color families, providing good coverage for component theming.
126-286: Well-structured semantic color token system.The color family tokens (soft/base/medium/strong/subtle) provide a consistent and comprehensive semantic layer over the base color scales. The pattern is applied uniformly across all color families.
static/themes/minimal-runtime.css (3)
62-65: Body text color mapping follows design system conventions.The
--color-bodytoken usesstone-600(light) andstone-400(dark), consistent with the expected pattern from the design system. The stone palette suits the minimal theme aesthetic. Based on learnings, this is correct.
77-95: Foreground tokens are consistent with other theme files.The foreground token pattern (
-600light,-500dark) is applied consistently, maintaining parity with other runtime theme files.
176-180: Gray family correctly maps to stone palette for thematic consistency.The gray color family uses the stone palette (
--color-stone-*) rather than the standard gray, maintaining the minimal theme's muted aesthetic while keeping the semantic token interface consistent with other themes.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/alert/theme.ts (1)
55-80: Add listContent compound variants for extended color palette colors.The
listContent: truecompound variants are incomplete. Currently defined for onlybrand,danger,success,warning, andgray, butborderandborderAccentcompound variants cover all 20+ colors includingprimary,secondary,blue,red,green, and others. For consistency and to prevent styling issues if these colors are used withlistContentin the future, add compound variants for all extended palette colors (primary, secondary, amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow).
🤖 Fix all issues with AI agents
In `@static/themes/minimal-runtime.css`:
- Line 323: Update the minimal theme's --color-gray-subtle token to use the
stone-based gray variables instead of the generic gray ones: replace
var(--color-gray-200) with var(--color-stone-200) for the light-mode definition
of --color-gray-subtle and replace var(--color-gray-900) with
var(--color-stone-900) for the dark-mode definition; locate the
--color-gray-subtle declarations in the minimal theme CSS and swap those
variable references accordingly to align with the stone color family used by
other --color-gray-* tokens.
In `@static/themes/mono-runtime.css`:
- Line 315: The mono theme's --color-gray-subtle variable uses the wrong gray
tokens; update the declarations of --color-gray-subtle to use the neutral tokens
instead of the gray ones: replace var(--color-gray-200) with
var(--color-neutral-200) in the light-mode declaration and replace
var(--color-gray-900) with var(--color-neutral-900) in the dark-mode declaration
so the mono theme's gray family consistently maps to the neutral shades.
In `@static/themes/playful-runtime.css`:
- Line 315: The playful theme defines slate color tokens but
`--color-gray-subtle` incorrectly references undefined gray tokens; update its
assignments in both light and dark variants so they use the slate tokens
instead: replace `var(--color-gray-200)` with `var(--color-slate-200)` for the
light-mode declaration of `--color-gray-subtle`, and replace
`var(--color-gray-900)` with `var(--color-slate-900)` for the dark-mode
declaration of `--color-gray-subtle`, ensuring the variable name
`--color-gray-subtle` remains unchanged and only the referenced token names are
corrected.
🧹 Nitpick comments (4)
src/lib/buttons/theme.ts (1)
86-90: Consider using semantic tokens for thelightvariant.The
lightcolor variant uses hardcoded Tailwind classes with explicitdark:modifiers, while all other color variants use semantic tokens (e.g.,bg-primary,text-primary,focus:ring-primary-subtle). This inconsistency may make theme customization harder for the light button variant.If this is intentional (e.g., the light button is meant to be theme-agnostic), consider adding a brief comment explaining the rationale.
src/lib/theme-selector/themes/playful-runtime.css (2)
315-315: Potential inconsistency:--color-gray-subtleuses native gray instead of slate.In the playful theme, the gray semantic tokens map to slate colors (e.g.,
--color-gray: var(--color-slate-300)), but--color-gray-subtlereferencesvar(--color-gray-200)which is Tailwind's native gray, not slate.For consistency, consider using
var(--color-slate-200)instead, similar to how enterprise-runtime.css usesvar(--color-zinc-200)for its gray-subtle token.Suggested fix for light mode
- --color-gray-subtle: var(--color-gray-200); + --color-gray-subtle: var(--color-slate-200);
591-591: Same inconsistency in dark mode:--color-gray-subtleshould use slate.The dark mode subtle token has the same issue - it uses
var(--color-gray-900)instead ofvar(--color-slate-900)for consistency with other gray tokens in this theme.Suggested fix for dark mode
- --color-gray-subtle: var(--color-gray-900); + --color-gray-subtle: var(--color-slate-900);static/themes/default.css (1)
82-84: Minor: Extra whitespace before token declaration.Line 82 has extra leading whitespace before the first
--color-fg-primarydeclaration.Suggested fix
- - --color-fg-primary: var(--color-primary-600); + --color-fg-primary: var(--color-primary-600);
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
src/lib/alert/theme.tssrc/lib/buttons/theme.tssrc/lib/theme-selector/themes/default-runtime.csssrc/lib/theme-selector/themes/enterprise-runtime.csssrc/lib/theme-selector/themes/minimal-runtime.csssrc/lib/theme-selector/themes/mono-runtime.csssrc/lib/theme-selector/themes/playful-runtime.csssrc/routes/docs-examples/components/alert/Bordered.sveltesrc/routes/docs-examples/components/alert/Dismissable.sveltesrc/routes/docs-examples/components/alert/Icon.sveltesrc/routes/docs-examples/components/badge/Default.sveltesrc/routes/docs-examples/components/badge/Dismissable2.sveltesrc/routes/docs-examples/components/badge/IconOnly.sveltesrc/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/buttons/Pills.sveltesrc/routes/docs/components/badge.mdstatic/themes/default-runtime-original.cssstatic/themes/default-runtime.cssstatic/themes/default.cssstatic/themes/enterprise-runtime.cssstatic/themes/minimal-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/playful-runtime.css
💤 Files with no reviewable changes (1)
- static/themes/default-runtime-original.css
🚧 Files skipped from review as they are similar to previous changes (7)
- src/routes/docs-examples/components/badge/IconOnly.svelte
- src/routes/docs-examples/components/alert/Bordered.svelte
- src/routes/docs-examples/components/badge/Default.svelte
- src/routes/docs-examples/components/buttons/Pills.svelte
- src/routes/docs-examples/components/badge/Dismissable2.svelte
- src/routes/docs-examples/components/alert/Icon.svelte
- src/routes/docs/components/badge.md
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{svelte,ts,tsx,js,jsx}: Use the Flowbite-Svelte MCP server to discover components by name or category before implementing UI components
Always use findComponent tool FIRST to locate the correct Flowbite-Svelte component before fetching documentation
After calling findComponent, use getComponentDoc tool to fetch complete documentation including usage examples, props, and best practices for Flowbite-Svelte components
Files:
src/lib/alert/theme.tssrc/lib/buttons/theme.tssrc/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/alert/Dismissable.svelte
🧠 Learnings (4)
📚 Learning: 2026-01-05T11:34:28.194Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:28.194Z
Learning: In the Flowbite Svelte library using Tailwind CSS v4, text-body is a utility class that maps to the --color-body CSS custom property defined in static/themes/*.css files. It provides the semantic "body text" color from the design system (typically gray-600 in light mode and gray-400 in dark mode, though this varies by theme).
Applied to files:
src/lib/theme-selector/themes/default-runtime.csssrc/lib/alert/theme.tssrc/lib/theme-selector/themes/enterprise-runtime.csssrc/lib/theme-selector/themes/minimal-runtime.csssrc/lib/theme-selector/themes/playful-runtime.csssrc/lib/theme-selector/themes/mono-runtime.css
📚 Learning: 2026-01-05T11:34:18.947Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1906
File: src/lib/extend/clipboard-manager/theme.ts:35-35
Timestamp: 2026-01-05T11:34:18.947Z
Learning: Ensure that the text-body utility maps to the --color-body CSS variable defined in static/themes/*.css. Verify that body text color comes from the design system, typically gray-600 in light mode and gray-400 in dark mode, but note that exact values may vary by theme. When reviewing related code, check that theme CSS defines --color-body consistently and that the Tailwind v4 integration preserves this mapping in the Flowbite Svelte design system.
Applied to files:
static/themes/playful-runtime.cssstatic/themes/default-runtime.cssstatic/themes/enterprise-runtime.cssstatic/themes/mono-runtime.cssstatic/themes/default.cssstatic/themes/minimal-runtime.css
📚 Learning: 2025-03-20T12:47:33.307Z
Learnt from: superstes
Repo: themesberg/flowbite-svelte PR: 0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.
Applied to files:
src/lib/buttons/theme.ts
📚 Learning: 2025-12-16T13:21:19.575Z
Learnt from: shinokada
Repo: themesberg/flowbite-svelte PR: 1882
File: src/lib/bottom-navigation/BottomNavHeaderItem.svelte:9-9
Timestamp: 2025-12-16T13:21:19.575Z
Learning: When using ThemeProvider with reactive themes in Flowbite-Svelte, ensure that getTheme("componentName") calls are placed inside a $derived() expression (not at module scope) so components react to dynamic theme changes. This applies broadly to Svelte components in this repo that rely on theme-derived values. For example:
// bad: at module scope
const theme = getTheme("button");
// good: inside a derived store
import { derived } from 'svelte/store';
const themeDerived = derived(themeProviderStore, ($themeProvider) => getTheme("button"));
// use $themeDerived in template/component
Applied to files:
src/routes/docs-examples/components/buttons/Outline.sveltesrc/routes/docs-examples/components/alert/Dismissable.svelte
🔇 Additional comments (25)
src/lib/theme-selector/themes/minimal-runtime.css (1)
1-612: Well-structured semantic color system expansion.The minimal-runtime.css file now provides a comprehensive and consistent color token system with:
- Complete primary/secondary scales (50-950)
- Foreground tokens with strong variants for all color families
- Per-color semantic tokens (soft/medium/strong) for both light and dark modes
- Subtle tokens for all color families including primary and secondary
All previously identified issues (duplicate properties, missing tokens) have been addressed.
src/lib/buttons/theme.ts (1)
71-175: Good use of documented pattern for color variants.The legacy color comment block (lines 71-75) clearly documents the pattern used for all new color variants. This makes it easy to understand and maintain the consistent structure across primary, secondary, amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, and yellow variants.
src/routes/docs-examples/components/buttons/Outline.svelte (1)
13-32: Comprehensive outline button examples for new color variants.Good addition of examples demonstrating all new color variants (primary, light, secondary, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with the outline style.
static/themes/enterprise-runtime.css (1)
1-608: Consistent enterprise theme implementation.The enterprise-runtime.css correctly implements the expanded color system:
- Uses zinc color family as the neutral base (distinct from minimal's stone)
- Gray semantic tokens properly alias to zinc values
- All primary/secondary scales and subtle tokens are present
- Structure mirrors other theme files for maintainability
Previously identified missing
--color-primary-subtletokens have been addressed in both light and dark modes.src/lib/theme-selector/themes/playful-runtime.css (1)
1-604: Playful theme structure is complete.The playful-runtime.css correctly implements the expanded color system with:
- Full primary/secondary scales including the previously missing
--color-secondary-950- Playful theme identity (Shantell Sans font, larger border radii)
- Slate-based neutral colors and pink brand colors
- All foreground, semantic, and subtle tokens present for both light and dark modes
src/lib/theme-selector/themes/mono-runtime.css (5)
2-25: LGTM! Primary and secondary color scales are complete.Both scales now include the full range from 50 to 950, including the previously missing
--color-secondary-950. The color values follow a consistent progression from light to dark.
69-128: Foreground token expansion looks good.The systematic addition of
--color-fg-{color}and--color-fg-{color}-strongpairs across all color families provides a consistent API for text colors in light mode.
166-285: Background semantic tokens well-structured.The
soft/medium/strongvariant pattern is applied consistently across primary, secondary, and all standard color families. This enables flexible theming without hardcoding specific shades.
306-327: Subtle border tokens complete the light mode palette.All color families have corresponding
--color-{color}-subtletokens mapped to the 200 shade, providing consistent border styling options.
330-604: Dark mode overrides maintain parity with light mode.The dark theme correctly inverts the token mappings (e.g.,
-softuses 950 shades,-subtleuses 900 shades) ensuring visual consistency across themes.static/themes/default.css (3)
14-25: LGTM! Secondary color scale properly defined.The secondary palette (50-950) uses sky blue tones that complement the warm primary palette, providing good visual contrast for secondary UI elements.
185-304: Semantic background tokens well-organized.The consistent
soft/medium/strongpattern across all color families enables predictable theming. Good separation between semantic tokens (brand, success, danger, warning) and raw color families.
355-629: Dark mode overrides complete and consistent.Token inversions follow the established pattern (950 for soft backgrounds, 900 for subtle borders in dark mode). Parity with light mode is maintained.
src/routes/docs-examples/components/alert/Dismissable.svelte (2)
33-50: New color variant examples demonstrate expanded palette.The blue, red, and green dismissable alerts follow the same pattern as existing examples. This provides good documentation coverage for the new color options.
51-58: Yellow and purple variants showcase transitions and custom icons.Good demonstration of the
transitionprop withflyeffect and thecloseIconcustomization capability alongside the new color variants.src/lib/alert/theme.ts (3)
16-34: Expanded color variants use semantic tokens consistently.The new color variants correctly pair
text-fg-{color}-strongwithbg-{color}-soft, ensuring proper contrast ratios and theme compatibility across light/dark modes.
106-201: Border compound variants cover all new colors.Systematic coverage ensures
border: trueworks correctly with every color variant, applying the appropriateborder-{color}-subtleclass.
202-321: borderAccent compound variants provide complete coverage.All color variants have corresponding
borderAccent: truemappings. This enables theborder-t-4accent style with proper subtle border colors across the entire palette.src/lib/theme-selector/themes/default-runtime.css (5)
2-25: Primary and secondary color scales properly defined.Both palettes include the complete 50-950 range. The primary (warm orange-red) and secondary (sky blue) provide good visual distinction.
70-72: Brand foreground tokens now use primary palette.The brand colors are correctly mapped to the custom primary palette (
--color-primary-*) instead of hardcoded blue values, enabling theme customization.
161-165: Brand background tokens aligned with primary palette.Consistent mapping of brand tokens to primary palette ensures visual coherence between foreground and background brand elements.
184-303: Semantic background tokens follow established pattern.The
soft/medium/strongvariant structure is applied consistently. Token organization mirrors other theme files for maintainability.
354-627: Dark mode overrides maintain theme consistency.Brand tokens correctly reference primary palette in dark mode (lines 359-361, 445-449, 602-603). All color family tokens have proper dark mode inversions.
src/lib/theme-selector/themes/enterprise-runtime.css (1)
1-608: LGTM!The enterprise theme token system is well-structured with comprehensive coverage of:
- Primary/secondary color scales (50-950)
- Per-family foreground tokens with strong variants
- Soft/medium/strong surface variants
- Subtle border tokens for all color families
- Consistent light/dark mode adaptations
The gray family correctly maps to zinc throughout, and the previously flagged gray-subtle inconsistency has been addressed.
static/themes/default-runtime.css (1)
1-628: LGTM!The default theme token system is comprehensive and consistent:
- Primary/secondary scales with full 50-950 range
- Semantic foreground tokens for all color families
- Surface variant tokens (soft/medium/strong)
- Subtle tokens properly reference the gray color family
- Light/dark mode adaptations are correctly defined
Based on learnings, the
--color-bodytoken correctly maps tovar(--color-gray-600)in light mode andvar(--color-gray-400)in dark mode, preserving the text-body utility mapping.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| --color-cyan-subtle: var(--color-cyan-200); | ||
| --color-emerald-subtle: var(--color-emerald-200); | ||
| --color-fuchsia-subtle: var(--color-fuchsia-200); | ||
| --color-gray-subtle: var(--color-gray-200); |
There was a problem hiding this comment.
Fix inconsistent --color-gray-subtle tokens in minimal theme.
The gray color family tokens (lines 217-221) map to stone shades, but --color-gray-subtle references --color-gray-200 and --color-gray-900 which don't align with this theme's stone-based gray mapping.
For consistency with the minimal theme's design:
- Line 323: Change
var(--color-gray-200)tovar(--color-stone-200) - Line 599: Change
var(--color-gray-900)tovar(--color-stone-900)
🔧 Proposed fix
Light mode (line 323):
- --color-gray-subtle: var(--color-gray-200);
+ --color-gray-subtle: var(--color-stone-200);Dark mode (line 599):
- --color-gray-subtle: var(--color-gray-900);
+ --color-gray-subtle: var(--color-stone-900);Also applies to: 599-599
🤖 Prompt for AI Agents
In `@static/themes/minimal-runtime.css` at line 323, Update the minimal theme's
--color-gray-subtle token to use the stone-based gray variables instead of the
generic gray ones: replace var(--color-gray-200) with var(--color-stone-200) for
the light-mode definition of --color-gray-subtle and replace
var(--color-gray-900) with var(--color-stone-900) for the dark-mode definition;
locate the --color-gray-subtle declarations in the minimal theme CSS and swap
those variable references accordingly to align with the stone color family used
by other --color-gray-* tokens.
| --color-cyan-subtle: var(--color-cyan-200); | ||
| --color-emerald-subtle: var(--color-emerald-200); | ||
| --color-fuchsia-subtle: var(--color-fuchsia-200); | ||
| --color-gray-subtle: var(--color-gray-200); |
There was a problem hiding this comment.
Fix inconsistent --color-gray-subtle tokens in mono theme.
The gray color family tokens (lines 209-213) map to neutral shades, but --color-gray-subtle references --color-gray-200 and --color-gray-900 which don't align with this theme's neutral-based gray mapping.
For consistency with the mono theme's design:
- Line 315: Change
var(--color-gray-200)tovar(--color-neutral-200) - Line 591: Change
var(--color-gray-900)tovar(--color-neutral-900)
🔧 Proposed fix
Light mode (line 315):
- --color-gray-subtle: var(--color-gray-200);
+ --color-gray-subtle: var(--color-neutral-200);Dark mode (line 591):
- --color-gray-subtle: var(--color-gray-900);
+ --color-gray-subtle: var(--color-neutral-900);Also applies to: 591-591
🤖 Prompt for AI Agents
In `@static/themes/mono-runtime.css` at line 315, The mono theme's
--color-gray-subtle variable uses the wrong gray tokens; update the declarations
of --color-gray-subtle to use the neutral tokens instead of the gray ones:
replace var(--color-gray-200) with var(--color-neutral-200) in the light-mode
declaration and replace var(--color-gray-900) with var(--color-neutral-900) in
the dark-mode declaration so the mono theme's gray family consistently maps to
the neutral shades.
| --color-cyan-subtle: var(--color-cyan-200); | ||
| --color-emerald-subtle: var(--color-emerald-200); | ||
| --color-fuchsia-subtle: var(--color-fuchsia-200); | ||
| --color-gray-subtle: var(--color-gray-200); |
There was a problem hiding this comment.
Fix inconsistent --color-gray-subtle tokens in playful theme.
The gray color family tokens (lines 209-213) map to slate shades, but --color-gray-subtle breaks this pattern by referencing --color-gray-200 and --color-gray-900 which are not defined in this theme context.
For consistency with the playful theme's design (similar to the enterprise theme fix):
- Line 315: Change
var(--color-gray-200)tovar(--color-slate-200) - Line 591: Change
var(--color-gray-900)tovar(--color-slate-900)
🔧 Proposed fix
Light mode (line 315):
- --color-gray-subtle: var(--color-gray-200);
+ --color-gray-subtle: var(--color-slate-200);Dark mode (line 591):
- --color-gray-subtle: var(--color-gray-900);
+ --color-gray-subtle: var(--color-slate-900);Also applies to: 591-591
🤖 Prompt for AI Agents
In `@static/themes/playful-runtime.css` at line 315, The playful theme defines
slate color tokens but `--color-gray-subtle` incorrectly references undefined
gray tokens; update its assignments in both light and dark variants so they use
the slate tokens instead: replace `var(--color-gray-200)` with
`var(--color-slate-200)` for the light-mode declaration of
`--color-gray-subtle`, and replace `var(--color-gray-900)` with
`var(--color-slate-900)` for the dark-mode declaration of `--color-gray-subtle`,
ensuring the variable name `--color-gray-subtle` remains unchanged and only the
referenced token names are corrected.
1 participant
🔗 Related issue (optional)
Closes #
📑 Description
🔍 PR Type
🚦 PR Status
✅ Checklist
pnpm lint && pnpm check && pnpm test:e2eand all tests passmainbranch (not the published npm version)🧪 Screenshots / Demos (optional)
ℹ️ Additional Information
Summary by CodeRabbit
New Features
Style
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.