From cec6c23917799e80bf2b8c8ccaab0d74b6dd620b Mon Sep 17 00:00:00 2001 From: Shinichi Okada <147320+shinokada@users.noreply.github.com> Date: Wed, 24 Dec 2025 08:41:05 +0100 Subject: [PATCH 01/14] docs: theme-test page update --- src/routes/docs/pages/introduction.md | 106 ++++- .../color}/+page.svelte | 59 +-- src/routes/theme-test/components/+page.svelte | 401 ++++++++++++++++++ src/routes/theme-test/leading/+page.svelte | 57 +++ 4 files changed, 584 insertions(+), 39 deletions(-) rename src/routes/{color-test => theme-test/color}/+page.svelte (73%) create mode 100644 src/routes/theme-test/components/+page.svelte create mode 100644 src/routes/theme-test/leading/+page.svelte diff --git a/src/routes/docs/pages/introduction.md b/src/routes/docs/pages/introduction.md index 5a4be2b12..03bb34be8 100644 --- a/src/routes/docs/pages/introduction.md +++ b/src/routes/docs/pages/introduction.md @@ -83,9 +83,28 @@ The location of your main CSS file determines the correct path for `@source` dir **If your CSS file is at `src/app.css`:** ```css +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); +/* MINIMAL THEME +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + +/* ENTERPRISE THEME +@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + +/* PLAYFUL THEME +@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + @import "tailwindcss"; +@import "flowbite/src/themes/default"; +/* @import "flowbite/src/themes/minimal"; */ +/* @import "flowbite/src/themes/enterprise"; */ +/* @import "flowbite/src/themes/playful"; */ +/* @import "flowbite/src/themes/mono"; */ -@plugin 'flowbite/plugin'; +@plugin "flowbite/plugin"; +@plugin "flowbite-typography"; @custom-variant dark (&:where(.dark, .dark *)); @@ -111,12 +130,44 @@ The location of your main CSS file determines the correct path for `@source` dir --color-secondary-700: #0369a1; --color-secondary-800: #075985; --color-secondary-900: #0c4a6e; + + /* Uncomment following lines to override Flowbite brand colors with primary colors */ + /* --color-brand-softer: var(--color-primary-50); + --color-brand-soft: var(--color-primary-100); + --color-brand: var(--color-primary-700); + --color-brand-medium: var(--color-primary-200); + --color-brand-strong: var(--color-primary-800); */ + + /* Uncomment following lines to override brand foreground (text) colors */ + /* --color-fg-brand-subtle: var(--color-primary-200); + --color-fg-brand: var(--color-primary-700); + --color-fg-brand-strong: var(--color-primary-900); */ + + /* Uncomment following lines to override brand border colors */ + /* --color-brand-subtle: var(--color-primary-200); + --color-brand-light: var(--color-primary-600); */ } @source "../node_modules/flowbite-svelte/dist"; @source "../node_modules/flowbite-svelte-icons/dist"; @layer base { + /* Uncomment following lines to override brand colors in dark mode */ + /* .dark { + --color-brand-softer: var(--color-primary-900); + --color-brand-soft: var(--color-primary-800); + --color-brand: var(--color-primary-600); + --color-brand-medium: var(--color-primary-800); + --color-brand-strong: var(--color-primary-700); + + --color-fg-brand-subtle: var(--color-primary-200); + --color-fg-brand: var(--color-primary-500); + --color-fg-brand-strong: var(--color-primary-400); + + --color-brand-subtle: var(--color-primary-800); + --color-brand-light: var(--color-primary-600); + } */ + /* disable chrome cancel button */ input[type="search"]::-webkit-search-cancel-button { display: none; @@ -126,9 +177,28 @@ The location of your main CSS file determines the correct path for `@source` dir **If your CSS file is at `src/routes/+layout.css`:** ```css +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); +/* MINIMAL THEME +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + +/* ENTERPRISE THEME +@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + +/* PLAYFUL THEME +@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap'); +*/ + @import "tailwindcss"; +@import "flowbite/src/themes/default"; +/* @import "flowbite/src/themes/minimal"; */ +/* @import "flowbite/src/themes/enterprise"; */ +/* @import "flowbite/src/themes/playful"; */ +/* @import "flowbite/src/themes/mono"; */ -@plugin 'flowbite/plugin'; +@plugin "flowbite/plugin"; +@plugin "flowbite-typography"; @custom-variant dark (&:where(.dark, .dark *)); @@ -154,12 +224,44 @@ The location of your main CSS file determines the correct path for `@source` dir --color-secondary-700: #0369a1; --color-secondary-800: #075985; --color-secondary-900: #0c4a6e; + + /* Uncomment following lines to override Flowbite brand colors with primary colors */ + /* --color-brand-softer: var(--color-primary-50); + --color-brand-soft: var(--color-primary-100); + --color-brand: var(--color-primary-700); + --color-brand-medium: var(--color-primary-200); + --color-brand-strong: var(--color-primary-800); */ + + /* Uncomment following lines to override brand foreground (text) colors */ + /* --color-fg-brand-subtle: var(--color-primary-200); + --color-fg-brand: var(--color-primary-700); + --color-fg-brand-strong: var(--color-primary-900); */ + + /* Uncomment following lines to override brand border colors */ + /* --color-brand-subtle: var(--color-primary-200); + --color-brand-light: var(--color-primary-600); */ } @source "../../node_modules/flowbite-svelte/dist"; @source "../../node_modules/flowbite-svelte-icons/dist"; @layer base { + /* Uncomment following lines to override brand colors in dark mode */ + /* .dark { + --color-brand-softer: var(--color-primary-900); + --color-brand-soft: var(--color-primary-800); + --color-brand: var(--color-primary-600); + --color-brand-medium: var(--color-primary-800); + --color-brand-strong: var(--color-primary-700); + + --color-fg-brand-subtle: var(--color-primary-200); + --color-fg-brand: var(--color-primary-500); + --color-fg-brand-strong: var(--color-primary-400); + + --color-brand-subtle: var(--color-primary-800); + --color-brand-light: var(--color-primary-600); + } */ + /* disable chrome cancel button */ input[type="search"]::-webkit-search-cancel-button { display: none; diff --git a/src/routes/color-test/+page.svelte b/src/routes/theme-test/color/+page.svelte similarity index 73% rename from src/routes/color-test/+page.svelte rename to src/routes/theme-test/color/+page.svelte index 9e4ba2c7e..f39a76e24 100644 --- a/src/routes/color-test/+page.svelte +++ b/src/routes/theme-test/color/+page.svelte @@ -1,4 +1,5 @@ -
- {#each fgBrand as token} -

{token}

- {/each} -
- -
- {#each shikiFgBrand as token} -

{token}

- {/each} -
- - -
- {#each textVariables as textVariable} -

{textVariable} - The quick brown fox jumps over the lazy dog.

- {/each} -
+
+ +
+
+

Color Test Page

+
+ +
- -
- {#each borderRadiusVariables as borderRadiusVariable} -

{borderRadiusVariable} - The quick brown fox jumps over the lazy dog.

- {/each} -
+
+ {#each colors as color} +
+

{color}

-
- {#each colors as color} -
-

{color}

+ {#each borders as borderSize} +
+ {color} +
+ {/each} - {#each borders as borderSize} -
- {color} +
+
bg
- {/each} - -
-
bg
-
- {/each} + {/each} +
diff --git a/src/routes/theme-test/components/+page.svelte b/src/routes/theme-test/components/+page.svelte new file mode 100644 index 000000000..002761d0d --- /dev/null +++ b/src/routes/theme-test/components/+page.svelte @@ -0,0 +1,401 @@ + + +
+ +
+
+

Theme Test Page

+

Test all components with different themes

+
+ +
+ + +
+ +

Typography

+
+

Heading 1

+

Heading 2

+

Heading 3

+

Regular paragraph text.

+

Small caption text.

+ Link example +
+ + + +

Buttons

+
+
+ + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+
+ +
+ + +
+ +

Alerts

+
+ + + Info: + Informational message. + + + + + Success: + Action completed. + + + + + Warning: + Please check. + + + + + Error: + Something wrong. + +
+ + + +

Badges & Spinners

+
+
+

Badges:

+
+ Default + Blue + Dark + Red + Green + Yellow + Purple + Pink +
+
+ +
+

Spinners:

+
+ + + + + +
+
+
+ +
+ + +
+ +

Form Elements

+
+
+ + +
+ +
+ + +
+ +
+ +