vanilla-framework 3.0.0-beta.2 → 3.1.0

package/scss/_patterns_side-navigation.scss

@@ -288,6 +288,8 @@
     li > strong,
     li > a {
       @extend %side-navigation__text;
+
+      display: block;
     }
 
     li li > span,
@@ -357,11 +359,11 @@
   #{$prop}: $multiplier * map-get($grid-margin-widths, small) + $offset;
 
   @media (min-width: $threshold-4-6-col) {
-    #{$prop}: $multiplier * map-get($grid-margin-widths, medium) + $offset;
+    #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
   }
 
   @media (min-width: $threshold-6-12-col) {
-    #{$prop}: $multiplier * map-get($grid-margin-widths, large) + $offset;
+    #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
   }
 }
 

package/scss/_patterns_switch.scss

@@ -1,8 +1,9 @@
 @import 'settings';
-$knob-size: $sp-unit * 3;
+$knob-size: $sp-unit * 2;
 
 @mixin vf-p-switch {
   .p-switch {
+    align-items: center;
     display: flex;
   }
 
@@ -12,6 +13,7 @@ $knob-size: $sp-unit * 3;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
+      border: 1px solid $color-link;
       left: 50%;
     }
 
@@ -19,6 +21,10 @@ $knob-size: $sp-unit * 3;
       @extend %vf-disabled-element;
     }
 
+    &:checked + .p-switch__slider {
+      background: $color-link;
+    }
+
     &:focus {
       outline: none;
 
@@ -29,9 +35,8 @@ $knob-size: $sp-unit * 3;
   }
 
   .p-switch__slider {
-    @extend %vf-has-round-corners;
-
-    background: linear-gradient(to right, $color-link 50%, $color-mid-light 50%);
+    background: $color-mid-light;
+    border-radius: $knob-size;
     box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
     display: inline-block;
     height: $knob-size;
@@ -45,6 +50,8 @@ $knob-size: $sp-unit * 3;
       @include vf-animation($duration: slow);
 
       background: $color-x-light;
+      border: 1px solid $color-mid-dark;
+      border-radius: 50%;
       content: '';
       height: $knob-size;
       left: 0;

package/scss/_patterns_table-expanding.scss

@@ -20,10 +20,6 @@
         flow: row;
         wrap: wrap;
       }
-
-      + tr {
-        margin: 0;
-      }
     }
 
     th,

package/scss/_patterns_table-mobile-card.scss

@@ -27,16 +27,13 @@
         tr {
           border: $border;
           border-radius: $border-radius;
-          display: grid;
-          grid-gap: 0 map-get($grid-gutter-widths, small);
-          grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-          grid-template-rows: auto;
+          display: block;
           margin-bottom: $spv--x-large;
           padding: 0 $sph--large;
         }
-
         td,
         tbody th {
+          display: block;
           min-width: 100%;
           overflow: hidden;
           padding-left: 0;
@@ -56,8 +53,8 @@
             overflow: visible;
           }
 
-          &[aria-label]::before {
-            content: attr(aria-label);
+          &[data-heading]::before {
+            content: attr(data-heading);
             display: block;
             margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
             overflow: hidden;

package/scss/_settings_colors.scss

@@ -39,7 +39,7 @@ $color-focus-negative: #3b0006 !default;
 
 // Button background color changes
 $hover-background-opacity-amount: 0.05;
-$active-background-opacity-amount: 0.08;
+$active-background-opacity-amount: 0.1;
 
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
@@ -93,19 +93,38 @@ $colors--light-theme--border-default: rgba($color-x-dark, 0.15) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
-//XXX: add dark theme versions of tinted background and border colours for use with dark theme chips, notificaitons, etc.
 $colors-light-theme--tinted-backgrounds: (
-  neutral: #f2f2f2,
-  positive: #e8fdec,
-  caution: #fef1dc,
-  negative: #fce8ea,
-  information: #e5f2ff,
+  neutral: (
+    default: #f2f2f2,
+    hover: adjust-color(#f2f2f2, $lightness: -100% * $hover-background-opacity-amount, $saturation: -100% * 2 * $hover-background-opacity-amount),
+    active: adjust-color(#f2f2f2, $lightness: -100% * $active-background-opacity-amount, $saturation: -100% * 2 * $active-background-opacity-amount),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 10%),
+    hover: hsl(129deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 39% / 10%),
+    hover: hsl(27deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(354deg 100% 39% / 10%),
+    hover: hsl(354deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(354deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 39% / 10%),
+    hover: hsl(210deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
 );
 
 $colors-light-theme--tinted-borders: (
   neutral: $colors--light-theme--border-high-contrast,
   positive: $color-positive,
-  caution: #ec6c04,
+  caution: hsl(27deg 100% 39%),
   negative: $color-negative,
   information: $color-information,
 );
@@ -123,9 +142,45 @@ $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
 $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
-$colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
+$colors--dark-theme--border-high-contrast: hsl(0deg 0% 60%) !default;
 $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
+$colors-dark-theme--tinted-backgrounds: (
+  neutral: (
+    default: rgba(255, 255, 255, 0.15),
+    hover: rgba(255, 255, 255, 0.2),
+    active: rgba(255, 255, 255, 0.25),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 20%),
+    hover: hsl(129deg 100% 39% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 50% / 20%),
+    hover: hsl(27deg 100% 60% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(353deg 100% 70% / 20%),
+    hover: hsl(353deg 100% 70% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(353deg 100% 70% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 50% / 20%),
+    hover: hsl(210deg 100% 50% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+);
+
+$colors-dark-theme--tinted-borders: (
+  neutral: hsl(0deg 0% 65%),
+  positive: hsl(129deg 60% 65%),
+  caution: hsl(27deg 80% 65%),
+  negative: hsl(353deg 80% 70%),
+  information: hsl(210deg 80% 65%),
+);
+
 // Branding colors
 $color-brand: #333 !default;
 $color-brand-dark: $color-brand !default;

package/scss/_settings_grid.scss

@@ -16,14 +16,12 @@ $grid-large-col-prefix: #{$grid-column-prefix} !default;
 
 $grid-gutter-widths: (
   small: $sp-unit * 3,
-  medium: $sp-unit * 4,
-  large: $sp-unit * 4,
+  default: $sp-unit * 4,
 ) !default;
 
 $grid-margin-widths: (
   small: $sp-unit * 2,
-  medium: $sp-unit * 3,
-  large: $sp-unit * 3,
+  default: $sp-unit * 3,
 ) !default;
 
 // Grid breakout template

package/scss/_settings_spacing.scss

@@ -118,7 +118,7 @@ $form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle
 $text-max-width: 40em !default;
 
 $icon-sizes: (
-  accordion: $sp-unit * 1.5,
+  small: $sp-unit * 1.5,
   default: $sp-unit * 2,
   heading-icon--x-small: $sp-unit * 3,
   heading-icon--small: $sp-unit * 4,

package/scss/_settings_themes.scss

@@ -7,3 +7,4 @@ $theme-default-p-divider: 'light' !default;
 $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;
 $theme-default-p-button: 'light' !default;
+$theme-default-p-chip: 'light' !default;