Skip to content

Commit b655cf5

Browse files
extrabrightextrabright
committed
updated colors for dark mode
1 parent 1af6a97 commit b655cf5

6 files changed

Lines changed: 59 additions & 20 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
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": "3.0.0-beta.5",
4+
"version": "3.0.0-beta.6",
55
"version_short": "3.0",
66
"license": "MIT",
77
"style": "dist/all.css",

‎scss/_card.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
--#{$prefix}card-padding: #{$card-contained-padding};
2626
--#{$prefix}card-body-bg: #{$card-contained-body-bg};
2727
--#{$prefix}card-body-border-color: #{$card-contained-body-border-color};
28+
--#{$prefix}card-body-box-shadow: #{$card-contained-body-box-shadow};
2829

2930
padding: var(--#{$prefix}card-padding);
3031

@@ -44,6 +45,7 @@
4445
border-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-padding));
4546
border: 1px solid var(--#{$prefix}card-body-border-color);
4647
background-color: var(--#{$prefix}card-body-bg);
48+
@include box-shadow(var(--#{$prefix}card-body-box-shadow));
4749

4850
> .table-responsive {
4951
border-radius: var(--#{$prefix}card-border-radius);
@@ -92,3 +94,14 @@
9294
--#{$prefix}card-cap-padding-y: #{$card-sm-cap-padding-y};
9395
--#{$prefix}card-cap-padding-x: #{$card-sm-cap-padding-x};
9496
}
97+
98+
// Dark mode
99+
@if $enable-dark-mode {
100+
@include color-mode(dark) {
101+
.card-contained {
102+
--#{$prefix}card-bg: #{$card-bg-dark};
103+
--#{$prefix}card-body-bg: #{$card-contained-body-bg-dark};
104+
}
105+
}
106+
}
107+

‎scss/_colors.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
$white: #fff !default;
55
$black: #000 !default;
66

7-
$gray-50: #f9fafb !default;
8-
$gray-100: #f3f4f6 !default;
9-
$gray-200: #e5e7eb !default;
10-
$gray-300: #d1d5db !default;
11-
$gray-400: #9ca3af !default;
12-
$gray-500: #6b7280 !default;
13-
$gray-600: #4b5563 !default;
14-
$gray-700: #374151 !default;
15-
$gray-800: #1f2937 !default;
16-
$gray-900: #111827 !default;
17-
$gray-950: #030712 !default;
7+
$gray-50: #fafafa !default;
8+
$gray-100: #f5f5f5 !default;
9+
$gray-200: #e5e5e5 !default;
10+
$gray-300: #d4d4d4 !default;
11+
$gray-400: #a3a3a3 !default;
12+
$gray-500: #737373 !default;
13+
$gray-600: #525252 !default;
14+
$gray-700: #404040 !default;
15+
$gray-800: #262626 !default;
16+
$gray-900: #171717 !default;
17+
$gray-950: #0a0a0a !default;
1818

1919
// Base colors
2020
$cyan: #22d3ee !default;

‎scss/_utilities.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@ $utilities: map-merge($utilities, (
105105
values: (
106106
"transparent": transparent,
107107
"current": currentColor,
108-
"body": var(--#{$prefix}body-bg)
108+
"body": var(--#{$prefix}body-bg),
109+
"translucent": light-dark($border-color-translucent, $border-color-translucent-dark)
109110
)
110111
),
111112
"border-style": (

‎scss/_variables-dark.scss‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
1+
// Dark color mode variables
2+
//
3+
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
4+
5+
$body-color-dark: $gray-300 !default;
6+
$body-bg-dark: mix($gray-900, $gray-950, 70%) !default;
7+
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
8+
$body-secondary-bg-dark: $gray-800 !default;
9+
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
10+
$body-tertiary-bg-dark: $gray-950 !default;
11+
$body-emphasis-color-dark: $white !default;
12+
$border-color-dark: darken($gray-700, 5%) !default;
13+
$border-color-translucent-dark: color-mix(in srgb, var(--#{$prefix}white) 7%, transparent) !default;
14+
$headings-color-dark: inherit !default;
15+
116
// Accent
2-
$accent-bg-dark: $gray-800;
3-
$accent-color-dark: $gray-100;
17+
$accent-bg-dark: $gray-800;
18+
$accent-color-dark: $gray-100;
419

520
// Neutral button
621
$btn-neutral-bg-dark: $gray-800;
@@ -14,4 +29,11 @@ $btn-neutral-active-border-color-dark: $gray-500;
1429
$btn-neutral-active-color-dark: $gray-50;
1530

1631
// Headings
17-
$headings-color-dark: $white;
32+
$headings-color-dark: $white;
33+
34+
// Cards
35+
$card-bg-dark: color-mix(in srgb, $body-bg-dark 50%, transparent) !default;
36+
$card-contained-body-bg-dark: var(--#{$prefix}body-bg) !default;
37+
38+
// Forms
39+
$input-bg-dark: var(--#{$prefix}secondary-bg) !default;

‎scss/_variables.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ $link-hover-decoration: none;
143143
// Border
144144
$border-width: 1px !default;
145145
$border-color: $gray-200 !default;
146+
$border-color-translucent: color-mix(in srgb, $gray-200 70%, transparent) !default;
146147

147148
// Border radius
148149
$border-radius-xs: 0.375rem !default;
@@ -442,6 +443,7 @@ $btn-neutral-active-color: $gray-700 !default;
442443
$form-label-font-size: $font-size-sm !default;
443444
$form-label-font-weight: $font-weight-semibold !default;
444445

446+
$input-bg: transparent !default;
445447
$input-box-shadow: 0px 1px 2px rgba(50, 50, 71, 0.08) !default;
446448

447449
$input-border-radius: var(--#{$prefix}border-radius) !default;
@@ -564,7 +566,7 @@ $card-spacer-x: $spacer * 1.5 !default;
564566
$card-title-spacer-y: 0.5rem !default;
565567
$card-title-color: var(--#{$prefix}heading-color) !default;
566568

567-
$card-border-color: var(--#{$prefix}border-color) !default;
569+
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
568570
$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
569571
$card-box-shadow: none !default;
570572

@@ -578,10 +580,11 @@ $card-sm-spacer-x: $spacer !default;
578580
$card-sm-cap-padding-y: .75rem !default;
579581
$card-sm-cap-padding-x: $card-sm-spacer-x !default;
580582

581-
$card-contained-padding: $spacer * .125 !default;
582-
$card-contained-bg: var(--#{$prefix}tertiary-bg) !default;
583+
$card-contained-padding: $spacer * .325 !default;
584+
$card-contained-bg: color-mix(in srgb, var(--#{$prefix}secondary-bg) 50%, transparent) !default;
583585
$card-contained-body-bg: var(--#{$prefix}body-bg) !default;
584586
$card-contained-body-border-color: $card-border-color !default;
587+
$card-contained-body-box-shadow: $box-shadow-elevated-1 !default;
585588
$card-contained-spacer-y: $spacer !default;
586589
$card-contained-spacer-x: $spacer !default;
587590
$card-contained-cap-padding-y: $spacer * .75 !default;
@@ -700,7 +703,7 @@ $list-group-item-padding-y: 1rem !default;
700703
$list-group-item-padding-x: 1.25rem !default;
701704
$list-group-item-font-size: $font-size-sm !default;
702705

703-
$list-group-bg: null !default;
706+
$list-group-bg: transparent !default;
704707
$list-group-hover-bg: var(--#{$prefix}secondary-bg) !default;
705708

706709
// Modals

0 commit comments

Comments
 (0)