Add color mode on List group

Orange-OpenSource · Nov 3, 2023 · 730dd40 · 730dd40
1 parent 7a78e4b
commit 730dd40
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 24 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2002,7 +2002,7 @@ $progress-height-xs:                $spacer * .25 !default;
 // scss-docs-start list-group-variables
 $list-group-font-weight:              $font-weight-bold !default; // Boosted mod
 $list-group-color:                    var(--#{$prefix}body-color) !default;
-$list-group-bg:                       var(--#{$prefix}body-bg) !default;
+$list-group-bg:                       transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $list-group-border-color:             var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
 $list-group-border-radius:            var(--#{$prefix}border-radius) !default;
@@ -2018,10 +2018,10 @@ $list-group-numbered-item-margin-end: 14px !default; // Boosted mod
 
 $list-group-hover-bg:                 var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 $list-group-active-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `$component-active-color`
-$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-400 4px) !default; // Boosted mod: instead of `$component-active-bg`
+$list-group-active-bg:                no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, var(--#{$prefix}active-bg) 4px) !default; // Boosted mod: instead of `$component-active-bg`
 $list-group-active-border-color:      $list-group-border-color !default; // Boosted mod: instead of `$list-group-active-bg`
 
-$list-group-disabled-color:           $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$list-group-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $list-group-disabled-bg:              $list-group-bg !default;
 
 $list-group-action-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -4745,3 +4745,180 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="input-group quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>
+
+### List group
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <ol class="list-group list-group-numbered">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #282d55;">
+  <ol class="list-group list-group-numbered" data-bs-theme="dark">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group" data-bs-theme="dark">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl" data-bs-theme="dark">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl" data-bs-theme="dark">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 align-items-start border border-tertiary p-3" style="background-color: #b5e8f7">
+  <ol class="list-group list-group-numbered" data-bs-theme="light">
+    <li class="list-group-item">A list item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+    <li class="list-group-item list-group-item-success">A simple success list group item</li>
+    <li class="list-group-item list-group-item-info">A simple info list group item</li>
+    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+    <li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
+  </ol>
+  <div class="list-group" data-bs-theme="light">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-success">A simple success list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info">A simple info list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-warning">A simple warning list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-danger">A simple danger list group item</button>
+    <button type="button" class="list-group-item list-group-item-action text-no-wrap list-group-item-info" disabled>A simple disabled info list group item</button>
+  </div>
+  <ul class="list-group list-group-horizontal-xxl" data-bs-theme="light">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item active" aria-current="true">A list item</li>
+    <li class="list-group-item disabled" aria-disabled="true">A list item</li>
+  </ul>
+  <div class="list-group list-group-horizontal-xxl" data-bs-theme="light">
+    <button type="button" class="list-group-item list-group-item-action text-nowrap">A second button item</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap active" aria-current="true">The current button</button>
+    <button type="button" class="list-group-item list-group-item-action text-nowrap" disabled>A disabled button item</button>
+  </div>
+</div>
diff --git a/site/data/palette.yml b/site/data/palette.yml
@@ -55,41 +55,21 @@
       level: success
       hex: "#228722"
       variable: $functional-green
-    - name: Green on dark
-      class: green
-      level: success
-      hex: "#32c832"
-      variable: $functional-green-dark
     - name: Blue
       class: blue
       level: info
       hex: "#4170d8"
       variable: $functional-blue
-    - name: Blue on dark
-      class: blue
-      level: info
-      hex: "#527edb"
-      variable: $functional-blue-dark
     - name: Yellow
-      class: yellow
-      level: warning
-      hex: "#8f7200"
-      variable: $functional-yellow
-    - name: Yellow on dark
       class: yellow
       level: warning
       hex: "#fc0"
-      variable: $functional-yellow-dark
+      variable: $functional-yellow
     - name: Red
       class: red
       level: danger
       hex: "#cd3c14"
       variable: $functional-red
-    - name: Red on dark
-      class: red
-      level: danger
-      hex: "#d53f15"
-      variable: $functional-red-dark
 - category: Grays
   name: "Grays"
   colors: