Merge pull request #1189 from owncloud/theming-fixes

Change colour of breadcrumbs and create text-lead utility

changelog/unreleased/breadcrumbs-color

@@ -0,0 +1,5 @@
+Change: Use oc-color for breadcrumbs
+
+We've changed the colour of breadcrumbs to use the `oc-color` instead of the brand color.
+
+https://github.com/owncloud/owncloud-design-system/pull/1189

changelog/unreleased/text-lead

@@ -0,0 +1,5 @@
+Enhancement: Add `oc-text-lead` class
+
+We've added a utility class called `oc-text-lead` which is increasing the font size of the text.
+
+https://github.com/owncloud/owncloud-design-system/pull/1189

config/docs.config.js

@@ -124,6 +124,11 @@ module.exports = {
           content: "../docs/visibility.md",
           description: "Utility classes to hide/display from a certain screen width",
         },
+        {
+          name: "Text",
+          content: "../docs/text.md",
+          description: "Utility classes to change the way text is displayed",
+        },
       ],
     },
     {

docs/text.md

@@ -0,0 +1,16 @@
+## Text wrapping behaviour
+
+Use one of the following classes to enforce a certain wrapping behaviour.
+
+| Class             | Description                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------- |
+| .oc-text-overflow | Sets overflow to `hidden` without resizing its container.                                     |
+| .oc-text-nowrap   | Doesn't break to new lines.                                                                   |
+| .oc-text-truncate | Doesn't break to new lines. Text will be truncated, showing an ellipsis instead if necessary. |
+| .oc-text-break    | Text will break to new lines at word ends if it exceeds one line.                             |
+
+## Text size
+
+| Class         | Description                                                     |
+| ------------- | --------------------------------------------------------------- |
+| .oc-text-lead | Sets a large font size to symbolise that the text is important. |

docs/utilities.md

@@ -2,14 +2,3 @@
 
 ownCloud Design System has some utility classes builtin. Some of them
 have their own page because of their amount of variations.
-
-## Text wrapping behaviour
-
-Use one of the following classes to enforce a certain wrapping behaviour.
-
-| Class             | Description                                                                                   |
-| ----------------- | --------------------------------------------------------------------------------------------- |
-| .oc-text-overflow | Sets overflow to `hidden` without resizing its container.                                     |
-| .oc-text-nowrap   | Doesn't break to new lines.                                                                   |
-| .oc-text-truncate | Doesn't break to new lines. Text will be truncated, showing an ellipsis instead if necessary. |
-| .oc-text-break    | Text will break to new lines at word ends if it exceeds one line.                             |

src/components/OcBreadcrumb.vue

@@ -118,6 +118,75 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.oc-breadcrumb {
+  overflow: hidden;
+
+  &-list {
+    @extend .uk-visible\@s;
+    @extend .uk-breadcrumb;
+    @extend .oc-m-rm;
+
+    > li a,
+    > li span,
+    > :nth-child(n + 2):not(.uk-first-column)::before {
+      color: var(--oc-color-muted);
+    }
+
+    > :last-child > span {
+      color: var(--oc-color);
+    }
+
+    > li a:hover {
+      color: var(--oc-variation-primary);
+    }
+  }
+
+  /* stylelint-disable */
+  &-lead &-list-item {
+    &::before,
+    a,
+    span {
+      // FIXME: Remove important after we get rid of UIKit
+      font-size: $large-font-size;
+    }
+  }
+  /* stylelint-enable */
+
+  &-drop {
+    @extend .uk-hidden\@s;
+
+    .uk-drop > .uk-card > .uk-nav-default {
+      > li a,
+      > li span {
+        color: var(--oc-color-muted);
+      }
+
+      > li a:hover,
+      > li span:hover {
+        color: var(--oc-brand-primary);
+      }
+    }
+
+    &-label {
+      @extend .uk-flex;
+      @extend .uk-flex-middle;
+      @extend .uk-flex-between;
+      @extend .uk-background-default;
+
+      border: $global-border-width solid var(--oc-variation-primary-muted);
+      cursor: pointer;
+      height: $global-control-height;
+      padding: $space-small;
+
+      &-text {
+        @extend .uk-text-truncate;
+      }
+    }
+  }
+}
+</style>
+
 <docs>
 ```js
 <template>

src/styles/styles.scss

@@ -21,7 +21,6 @@
 @import 'theme/oc-app-bar';
 @import 'theme/oc-app-menu';
 @import 'theme/oc-autocomplete';
-@import 'theme/oc-breadcrumb';
 @import 'theme/oc-button';
 @import 'theme/oc-card';
 @import 'theme/oc-datepicker';
@@ -30,7 +29,6 @@
 @import 'theme/oc-icon';
 @import 'theme/oc-loader';
 @import 'theme/oc-modal';
-@import 'theme/oc-page-title';
 @import 'theme/oc-progress';
 @import 'theme/oc-progress-pie';
 @import 'theme/oc-public-share-icon';

src/styles/theme/login.scss

@@ -23,10 +23,6 @@
     @extend .uk-card-default;
     @extend .uk-text-center;
 
-    &-title {
-      @extend .uk-card-title;
-    }
-
     &-body {
       @extend .uk-card-body;
 

src/styles/theme/oc-text.scss

@@ -3,8 +3,9 @@ h1,
 h2,
 h3,
 h4,
-p,
-.oc-page-title {
+h5,
+h6,
+p {
   color: var(--oc-color);
 }
 
@@ -63,3 +64,10 @@ th.oc-text-break,
 td.oc-text-break {
   word-break: break-all;
 }
+
+.oc-text-lead {
+  color: var(--oc-color);
+  font-size: 1.5rem;
+  line-height: 1.5;
+  margin: 0;
+}