diff --git a/scss/_root.scss b/scss/_root.scss index 4776bff64f..c869697de4 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -150,6 +150,10 @@ --#{$prefix}icon-filter: none; --#{$prefix}select-indicator: #{$form-select-indicator}; --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator}; + --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor}; + --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor}; + --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor}; + --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor}; // ******* End additions for dark-mode } @@ -238,6 +242,10 @@ --#{$prefix}icon-filter: #{$invert-filter}; --#{$prefix}select-indicator: #{$form-select-indicator-dark}; --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark}; + --#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg + --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg + --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg + --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars } diff --git a/scss/_variables.scss b/scss/_variables.scss index 4a13218636..44d0a519cb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -888,21 +888,21 @@ $table-th-font-weight: null !default; $table-striped-color: $table-color !default; $table-striped-bg-factor: .065 !default; // Boosted mod -$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default; -$table-striped-hover-color: $table-color !default; // Boosted mod +$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)` +$table-striped-hover-color: var(--#{$prefix}black) !default; // Boosted mod $table-striped-hover-bg-factor: .4 !default; // Boosted mod -$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod +$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod $table-variant-striped-bg-factor: .2 !default; // Boosted mod $table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod -$table-active-color: $table-color !default; +$table-active-color: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color` $table-active-bg-factor: .135 !default; // Boosted mod -$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default; +$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)` $table-variant-active-bg-factor: .6 !default; // Boosted mod $table-hover-color: $table-color !default; $table-hover-bg-factor: .065 !default; // Boosted mod -$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default; +$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor)` $table-variant-hover-bg-factor: .2 !default; // Boosted mod $table-border-factor: .4 !default; // Boosted mod diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 6bc770bc16..e2071fcc6a 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el - Thumbnail + Thumbnail Cell text Cell text @@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el - Thumbnail + Thumbnail Cell text Cell text @@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el ... ... diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 4d8df2a11e..9becb00320 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -4504,6 +4504,385 @@ sitemap_exclude: true +## Contents + +### Tables + +

No theme

+ +
+
- Thumbnail + Thumbnail Cell text
+ + + + + + + + + + + +
Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + + + +
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + +
Boosted tables when nested
#FirstLastHandle
+ + + + + + + + + +
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + +

Dark theme on container

+ +
+ + + + + + + + + + + + +
Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + + + +
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + +
Boosted tables when nested
#FirstLastHandle
+ + + + + + + + + +
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+
+ +

Light theme on container

+ +
+ + + + + + + + + + + + +
Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + + + +
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + +
Boosted tables when nested
#FirstLastHandle
+ + + + + + + + + +
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+
+ +

Dark theme on component

+ +
+ + + + + + + + + + + + +
Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + + + +
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + +
Boosted tables when nested
#FirstLastHandle
+ + + + + + + + + +
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+
+ +

Light theme on component

+ +
+ + + + + + + + + + + + +
Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + + + +
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
+ + + + + + + + + + +
Boosted tables when nested
#FirstLastHandle
+ + + + + + + + + +
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+ + + + + + + + + +
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
+
+
+ ## Forms ### Color