Merge pull request #3728 from sowasred2012/dark-divider

Add dark theme to p-divider

scss/_patterns_divider.scss

@@ -12,22 +12,18 @@
       padding-bottom: $spv-outer--scaleable;
       padding-top: $spv-inner--scaleable;
 
-      &:not(:first-child) {
-        &::before {
-          background-color: $color-mid-light;
-          content: '';
-          height: 1px;
-          left: 0;
-          position: absolute;
-          right: 0;
-          top: 0;
-        }
+      &:not(:first-child)::before {
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
       }
     }
 
     @media (min-width: $threshold-6-12-col) {
       &:not(:first-child)::before {
-        background-color: $color-mid-light;
         bottom: 0;
         content: '';
         left: map-get($grid-gutter-widths, large) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
@@ -37,4 +33,39 @@
       }
     }
   }
+
+  // Theming
+  @if ($theme-default-p-divider == 'dark') {
+    .p-divider__block {
+      @include vf-divider-dark-theme;
+    }
+
+    .p-divider.is-light .p-divider__block {
+      @include vf-divider-light-theme;
+    }
+  } @else {
+    .p-divider__block {
+      @include vf-divider-light-theme;
+    }
+
+    .p-divider.is-dark .p-divider__block {
+      @include vf-divider-dark-theme;
+    }
+  }
+}
+
+@mixin vf-divider-theme($color-divider-text, $color-divider-line) {
+  color: $color-divider-text;
+
+  &:not(:first-child)::before {
+    background-color: $color-divider-line;
+  }
+}
+
+@mixin vf-divider-light-theme {
+  @include vf-divider-theme($colors--light-theme--text-default, $colors--light-theme--border-default);
+}
+
+@mixin vf-divider-dark-theme {
+  @include vf-divider-theme($colors--dark-theme--text-default, $colors--dark-theme--border-default);
 }

scss/_settings_themes.scss

@@ -3,5 +3,6 @@ $theme-default-hr: 'light' !default;
 $theme-default-nav: 'light' !default;
 $theme-default-p-side-navigation: 'light' !default;
 $theme-default-p-search-box: 'light' !default;
+$theme-default-p-divider: 'light' !default;
 $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;

scss/standalone/dark.scss

@@ -3,6 +3,7 @@ $theme-default-hr: 'dark';
 $theme-default-nav: 'dark';
 $theme-default-p-search-box: 'dark';
 $theme-default-p-contextual-menu: 'dark';
+$theme-default-p-divider: 'dark';
 $theme-default-p-inline-list--middot: 'dark';
 
 @import '../vanilla';

templates/_layouts/docs.html

@@ -71,7 +71,7 @@
               {{ side_nav_item("/docs/patterns/labels", "Labels") }}
               {{ side_nav_item("/docs/patterns/links", "Links") }}
               {{ side_nav_item("/docs/patterns/list-tree", "List tree") }}
-              {{ side_nav_item("/docs/patterns/lists", "Lists") }}
+              {{ side_nav_item("/docs/patterns/lists", "Lists", "updated") }}
               {{ side_nav_item("/docs/patterns/logo-section", "Logo section") }}
               {{ side_nav_item("/docs/patterns/matrix", "Matrix") }}
               {{ side_nav_item("/docs/patterns/media-object", "Media object") }}

templates/docs/component-status.md

@@ -29,6 +29,12 @@ When we add, make significant updates, or deprecate a component we update their
       <td>2.30.0</td>
       <td>Buttons can now assume the appearance of a standard link.</td>
     </tr>
+    <tr>
+      <th><a href="/docs/patterns/lists#theming">Lists / Divider</a></th>
+      <td><div class="p-label--updated">Updated</div></td>
+      <td>2.30.0</td>
+      <td>We added a dark theme to responsive divider lists.</td>
+    </tr>
   </tbody>
 </table>
 

templates/docs/examples/patterns/lists/divider-dark.html

@@ -0,0 +1,29 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Divider - Dark{% endblock %}
+
+{% block standalone_css %}patterns_divider{% endblock %}
+
+{% block style %}
+<style>
+  body {
+    background: #111;
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row p-divider is-dark">
+  <div class="col-4 p-divider__block">
+    <h2>Lorem ipsum</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>
+  </div>
+  <div class="col-4 p-divider__block">
+    <h2>Dolor sit</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>
+  </div>
+  <div class="col-4 p-divider__block">
+    <h2>Cumque commodi</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>
+  </div>
+</div>
+{% endblock %}

templates/docs/patterns/lists.md

@@ -123,6 +123,21 @@ If you wish to split the items in a list into two columns above `$breakpoint-med
 View example of the patterns list split
 </a></div>
 
+### Theming
+
+The responsive divider is available in a light and a dark theme. The colours used by both themes in the [colour settings file](https://github.com/canonical-web-and-design/vanilla-framework/blob/master/scss/_settings_colors.scss).
+Overriding the colours of individual elements of the responsive is discouraged, as this may lead to accessibility issues, or inconsistencies with other components that use the same theme.
+
+By default, the responsive divider uses the light theme. To change the global default, set `$theme-default-p-divider` to `dark`.
+
+To change the appearance of an individual instance of the responsive divider pattern, you can use the `is-dark` class.
+
+For more details about themes in Vanilla refer to the [Color theming](/docs/settings/color-settings#color-theming) section of the documentation.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/divider-dark/" class="js-example">
+View example of the divider list with an is-dark class
+</a></div>
+
 ### Import
 
 To import list patterns into your project, copy the snippet below and include it in your main Sass file.

templates/docs/settings/color-settings.md

@@ -151,6 +151,7 @@ Starting with the [2.3.0](https://github.com/canonical-web-and-design/vanilla-fr
 - [Checkbox](/docs/base/forms#checkbox) and [radio](/docs/base/forms#radio-button) form inputs
 - Horizontal rule element `<hr />`
 - [Contextual menu](/docs/patterns/contextual-menu)
+- [Lists / Divider](/docs/patterns/lists#responsive-divider)
 - [Lists / Middot](/docs/patterns/lists#middot)
 - [Navigation](/docs/patterns/navigation)
 - [Side navigation](/docs/patterns/navigation#side-navigation)
@@ -162,6 +163,7 @@ Starting with the [2.3.0](https://github.com/canonical-web-and-design/vanilla-fr
 | radio               | `$theme-default-forms`                 | `light`       |
 | hr                  | `$theme-default-hr`                    | `light`       |
 | Contextual menu     | `$theme-default-p-contextual-menu`     | `light`       |
+| Lists / Divider     | `$theme-default-p-divider`             | `light`       |
 | Lists / Middot      | `$theme-default-p-inline-list--middot` | `light`       |
 | Navigation          | `$theme-default-nav`                   | `light`       |
 | Side navigation     | `$theme-default-p-side-navigation`     | `light`       |