Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use bootstrap variables to create Bs4-theme #75

Closed
wants to merge 179 commits into from
Closed

Use bootstrap variables to create Bs4-theme #75

wants to merge 179 commits into from

Conversation

GeoSot
Copy link

@GeoSot GeoSot commented Jun 28, 2021

Draft idea, using bootstrap initial variables to create theme.

/CC: @limonte In order to work, needs to take a decision.

  • add a breaking change on next version where scss project needs to consume another file
  • make an extra file (par example build.scss) for each theme, and use this for gulp tasks in order to build the css. (no breaking changes)
  • glob dirs in order to check for build or default files and use the proper one

IMO I would use the second option.

You may feel free to change and commit on this branch (or close the MR :wink)

closes #73

Plus some improvement proposals for gulpFile
You can use the following to replace themes

const excludeDirectories=['.git','.idea','.netlify','node_modules','dist','tools'];
let dirs = fs
  .readdirSync(path.join(__dirname, '/'))
  .filter(path => fs.statSync(path).isDirectory())
  .filter(dir => dir.indexOf('.') !== 0)
  .filter(dir => excludeDirectories.indexOf(dir) === -1)


const sassFiles= dirs.map(dir =>glob(`${dir}/*.scss`,function (er, files) {
  
}))

OR

const excludeDirectories='(.git|.idea|.netlify|node_modules|dist|tools)'
const sassFiles= dirs.map(dir =>glob(`${dir}/*.scss`,function (er, files) {

}))

Limon Monte and others added 30 commits February 17, 2018 13:12
Initial commit
a317fb5
Initial version of sweetalert2-themes
8aad316
Merge pull request sweetalert2#1 from sweetalert2/init-themes
af4e645 
Initial version of sweetalert2-themes
Move sweetalert2 to peerDependencies
8605e27
Create README with npm badge
550d691
@gverni
Removed <anonymous> gulp functions
975e4e0 
Added:
* (saas) `compile`
* `minify`
* `launchServer`
Initialize semantic-release
a58062e
@gverni
feat: Dark Theme ⚫ (sweetalert2#2)
bfdb3cb 
* Added dark team page link

* First commit for dark theme

It contains only colors for:
* Background
* Backdrop
* Content and Title

* Remove trailing spaces

* Adjust footer color

* Update to latest version of Sweetalert2

* Add test Swals

* Add correct color for input types

Note that there is a temporary workaround for the lack of a variable
for some input types (to be added in main SweetAlert2 repo)

* Add tests for buttons and input types

* Fix (almost all) SCSS linter warning

The "!important" warning is still there. Will be partially fixed when
new SCSS variable are created in main repo

* Fix Swal variable typo (lowercase)

* Remove temp workarounds and use $swal2-input-color

* Add workaround for range / radio / checkbox

* Add dark theme for queue steps

* Add test for queues

* chore: bump sweetalert to 8.9.0
@semantic-release-bot
chore(release): 1.0.0 [skip ci]
9dfd04d 
# 1.0.0 (2019-04-28)

### Features

* Dark Theme ⚫ ([sweetalert2#2](sweetalert2#2)) ([bfdb3cb](sweetalert2@bfdb3cb))
chore: add Giuseppe Verni to contributors
f157a54
chore(readme): add semantic-release badge
6114aae
chore(readme): add installation and usage guide
d23d95d
Add .npmignore to prevent publishing excessive files
6d05fcb
chore: update package.json for dark theme
a25c6e1
chore: update package.json for embed iframe theme
97fad1a
Add READMEs to themes folders
63ed9c1
fix: automatically publish all themes (sweetalert2#3)
fee83e1
@semantic-release-bot
chore(release): 1.0.1 [skip ci]
1ca6136 
## [1.0.1](sweetalert2/sweetalert2-themes@v1.0.0...v1.0.1) (2019-04-29)

### Bug Fixes

* automatically publish all themes ([sweetalert2#3](sweetalert2#3)) ([fee83e1](sweetalert2@fee83e1))
fix: specify theme directory for npm publish
03a95e1
@semantic-release-bot
chore(release): 1.0.2 [skip ci]
faa1fda 
## [1.0.2](sweetalert2/sweetalert2-themes@v1.0.1...v1.0.2) (2019-04-29)

### Bug Fixes

* specify theme directory for npm publish ([03a95e1](sweetalert2@03a95e1))
chore(readme): add single-theme installation guide
8d3657b
chore(readme): add Donations section
5c2ceee
fix: use tilde instead of relative path in @import
8fdedd5
@semantic-release-bot
chore(release): 1.0.3 [skip ci]
923eb00 
## [1.0.3](sweetalert2/sweetalert2-themes@v1.0.2...v1.0.3) (2019-04-29)

### Bug Fixes

* use tilde instead of relative path in [@import](https://github.com/import) ([8fdedd5](sweetalert2@8fdedd5))
Add SASS usage guide
784fb92
@gverni
chore(readme): add CDN instructions (sweetalert2#4)
9fee98c
Improve 'Usage with SASS' instructions
928ba3b
Make it work with GitHub pages
c7dd303
@gverni
fix(dark): backdrop opacity (sweetalert2#7)
89ac5e5 
* Fix for backdrop opacity

Note that the opacity set for the dark theme (75%) is higher than the
equivalent standard opacity (40%).
his is done in pourpose

* Add text to test page

In order to test backdrop opacity
@semantic-release-bot
chore(release): 1.0.4 [skip ci]
13832ee 
## [1.0.4](sweetalert2/sweetalert2-themes@v1.0.3...v1.0.4) (2019-04-30)

### Bug Fixes

* **dark:** backdrop opacity ([sweetalert2#7](sweetalert2#7)) ([89ac5e5](sweetalert2@89ac5e5))
Limon Monte and others added 24 commits January 25, 2021 15:41
fix: bump sweetalert2 to latest
f2fc326
@semantic-release-bot
chore(release): 4.0.2 [skip ci]
57383c3 
## [4.0.2](sweetalert2/sweetalert2-themes@v4.0.1...v4.0.2) (2021-01-25)

### Bug Fixes

* bump sweetalert2 to latest ([f2fc326](sweetalert2@f2fc326))
fix: bump sweetalert2 to latest
2174654
@semantic-release-bot
chore(release): 4.0.3 [skip ci]
c1dcb50 
## [4.0.3](sweetalert2/sweetalert2-themes@v4.0.2...v4.0.3) (2021-02-18)

### Bug Fixes

* bump sweetalert2 to latest ([2174654](sweetalert2@2174654))
@depfu
Update all Yarn dependencies (2021-03-08) (sweetalert2#62)
9270b7f 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@depfu
Update all Yarn dependencies (2021-03-22) (sweetalert2#64)
b356961 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@depfu
Update all Yarn dependencies (2021-03-29) (sweetalert2#65)
d931007 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@depfu
Update all Yarn dependencies (2021-04-12) (sweetalert2#66)
2f67047 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@depfu
fix: bump sweetalert2 to latest
cee4665 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@semantic-release-bot
chore(release): 4.0.4 [skip ci]
0ccbd38 
## [4.0.4](sweetalert2/sweetalert2-themes@v4.0.3...v4.0.4) (2021-04-19)

### Bug Fixes

* bump sweetalert2 to latest ([cee4665](sweetalert2@cee4665))
fix: bump sweetalert2 to latest
c1790aa
@semantic-release-bot
chore(release): 4.0.5 [skip ci]
3bb1c29 
## [4.0.5](sweetalert2/sweetalert2-themes@v4.0.4...v4.0.5) (2021-04-19)

### Bug Fixes

* bump sweetalert2 to latest ([c1790aa](sweetalert2@c1790aa))
@depfu
Update all Yarn dependencies (2021-04-26) (sweetalert2#68)
4fd088d 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
@depfu
Update all Yarn dependencies (2021-05-03) (sweetalert2#70)
2158040 
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
BREAKING CHANGE: Upgrade to SweetAlert v11
c446447 
BREAKING CHANGE: Upgrade to SweetAlert v11
@semantic-release-bot
chore(release): 5.0.0 [skip ci]
15962b1 
# [5.0.0](sweetalert2/sweetalert2-themes@v4.0.5...v5.0.0) (2021-05-16)

* BREAKING CHANGE: Upgrade to SweetAlert v11 ([c446447](sweetalert2@c446447))

### BREAKING CHANGES

* Upgrade to SweetAlert v11
fix the themes publishing
a45d6d8
Add screenshots to themes' READMEs
722d8d4
@depfu
Update all Yarn dependencies (2021-05-31) (sweetalert2#71)
1667812 
* Update all Yarn dependencies (2021-05-31)

* bump

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Limon Monte <[email protected]>
@riobahtiar
Using math.div for division (sweetalert2#74)
4b92716 
* Update SASS division to use math.div 

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

* add `@use 'sass:math';` in top of file
fix: use math.div()
a4a2e1d
@semantic-release-bot
chore(release): 5.0.1 [skip ci]
b70b03c 
## [5.0.1](sweetalert2/sweetalert2-themes@v5.0.0...v5.0.1) (2021-06-27)

### Bug Fixes

* use math.div() ([a4a2e1d](sweetalert2@a4a2e1d))
chore: bump deps
a5acf14
@GeoSot
Use bootstrap variables to create Bs4-theme
62617c5
@limonte
Copy link
Member

limonte commented Jun 29, 2021

Thanks for the contribution @GeoSot!

I don't like the idea of increasing complexity and it looks out of the issue that we're trying to solve. Is it possible to stick to one scss file and avoid adding the complexity with build.scss?

@GeoSot
Copy link
Author

GeoSot commented Jun 29, 2021

To be honest, I cannot think of something else. We need a file that has the styling, and when you want to build the default css for dist, we need to import the

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/mixins";

if we could do a check for defined vars and after import the above lines, it could be done. But as I searched cannot be done.
I don't find it bad idea to have a build file, that maybe only include the theme.scss.

It will give the possibility for all themes to be customized when imported in scss projects. (plus we can use the same file with bootstrap 5)

@limonte limonte closed this Nov 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bootstrap 4 Theme CSS Values alignment
9 participants
@GeoSot @limonte @gverni @semantic-release-bot @Kalvisan @REJack @KevinBatdorf @tiagostutz @riobahtiar