Skip to content

Commit cd224b9

Browse files
extrabrightextrabright
committed
dark mode fix
1 parent 95f26a1 commit cd224b9

File tree

14 files changed

+76
-61
lines changed

14 files changed

+76
-61
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<p align="center">
66
Utility and component-centric Design System based on Bootstrap for fast, responsive UI development.
77
<br>
8-
<a href="https://learn.webpixels.io"><strong>Explore Documentation »</strong></a>
8+
<a href="https://docs.webpixels.io"><strong>Explore Documentation »</strong></a>
99
<br>
1010
<br>
11-
<a href="https://github.com/orgs/webpixels/discussions">Discussions</a>
11+
<a href="https://github.com/orgs/webpixels/discussions">Community</a>
1212
·
13-
<a href="https://webpixels.io">Components</a>
13+
<a href="https://webpixels.io/library">Components</a>
1414
·
1515
<a href="https://webpixels.io/blog/">Blog</a>
1616
</p>
@@ -22,7 +22,7 @@
2222
For most projects (and to take advantage of the customization features), you'll want to install Webpixels CSS and its peer-dependencies via npm.
2323

2424
```txt
25-
npm install -D @webpixels/[email protected]-beta.19 [email protected].2
25+
npm install -D @webpixels/[email protected] [email protected].3
2626
```
2727

2828
This will automatically install the latest Bootstrap version, so you don't need to do that manually.
@@ -78,10 +78,10 @@ Get your new web design project started with these amazing templates, or copy an
7878

7979
Get updates on the development of our CSS tool and chat with the project maintainers and community members.
8080

81-
- Follow [@webpixels_](https://twitter.com/intent/user?screen_name=webpixels_) on Twitter
81+
- Follow [@webpixels_](https://twitter.com/intent/user?screen_name=webpixels_) on Twitter (X)
8282
- Get inspired through our designs on [Dribbble](https://dribbble.com/webpixels)
8383
- Read and subscribe to [The Official Webpixels Blog](https://webpixels.io/blog)
84-
- Join [Github Discussions](https://github.com/webpixels/css/discussions)
84+
- Join our community on [GitHub](https://github.com/orgs/webpixels/discussions)
8585

8686
## Thank you
8787

‎package.json‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@webpixels/css",
33
"description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
4-
"version": "2.0.1",
4+
"version": "2.0.2",
55
"version_short": "2.0",
66
"license": "MIT",
77
"style": "dist/index.css",
@@ -32,7 +32,6 @@
3232
"scripts": {
3333
"build": "npm run css",
3434
"css:compile": "sass --load-path=node_modules --style=compressed --source-map --embed-sources scss:dist/",
35-
"css:lint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
3635
"css:prefix": "postcss --replace dist/*.css --use autoprefixer --map",
3736
"css:purge": "purgecss --css dist/index.css --content index.html --output dist/css/",
3837
"css:fusv": "fusv scss/ site/assets/scss/",
@@ -41,29 +40,26 @@
4140
"prepublishOnly": "script/prepublish",
4241
"server": "serve --listen 3000",
4342
"start": "npm-run-all --parallel watch server",
44-
"watch": "nodemon -e html,scss -x \"npm run css\"",
45-
"test": "npm run css:lint && npm run css"
43+
"watch": "nodemon -e html,scss -x \"npm run css\""
4644
},
4745
"devDependencies": {
48-
"@popperjs/core": "^2.11.6",
49-
"autoprefixer": "^10.2.6",
50-
"bootstrap": "^5.3.2",
51-
"find-unused-sass-variables": "^4.0.4",
52-
"fs-extra": "^11.1.1",
46+
"@popperjs/core": "^2.11.8",
47+
"autoprefixer": "^10.4.20",
48+
"bootstrap": "^5.3.3",
49+
"find-unused-sass-variables": "^6.0.0",
50+
"fs-extra": "^11.3.0",
5351
"install": "^0.13.0",
5452
"minimist": "^1.2.8",
55-
"nodemon": "^2.0.7",
56-
"npm": "^10.2.3",
57-
"npm-run-all": "^2.1.0",
58-
"postcss": "^8.3.0",
59-
"postcss-cli": "^8.3.1",
60-
"purgecss": "^4.0.3",
61-
"replace-in-file": "^7.0.1",
62-
"sass": "^1.62.1",
63-
"serve": "^14.0.1",
64-
"stylelint": "^14.11.0",
65-
"stylelint-config-prettier-scss": "^0.0.1",
66-
"stylelint-config-standard-scss": "^5.0.0",
67-
"stylelint-config-twbs-bootstrap": "^6.0.0"
53+
"nodemon": "^3.1.9",
54+
"npm": "^11.1.0",
55+
"postcss": "^8.5.3",
56+
"postcss-cli": "^11.0.0",
57+
"purgecss": "^7.0.2",
58+
"replace-in-file": "^8.3.0",
59+
"sass": "^1.85.0",
60+
"serve": "^14.2.4"
61+
},
62+
"dependencies": {
63+
"npm-run-all": "^4.1.5"
6864
}
6965
}

‎scss/base/_root.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@
99
--#{$prefix}#{$color}-rgb: #{$value};
1010
}
1111

12+
// Accent
13+
--#{$prefix}accent-bg: #{$accent-bg};
14+
--#{$prefix}accent-bg-rgb: #{to-rgb($accent-bg)};
15+
16+
--#{$prefix}accent-color: #{$accent-color};
17+
--#{$prefix}accent-color-rgb: #{to-rgb($accent-color)};
18+
1219
// Fonts
1320
--#{$prefix}font-display: #{inspect($font-display-bundle)};
1421
--#{$prefix}font-serif: #{inspect($font-serif-bundle)};
@@ -41,7 +48,6 @@
4148

4249
.navbar-dark,
4350
[data-bs-theme="dark"] .navbar {
44-
// Logo
4551
.logo-light {
4652
display: block;
4753
}
@@ -53,6 +59,12 @@
5359

5460
@if $enable-dark-mode {
5561
@include color-mode(dark, true) {
62+
// Accent
63+
--#{$prefix}accent-bg: #{$accent-bg-dark};
64+
--#{$prefix}accent-bg-rgb: #{to-rgb($accent-bg-dark)};
65+
--#{$prefix}accent-color: #{$accent-color-dark};
66+
--#{$prefix}accent-color-rgb: #{to-rgb($accent-color-dark)};
67+
5668
// Buttons
5769
.btn-neutral {
5870
--#{$prefix}btn-bg: #{$btn-neutral-bg-dark};

‎scss/components/_navbar.scss‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -110,18 +110,13 @@
110110

111111
// Dark mode
112112
.navbar-dark,
113-
[data-bs-theme="dark"] .navbar {
114-
--#{$prefix}navbar-nav-link-bg: #{$navbar-dark-nav-link-bg};
115-
--#{$prefix}navbar-nav-link-hover-bg: #{$navbar-dark-nav-link-hover-bg};
116-
--#{$prefix}navbar-nav-link-active-bg: #{$navbar-dark-nav-link-active-bg};
117-
--#{$prefix}navbar-nav-caret-bg: #{$navbar-dark-caret-bg};
118-
--#{$prefix}navbar-collapse-border-color: #{$navbar-dark-collapse-border-color};
119-
}
120-
121-
@if $enable-dark-mode {
122-
@include color-mode(dark) {
123-
.navbar-toggler-icon {
124-
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
125-
}
113+
.navbar[data-bs-theme="dark"] {
114+
.navbar-nav {
115+
--#{$prefix}navbar-nav-link-bg: #{$navbar-dark-nav-link-bg};
116+
--#{$prefix}navbar-nav-link-hover-bg: #{$navbar-dark-nav-link-hover-bg};
117+
--#{$prefix}navbar-nav-link-active-bg: #{$navbar-dark-nav-link-active-bg};
118+
--#{$prefix}navbar-nav-caret-bg: #{$navbar-dark-caret-bg};
119+
--#{$prefix}navbar-collapse-border-color: #{$navbar-dark-collapse-border-color};
126120
}
127121
}
122+

‎scss/extra.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.2 (https://webpixels.io/)
33
* Copyright 2025 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

‎scss/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.2 (https://webpixels.io/)
33
* Copyright 2025 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

‎scss/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.2 (https://webpixels.io/)
33
* Copyright 2025 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

‎scss/utilities/_group.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
.group-item {
55
visibility: hidden;
66
}
7-
87
}
98

109
.group-item-visible-hover {

‎scss/utilities/_helpers.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
@include transition($transition-base);
1313
}
1414

15+
// Scrollbar
16+
.scrollbar {
17+
scrollbar-width: none;
18+
}
19+
1520
// Scrollable areas
1621
.scrollable-x {
1722
white-space: nowrap;

‎scss/utilities/_utilities.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,11 +213,12 @@ $utilities: map-merge($utilities, (
213213
)
214214
)
215215
),
216-
"static-background-color": (
216+
"additional-background-color": (
217217
property: background-color,
218218
class: bg,
219219
values: (
220-
"current": currentColor
220+
"current": currentColor,
221+
"accent": rgba(var(--#{$prefix}accent-bg-rgb), var(--#{$prefix}bg-opacity)),
221222
)
222223
),
223224
"bg-opacity": map-merge(

0 commit comments

Comments
 (0)