vanilla-framework 4.0.0-alpha.3 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_base_hr.scss

@@ -46,8 +46,7 @@
       @include vf-hr-dark-theme;
     }
 
-    hr.is-light, // deprecated, use on-light instead
-    hr.on-light {
+    hr.is-light {
       @include vf-hr-light-theme;
     }
   } @else {
@@ -55,8 +54,7 @@
       @include vf-hr-light-theme;
     }
 
-    hr.is-dark, // deprecated, use on-dark instead
-    hr.on-dark {
+    hr.is-dark {
       @include vf-hr-dark-theme;
     }
   }

package/scss/_base_icon-definitions.scss

@@ -418,6 +418,10 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 110 16A8 8 0 018 0zm0 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm2.814 2.45l1.203.897-5.537 7.43-3.485-3.694 1.09-1.03 2.259 2.394 4.47-5.997z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
+@mixin vf-icon-error-grey($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
 @mixin vf-icon-switcher-dashboard($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 9a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 012.75 9h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 019.75 9h3.5zM5.5 10.5h-2v2h2v-2zm7 0h-2v2h2v-2zM6.25 2a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 012 6.25v-3.5A.75.75 0 012.75 2h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 019 6.25v-3.5A.75.75 0 019.75 2h3.5zM5.5 3.5h-2v2h2v-2zm7 0h-2v2h2v-2z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }

package/scss/_base_links.scss

@@ -28,7 +28,7 @@
       color: $color-link-visited;
     }
 
-    &.on-dark {
+    &.is-dark {
       color: $color-link-dark;
 
       &:visited {

package/scss/_base_typography-definitions.scss

@@ -198,10 +198,10 @@
     font-variant-caps: all-small-caps;
     font-variant-numeric: oldstyle-nums;
     letter-spacing: 0.05em;
-    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
+    margin-bottom: map-get($sp-after, p-small-caps) - map-get($nudges, p);
 
     &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--small;
+      @extend %u-no-margin--bottom--default-text;
     }
 
     // deprecated: the use of .u-align-text--x-small-to-default on small caps text is deprecated

package/scss/_patterns_breadcrumbs.scss

@@ -25,7 +25,7 @@
     }
 
     &:not(:first-of-type)::before {
-      content: '\203A';
+      content: '/';
       margin-left: -0.75rem;
       margin-right: 0.5rem;
     }

package/scss/_patterns_icons.scss

@@ -21,6 +21,8 @@
   @include vf-p-icon-copy;
   @include vf-p-icon-search;
   @include vf-p-icon-success;
+  @include vf-p-icon-success-grey;
+  @include vf-p-icon-error-grey;
   @include vf-p-icon-share;
   @include vf-p-icon-user;
   @include vf-p-icon-spinner;
@@ -1359,6 +1361,18 @@
   }
 }
 
+@mixin vf-p-icon-error-grey {
+  .p-icon--error-grey {
+    @extend %icon;
+    @include vf-icon-error-grey($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-error-grey($color-x-light);
+    }
+  }
+}
+
 @mixin vf-p-icon-switcher-dashboard {
   .p-icon--switcher-dashboard {
     @extend %icon;

package/scss/_patterns_lists.scss

@@ -198,7 +198,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-success;
+      @include vf-icon-success-grey($color-mid-dark);
     }
   }
 
@@ -207,7 +207,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-error;
+      @include vf-icon-error-grey($color-mid-dark);
     }
   }
 

package/scss/_patterns_navigation.scss

@@ -251,7 +251,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__logo-tag {
-      background-color: $color-brand;
+      background-color: $color-ubuntu;
       height: $navigation-logo-tag-height;
       left: 0;
       position: absolute;

package/scss/_patterns_rule.scss

@@ -10,7 +10,7 @@
   .p-rule--muted {
     background-color: $colors--light-theme--border-low-contrast;
 
-    &.on-dark {
+    &.is-dark {
       background-color: $colors--dark-theme--border-low-contrast;
     }
   }
@@ -18,7 +18,7 @@
   .p-rule--highlight {
     @include vf-highlight-bar($colors--light-theme--text-default);
 
-    &.on-dark {
+    &.is-dark {
       @include vf-highlight-bar($colors--dark-theme--text-default);
     }
 

package/scss/_patterns_section.scss

@@ -8,7 +8,17 @@
     }
   }
 
-  .p-block {
+  .p-section--deep {
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-deep * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-deep;
+    }
+  }
+
+  .p-block, // deprecated, use .p-section--shallow
+  .p-section--shallow {
     // same as %section-padding--shallow
     padding-bottom: $spv--x-large;
   }

package/scss/_settings_colors.scss

@@ -207,7 +207,8 @@ $colors--paper-theme--background-active: rgba($color-x-dark, $active-background-
 $colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
 
 // Branding colors
-$color-brand: #e95420 !default;
+$color-ubuntu: #e95420; // Ubuntu orange, should not be overridden
+$color-brand: $color-ubuntu !default;
 $color-brand-dark: $color-brand !default;
 $color-accent: #0f95a1 !default;
 $color-accent-background: $colors--dark-theme--background-default !default; // changed from "brand" colour to dark theme background

package/scss/_settings_spacing.scss

@@ -97,6 +97,7 @@ $sp-after: (
   h4: $spv--x-large,
   h4-mobile: $spv--x-large,
   p: $spv--x-large,
+  p-small-caps: $spv--large,
   p-dense: $spv--large,
   default-text: $sp-unit,
   small: $spv--large,

package/scss/_utilities_vertical-spacing.scss

@@ -1,4 +1,8 @@
 @mixin vf-u-vertical-spacing($start: -3, $end: 3) {
+  // FIXME
+  // this utility works only on elements that don't have borders or backgrounds
+  // by adding an ::after pseudo-element it extends the inside of the element
+  // rather than modyfing the space after it
   %u-vertical-spacer {
     content: '';
     display: block;