[Toolkit][Flowbite] Add kit Flowbite 4.0 base #28
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,238 @@ | ||
| @import "tailwindcss"; | ||
| @import "../vendor/flowbite/dist/flowbite.min.css"; | ||
| @source "../vendor/flowbite"; | ||
| @source "../../vendor/symfony/ux-toolkit/kits/flowbite-4"; | ||
|
|
||
| @custom-variant dark (&:is(.dark *)); | ||
|
|
||
| @theme { | ||
| --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | ||
| --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | ||
| --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'; | ||
|
|
||
| /* TEXT VARIABLES */ | ||
| --text-2xs: 0.625rem; | ||
| --spacing-8xl: 90rem; | ||
| --leading-9: 36px; /* rem pls */ | ||
| --leading-7: 28px; | ||
| --leading-8: 32px; | ||
| --leading-6: 24px; | ||
| --leading-4: 16px; | ||
| --leading-none: 1px; | ||
| --leading-5: 20px; | ||
| --tracking-tighter: -0.8px; | ||
| --leading-heading-none: 60px; | ||
| --tracking-tight: -0.4px; | ||
|
|
||
| /* BORDER RADIUS VARIABLES */ | ||
| --radius-0: 0px; | ||
| --radius-xxs: 2px; | ||
| --radius-xs: 4px; | ||
| --radius-sm: 6px; | ||
| --radius: 8px; | ||
| --radius-base: 12px; | ||
| --radius-lg: 16px; | ||
|
|
||
| /* BORDER WIDTH VARIABLES */ | ||
| --default-border-width: 1px; | ||
|
|
||
| /* TEXT COLORS VARIABLES */ | ||
| /* main text color */ | ||
| --color-body: var(--color-gray-600); | ||
| --color-body-subtle: var(--color-gray-500); | ||
|
|
||
| /* text heading colors */ | ||
| --color-heading: var(--color-gray-900); | ||
|
|
||
| /* used for custom brand colors */ | ||
| --color-fg-brand-subtle: var(--color-blue-200); | ||
| --color-fg-brand: var(--color-blue-700); | ||
| --color-fg-brand-strong: var(--color-blue-900); | ||
|
|
||
| /* used for status colors */ | ||
| --color-fg-success: var(--color-emerald-700); | ||
| --color-fg-success-strong: var(--color-emerald-900); | ||
| --color-fg-danger: var(--color-rose-700); | ||
| --color-fg-danger-strong: var(--color-rose-900); | ||
| --color-fg-warning-subtle: var(--color-orange-600); | ||
| --color-fg-warning: var(--color-orange-900); | ||
| --color-fg-yellow: var(--color-yellow-400); | ||
| --color-fg-disabled: var(--color-gray-400); | ||
| --color-fg-purple: var(--color-purple-600); | ||
| --color-fg-cyan: var(--color-cyan-600); | ||
| --color-fg-indigo: var(--color-indigo-600); | ||
| --color-fg-pink: var(--color-pink-600); | ||
| --color-fg-lime: var(--color-lime-600); | ||
|
|
||
| /* BACKGROUND COLOR VARIABLES */ | ||
| /* used for neutral colors */ | ||
| --color-neutral-primary-soft: var(--color-white); | ||
| --color-neutral-primary: var(--color-white); | ||
| --color-neutral-primary-medium: var(--color-white); | ||
| --color-neutral-primary-strong: var(--color-white); | ||
| --color-neutral-secondary-soft: var(--color-gray-50); | ||
| --color-neutral-secondary: var(--color-gray-50); | ||
| --color-neutral-secondary-medium: var(--color-gray-50); | ||
| --color-neutral-secondary-strong: var(--color-gray-50); | ||
| --color-neutral-secondary-strongest: var(--color-gray-50); | ||
| --color-neutral-tertiary-soft: var(--color-gray-100); | ||
| --color-neutral-tertiary: var(--color-gray-100); | ||
| --color-neutral-tertiary-medium: var(--color-gray-100); | ||
| --color-neutral-quaternary: var(--color-gray-200); | ||
| --color-neutral-quaternary-medium: var(--color-gray-200); | ||
| --color-gray: var(--color-gray-300); | ||
|
|
||
| /* used for brand colors */ | ||
| --color-brand-softer: var(--color-blue-50); | ||
| --color-brand-soft: var(--color-blue-100); | ||
| --color-brand: var(--color-blue-700); | ||
| --color-brand-medium: var(--color-blue-200); | ||
| --color-brand-strong: var(--color-blue-800); | ||
|
|
||
| /* used for status colors */ | ||
| --color-success-soft: var(--color-emerald-50); | ||
| --color-success: var(--color-emerald-700); | ||
| --color-success-medium: var(--color-emerald-100); | ||
| --color-success-strong: var(--color-emerald-800); | ||
| --color-danger-soft: var(--color-rose-50); | ||
| --color-danger: var(--color-rose-700); | ||
| --color-danger-medium: var(--color-rose-100); | ||
| --color-danger-strong: var(--color-rose-800); | ||
| --color-warning-soft: var(--color-orange-50); | ||
| --color-warning: var(--color-orange-500); | ||
| --color-warning-medium: var(--color-orange-100); | ||
| --color-warning-strong: var(--color-orange-700); | ||
| --color-dark-soft: var(--color-gray-800); | ||
| --color-dark: var(--color-gray-800); | ||
| --color-dark-strong: var(--color-gray-900); | ||
| --color-disabled: var(--color-gray-100); | ||
| --color-purple: var(--color-purple-500); | ||
| --color-sky: var(--color-sky-500); | ||
| --color-teal: var(--color-teal-600); | ||
| --color-pink: var(--color-pink-600); | ||
| --color-cyan: var(--color-cyan-500); | ||
| --color-fuchsia: var(--color-fuchsia-600); | ||
| --color-indigo: var(--color-indigo-600); | ||
| --color-orange: var(--color-orange-400); | ||
|
|
||
| /* BORDER COLOR VARIABLES */ | ||
| --color-buffer: var(--color-white); | ||
| --color-buffer-medium: var(--color-white); | ||
| --color-buffer-strong: var(--color-white); | ||
| --color-muted: var(--color-gray-50); | ||
| --color-light-subtle: var(--color-gray-100); | ||
| --color-light: var(--color-gray-100); | ||
| --color-light-medium: var(--color-gray-100); | ||
| --color-default-subtle: var(--color-gray-200); | ||
| --color-default: var(--color-gray-200); | ||
| --color-default-medium: var(--color-gray-200); | ||
| --color-default-strong: var(--color-gray-200); | ||
|
|
||
| /* used for status colors */ | ||
| --color-success-subtle: var(--color-emerald-200); | ||
| --color-danger-subtle: var(--color-rose-200); | ||
| --color-warning-subtle: var(--color-orange-200); | ||
| --color-brand-subtle: var(--color-blue-200); | ||
| --color-brand-light: var(--color-blue-600); | ||
| --color-dark-subtle: var(--color-gray-800); | ||
| --color-dark-backdrop: var(--color-gray-950); | ||
|
|
||
| /* shiki variables */ | ||
| --color-shiki-fg-brand: #79b8ff; | ||
| --color-shiki-fg-brand-subtle: #9ecbff; | ||
| } | ||
|
|
||
| .dark { | ||
| /* text color variables */ | ||
| --color-body: var(--color-gray-400); | ||
| --color-body-subtle: var(--color-gray-400); | ||
| --color-heading: var(--color-white); | ||
| --color-fg-brand-subtle: var(--color-blue-200); | ||
| --color-fg-brand: var(--color-blue-500); | ||
| --color-fg-brand-strong: var(--color-blue-400); | ||
| --color-fg-success: var(--color-emerald-600); | ||
| --color-fg-success-strong: var(--color-emerald-300); | ||
| --color-fg-danger: var(--color-rose-500); | ||
| --color-fg-danger-strong: var(--color-rose-300); | ||
| --color-fg-warning-subtle: var(--color-orange-500); | ||
| --color-fg-warning: var(--color-orange-300); | ||
| --color-fg-yellow: var(--color-yellow-400); | ||
| --color-fg-disabled: var(--color-gray-600); | ||
| --color-fg-purple: var(--color-purple-500); | ||
| --color-fg-cyan: var(--color-cyan-500); | ||
| --color-fg-indigo: var(--color-indigo-500); | ||
| --color-fg-pink: var(--color-pink-500); | ||
| --color-fg-lime: var(--color-lime-500); | ||
|
|
||
| /* background color variables */ | ||
| --color-neutral-primary-soft: var(--color-gray-900); | ||
| --color-neutral-primary: var(--color-gray-950); | ||
| --color-neutral-primary-medium: var(--color-gray-800); | ||
| --color-neutral-primary-strong: var(--color-gray-700); | ||
| --color-neutral-secondary-soft: var(--color-gray-900); | ||
| --color-neutral-secondary: var(--color-gray-950); | ||
| --color-neutral-secondary-medium: var(--color-gray-800); | ||
| --color-neutral-secondary-strong: var(--color-gray-700); | ||
| --color-neutral-secondary-strongest: var(--color-gray-600); | ||
| --color-neutral-tertiary-soft: var(--color-gray-900); | ||
| --color-neutral-tertiary: var(--color-gray-800); | ||
| --color-neutral-tertiary-medium: var(--color-gray-700); | ||
| --color-neutral-quaternary: var(--color-gray-700); | ||
| --color-neutral-quaternary-medium: var(--color-gray-600); | ||
| --color-gray: var(--color-gray-600); | ||
| --color-brand-softer: var(--color-blue-950); | ||
| --color-brand-soft: var(--color-blue-900); | ||
| --color-brand: var(--color-blue-600); | ||
| --color-brand-medium: var(--color-blue-900); | ||
| --color-brand-strong: var(--color-blue-700); | ||
| --color-success-soft: var(--color-emerald-950); | ||
| --color-success: var(--color-emerald-600); | ||
| --color-success-medium: var(--color-emerald-900); | ||
| --color-success-strong: var(--color-emerald-700); | ||
| --color-danger-soft: var(--color-rose-950); | ||
| --color-danger: var(--color-rose-700); | ||
| --color-danger-medium: var(--color-rose-900); | ||
| --color-danger-strong: var(--color-rose-800); | ||
| --color-warning-soft: var(--color-orange-950); | ||
| --color-warning: var(--color-orange-600); | ||
| --color-warning-medium: var(--color-orange-900); | ||
| --color-warning-strong: var(--color-orange-700); | ||
| --color-dark-soft: var(--color-gray-700); | ||
| --color-dark: var(--color-gray-800); | ||
| --color-dark-strong: var(--color-gray-700); | ||
| --color-disabled: var(--color-gray-800); | ||
| --color-purple: var(--color-purple-500); | ||
| --color-sky: var(--color-sky-500); | ||
| --color-teal: var(--color-teal-500); | ||
| --color-pink: var(--color-pink-500); | ||
| --color-cyan: var(--color-cyan-500); | ||
| --color-fuchsia: var(--color-fuchsia-500); | ||
| --color-indigo: var(--color-indigo-500); | ||
| --color-orange: var(--color-orange-400); | ||
|
|
||
| /* border color variables */ | ||
| --color-buffer: var(--color-gray-950); | ||
| --color-buffer-medium: var(--color-gray-900); | ||
| --color-buffer-strong: var(--color-gray-800); | ||
| --color-muted: var(--color-gray-900); | ||
| --color-light-subtle: var(--color-gray-900); | ||
| --color-light: var(--color-gray-800); | ||
| --color-light-medium: var(--color-gray-700); | ||
| --color-default-subtle: var(--color-gray-900); | ||
| --color-default: var(--color-gray-800); | ||
| --color-default-medium: var(--color-gray-700); | ||
| --color-default-strong: var(--color-gray-600); | ||
| --color-success-subtle: var(--color-emerald-900); | ||
| --color-danger-subtle: var(--color-rose-900); | ||
| --color-warning-subtle: var(--color-orange-900); | ||
| --color-brand-subtle: var(--color-blue-900); | ||
| --color-brand-light: var(--color-blue-600); | ||
| --color-dark-subtle: var(--color-gray-700); | ||
| --color-dark-backdrop: var(--color-gray-950); | ||
| } | ||
|
|
||
| @layer base { | ||
| body { | ||
| @apply bg-neutral-primary; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import './styles/toolkit-flowbite-4.css'; | ||
| import 'flowbite'; | ||
| import { startStimulusApp } from '@symfony/stimulus-bundle'; | ||
| import Alert from '@symfony/ux-toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js'; | ||
| import Modal from '@symfony/ux-toolkit/kits/flowbite-4/modal/assets/controllers/modal_controller.js'; | ||
| import Tabs from '@symfony/ux-toolkit/kits/flowbite-4/tabs/assets/controllers/tabs_controller.js'; | ||
|
|
||
| const app = startStimulusApp(); | ||
| app.register('alert', Alert); | ||
| app.register('modal', Modal); | ||
| app.register('tabs', Tabs); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -136,17 +136,22 @@ | |
| }, | ||
| "scripts": { | ||
| "post-install-cmd": [ | ||
| "@auto-scripts", | ||
| "@tailwind:build" | ||
| ], | ||
| "post-update-cmd": [ | ||
| "@auto-scripts", | ||
| "@tailwind:build" | ||
| ], | ||
| "auto-scripts": { | ||
| "cache:clear": "symfony-cmd", | ||
| "assets:install %PUBLIC_DIR%": "symfony-cmd", | ||
| "importmap:install": "symfony-cmd" | ||
| }, | ||
| "tailwind:build": [ | ||
| "@php bin/console tailwind:build assets/styles/app-tailwind.css", | ||
| "@php bin/console tailwind:build assets/styles/toolkit-shadcn.css", | ||
| "@php bin/console tailwind:build assets/styles/toolkit-flowbite-4.css" | ||
|
Comment on lines
+151
to
+154
There was a problem hiding this comment. The new |
||
| ] | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DirectoryNameRuleis being configured withcase: FileNameRule::KEBAB_CASE. This looks like the wrong enum/constant source (DirectoryNameRule already uses its own constants, e.g.DirectoryNameRule::PASCAL_CASEabove). Switch to the matchingDirectoryNameRule::KEBAB_CASEconstant to avoid misconfiguration or runtime errors if the constants diverge.