Skip to content

Commit 4ffec10

Browse files
zoltanszogyenyizoltanszogyenyi
committed
refactor(flowbite): move color theme variables to css file
1 parent 38984c1 commit 4ffec10

File tree

9 files changed

+30
-14
lines changed

9 files changed

+30
-14
lines changed

‎config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ enableInlineShortcodes: true
55

66
params:
77
homepage: "https://flowbite.com"
8-
current_version: 3.1.1
8+
current_version: 3.1.2
99
authors: Themesberg
1010
social_image_path: /docs/images/og-image.png
1111

‎content/getting-started/blazor.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ module.exports = {
219219

220220
```bash
221221
<!-- ... -->
222-
<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/flowbite.min.js"></script>
222+
<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/flowbite.min.js"></script>
223223
</body>
224224
</html>
225225
```

‎content/getting-started/changelog.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ nextLink: getting-started/react/
1515

1616
We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
1717

18+
### v3.1.2
19+
20+
- create themes folder for setting Tailwind variables
21+
1822
### v3.1.1
1923

2024
- fix CSS variables in plugin

‎content/getting-started/introduction.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,25 @@ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" target="
7171
npm install flowbite
7272
```
7373

74-
2. Import Flowbite as a plugin inside your main `input.css` CSS file:
74+
2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
75+
76+
```css
77+
@import "flowbite/src/themes/default";
78+
```
79+
80+
3. Import the Flowbite plugin file in your CSS:
7581

7682
```css
7783
@plugin "flowbite/plugin";
7884
```
7985

80-
3. Make sure that you add the Flowbite JS source files to your `input.css` CSS file:
86+
4. Configure the source files of Flowbite in your CSS:
8187

8288
```css
8389
@source "../node_modules/flowbite";
8490
```
8591

86-
4. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
92+
5. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
8793

8894
```html
8995
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

‎content/getting-started/quickstart.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,25 @@ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" target="
2727
npm install flowbite
2828
```
2929

30-
2. Import Flowbite as a plugin inside your main `input.css` CSS file:
30+
2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
31+
32+
```css
33+
@import "flowbite/src/themes/default";
34+
```
35+
36+
3. Import the Flowbite plugin file in your CSS:
3137

3238
```css
3339
@plugin "flowbite/plugin";
3440
```
3541

36-
3. Make sure that you add the Flowbite JS source files to your `input.css` CSS file:
42+
4. Configure the source files of Flowbite in your CSS:
3743

3844
```css
3945
@source "../node_modules/flowbite";
4046
```
4147

42-
4. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
48+
5. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
4349

4450
```html
4551
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

‎layouts/partials/scripts.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
22
integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
33
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4-
<script src="{{ .Site.BaseURL }}flowbite.min.js?v=3.1.1a"></script>
5-
<script src="{{ .Site.BaseURL }}docs.js?v=3.1.1a"></script>
4+
<script src="{{ .Site.BaseURL }}flowbite.min.js?v=3.1.2a"></script>
5+
<script src="{{ .Site.BaseURL }}docs.js?v=3.1.2a"></script>

‎layouts/partials/stylesheet.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
44
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
5-
<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=3.1.1a">
5+
<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=3.1.2a">

‎layouts/shortcodes/example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
<div class="code-preview-wrapper">
109109
<div{{ with .Get "id" }} id="{{ . }}"{{ end }} class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600">
110110
<div class="w-full code-responsive-wrapper">
111-
<iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{ sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}main.css?v=3.1.1a'></head><body {{ if $iframeHeight }}style='height: {{ sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} }</script>{{ if $wysiwyg }}<script type='importmap'>{{ $wysiwyg_json_fix | safeHTML }}</script>{{ end }}{{ if $javascript }} <script {{ if $script_module }}type='module'{{ end }}>{{ $javascript }}</script>{{ end }}</body></html>" frameborder="0"></iframe>
111+
<iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{ sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}main.css?v=3.1.2a'></head><body {{ if $iframeHeight }}style='height: {{ sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} }</script>{{ if $wysiwyg }}<script type='importmap'>{{ $wysiwyg_json_fix | safeHTML }}</script>{{ end }}{{ if $javascript }} <script {{ if $script_module }}type='module'{{ end }}>{{ $javascript }}</script>{{ end }}</body></html>" frameborder="0"></iframe>
112112
<div class="flex items-center justify-center w-full p-5 bg-white dark:bg-gray-900" data-component-loader>
113113
<div role="status">
114114
<svg aria-hidden="true" class="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flowbite",
3-
"version": "3.1.1",
3+
"version": "3.1.2",
44
"description": "The most popular library of interactive components built with Tailwind CSS",
55
"keywords": [
66
"flowbite",
@@ -119,7 +119,7 @@
119119
"files": [
120120
"lib",
121121
"dist",
122-
"src",
122+
"src/themes",
123123
"types",
124124
"plugin.d.ts",
125125
"plugin.js",

0 commit comments

Comments
 (0)