From ca86257d691d3660c73433ac9601bd84fbd82cfd Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 19 Dec 2023 11:14:38 +0100 Subject: [PATCH] Dark mode: Table fix (#2418) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- scss/_root.scss | 6 +- scss/_tables.scss | 9 --- scss/_variables-dark.scss | 5 +- scss/_variables.scss | 27 +++++---- scss/mixins/_table-variants.scss | 3 - site/content/docs/5.3/content/tables.md | 78 ++++++++++++++++++++----- 6 files changed, 81 insertions(+), 47 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index a174b00404..5839640caf 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -164,7 +164,6 @@ --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor}; --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor}; --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor}; - --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor}; // Breadcrumb-specific styles --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter}; @@ -257,10 +256,9 @@ // Boosted mod // Table-specific styles - --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark}; - --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor-dark}; - --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark}; --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark}; + --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark}; + --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark}; // Breadcrumb-specific styles --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark}; diff --git a/scss/_tables.scss b/scss/_tables.scss index 5ede4b2529..6a75ef5751 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -15,8 +15,6 @@ --#{$prefix}table-accent-bg: #{$table-accent-bg}; --#{$prefix}table-striped-color: #{$table-striped-color}; --#{$prefix}table-striped-bg: #{$table-striped-bg}; - --#{$prefix}table-striped-hover-color: #{$table-striped-hover-color}; // Boosted mod - --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod --#{$prefix}table-active-color: #{$table-active-color}; --#{$prefix}table-active-bg: #{$table-active-bg}; --#{$prefix}table-hover-color: #{$table-hover-color}; @@ -146,13 +144,6 @@ --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color); --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg); } - - // Boosted mod - &.table-striped > tbody > tr:hover > * { - --#{$prefix}table-color-state: var(--#{$prefix}table-striped-hover-color); - --#{$prefix}table-bg-state: var(--#{$prefix}table-striped-hover-bg); - } - // End mod } // Table variants set the table cell backgrounds, border colors diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 718c2bac61..27ef3a65e8 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -150,8 +150,7 @@ $breadcrumb-divider-filter-dark: $invert-filter !default; // Boosted mod // Tables // -$table-striped-bg-factor-dark: .135 !default; // Boosted mod -$table-striped-hover-bg-factor-dark: .855 !default; // Boosted mod +$table-striped-bg-factor-dark: 1 !default; // Boosted mod +$table-active-bg-factor-dark: .35 !default; // Boosted mod $table-hover-bg-factor-dark: .135 !default; // Boosted mod -$table-active-bg-factor-dark: .565 !default; // Boosted mod // scss-docs-end sass-dark-mode-vars diff --git a/scss/_variables.scss b/scss/_variables.scss index 2183353955..fd68100b19 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -890,18 +890,14 @@ $table-accent-bg: transparent !default; $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), 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), 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: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color` +$table-striped-bg-factor: .035 !default; // Boosted mod: equivalent to `$gray-200` +$table-striped-bg: rgba(var(--#{$prefix}black-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)` +$table-variant-striped-bg-factor: .08 !default; // Boosted mod + +$table-active-color: $table-color !default; $table-active-bg-factor: .135 !default; // Boosted mod $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-variant-active-bg-factor: .4 !default; // Boosted mod $table-hover-color: $table-color !default; $table-hover-bg-factor: .065 !default; // Boosted mod @@ -921,12 +917,19 @@ $table-group-separator-color: currentcolor !default; $table-caption-color: var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $table-caption-padding-y: .75rem !default; // Boosted mod -// Boosted mod: no $table-bg-scale +$table-bg-scale: -60% !default; // scss-docs-end table-variables // scss-docs-start table-loop $table-variants: ( - "dark": $dark + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, ) !default; // scss-docs-end table-loop diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index 029875f7d5..73490a23d6 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -5,7 +5,6 @@ $color: color-contrast(opaque($body-bg, $background)); $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor));// Boosted mod $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); // Boosted mod - $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); // Boosted mod $table-border-color: mix($color, $background, percentage($table-border-factor)); @@ -14,8 +13,6 @@ --#{$prefix}table-border-color: #{$table-border-color}; --#{$prefix}table-striped-bg: #{$striped-bg}; --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; - --#{$prefix}table-striped-hover-bg: #{$striped-hover-bg}; // Boosted mod - --#{$prefix}table-striped-hover-color: #{color-contrast($striped-hover-bg)}; // Boosted mod --#{$prefix}table-active-bg: #{$active-bg}; --#{$prefix}table-active-color: #{color-contrast($active-bg)}; --#{$prefix}table-hover-bg: #{$hover-bg}; diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 6bc770bc16..417ffd73f3 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -33,8 +33,21 @@ See [more information about the tables structures](https://a11y-guidelines.orang ## Variants - -Use contextual class to color tables, table rows or individual cells. +{{< callout warning >}} +Boosted doesn't provide any colored variant. + +Darker tables are allowed contextually. Add `data-bs-theme="dark"` to the `.table` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} + +
+See Bootstrap's colored variants +
+ +Use contextual classes to color tables, table rows or individual cells. + +{{< callout info >}} +**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6. +{{< /callout >}}
@@ -52,31 +65,45 @@ Use contextual class to color tables, table rows or individual cells. - - - - - + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}}
Cell Cell
DarkCellCell
{{ .name | title }}CellCell
{{< highlight html >}} - -...
+{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +...
+{{- end -}} +{{< /table.inline >}} - -... +{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +... +{{- end -}} +{{< /table.inline >}} - - ... +{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} + ... +{{- end -}} +{{< /table.inline >}} {{< /highlight >}} {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
## Accented tables @@ -96,13 +123,17 @@ Use .table-striped-columns to add zebra-striping to any table column. {{< table class="table table-striped-columns" caption="Boosted striped columns table" >}} -These classes can also be added to table variants: - +
+These classes can also be added to Bootstrap's table colored variants. +
{{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}} {{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}} - +{{< table class="table table-success table-striped" caption="Boosted success striped rows table" >}} + +{{< table class="table table-success table-striped-columns" caption="Boosted success striped columns table" >}} +
### Hoverable rows @@ -110,13 +141,20 @@ Add `.table-hover` to enable a hover state on table rows within a ``. {{< table class="table table-hover" caption="Boosted hoverable table" >}} +
+See it applied on another Bootstrap's variant {{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}} +
These hoverable rows can also be combined with the striped rows variant: {{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}} +
+See it applied on another Bootstrap's variant +
{{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}} +
### Active tables @@ -177,6 +215,9 @@ Highlight a table row or cell by adding a `.table-active` class. ``` +
+See it applied on another Bootstrap's variant +
@@ -231,6 +272,7 @@ Highlight a table row or cell by adding a `.table-active` class.
``` +
## How do the variants and accented tables work? @@ -258,7 +300,11 @@ To display basic tables, Orange Design System recommends using these compact tab {{< table class="table table-sm" caption="Boosted small table" >}} +
+See it applied on another Bootstrap's variant +
{{< table class="table table-dark table-sm" caption="Boosted dark small table" >}} +
## Table group dividers