vanilla-framework 4.15.0 → 4.16.0

package/scss/_settings_colors.scss

@@ -41,7 +41,6 @@ $color-focus-dark: #9cf !default;
 // Focus modifications to meet AA 3:1 contrast ratio against
 // button background for positive buttons
 $color-focus-positive: #003008 !default;
-$color-focus-positive-dark: #9cf !default;
 
 // Button background color changes
 $input-background-opacity-amount: 0.04;
@@ -93,7 +92,6 @@ $states: (
 // --link-default    - default link color
 // --link-visited    - visited link color
 // --focus           - focus highlight/outline color
-// --positive-focus  - focus highlight/outline color for positive buttons
 //
 // Background colors:
 // --background           - default background color
@@ -106,6 +104,9 @@ $states: (
 // --border-default       - default border color
 // --border-high-contrast - high contrast version of border color, to be used when border needs more visibility (form inputs, etc)
 // --border-low-contrast  - low contrast version of border color, to be used when border needs more visibility (separators)
+//
+// Highlight colors:
+// --accent         - default accent color
 
 // Light theme
 $colors--light-theme--text-default: #000 !default;
@@ -115,7 +116,6 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 $colors--light-theme--link-default: $color-link !default;
 $colors--light-theme--link-visited: $color-link-visited !default;
 $colors--light-theme--focus: $color-focus !default;
-$colors--light-theme--positive-focus: $color-focus-positive !default;
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
@@ -176,14 +176,13 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-dark !default;
 $colors--dark-theme--focus: $color-focus-dark !default;
-$colors--dark-theme--positive-focus: $color-focus-positive-dark !default;
 
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #202020 !default;
 $colors--dark-theme--background-code: $color-code-background-dark !default;
-$colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
-$colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
-$colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
+$colors--dark-theme--background-inputs: #2f2f2f !default;
+$colors--dark-theme--background-active: #373737 !default;
+$colors--dark-theme--background-hover: #313131 !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;
@@ -229,9 +228,9 @@ $colors-dark-theme--tinted-borders: (
 );
 
 // Paper theme (work in progress)
-$colors--paper-theme--background-inputs: rgba($color-x-dark, $input-background-opacity-amount) !default;
-$colors--paper-theme--background-active: rgba($color-x-dark, $active-background-opacity-amount) !default;
-$colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
+$colors--paper-theme--background-inputs: #eaeaea !default;
+$colors--paper-theme--background-active: #e0e0e0 !default;
+$colors--paper-theme--background-hover: #e7e7e7 !default;
 
 // Current theme (based on CSS variables)
 // This is a mapping between SCSS variable and it's CSS property equivalent.
@@ -244,7 +243,6 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
 $colors--theme--link-default: var(--vf-color-link-default);
 $colors--theme--link-visited: var(--vf-color-link-visited);
 $colors--theme--focus: var(--vf-color-focus);
-$colors--theme--positive-focus: var(--vf-color-positive-focus);
 
 $colors--theme--background-default: var(--vf-color-background-default);
 $colors--theme--background-alt: var(--vf-color-background-alt);
@@ -290,6 +288,8 @@ $colors--theme--button-negative-hover: var(--vf-color-button-negative-hover);
 $colors--theme--button-negative-active: var(--vf-color-button-negative-active);
 $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
+$colors--theme--accent: var(--vf-color-accent);
+
 // Theme colors exposed as CSS custom properties
 @mixin vf-theme-light--colors {
   // SCSS variables need to be interpolated to work in CSS custom properties
@@ -300,7 +300,6 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--light-theme--link-default};
   --vf-color-link-visited: #{$colors--light-theme--link-visited};
   --vf-color-focus: #{$colors--light-theme--focus};
-  --vf-color-positive-focus: #{$colors--light-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--light-theme--background-default};
   --vf-color-background-alt: #{$colors--light-theme--background-alt};
@@ -345,6 +344,8 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-button-negative-hover: #{adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage)};
   --vf-color-button-negative-active: #{adjust-color($color-negative, $lightness: -$active-background-opacity-percentage)};
   --vf-color-button-negative-text: #{vf-contrast-text-color($color-negative)};
+
+  --vf-color-accent: #{$color-accent};
 }
 
 @mixin vf-theme-dark--colors {
@@ -356,7 +357,6 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--dark-theme--link-default};
   --vf-color-link-visited: #{$colors--dark-theme--link-visited};
   --vf-color-focus: #{$colors--dark-theme--focus};
-  --vf-color-positive-focus: #{$colors--dark-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--dark-theme--background-default};
   --vf-color-background-alt: #{$colors--dark-theme--background-alt};
@@ -401,6 +401,8 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-button-negative-hover: #{adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage)};
   --vf-color-button-negative-active: #{adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage)};
   --vf-color-button-negative-text: #{vf-contrast-text-color($color-negative-dark)};
+
+  --vf-color-accent: #{$color-accent-dark};
 }
 
 @mixin vf-theme-paper--colors {
@@ -421,4 +423,5 @@ $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-dark: #70bbc2 !default;
 $color-accent-background: $colors--dark-theme--background-default !default; // changed from "brand" colour to dark theme background

package/scss/_utilities_floats.scss

@@ -6,19 +6,19 @@
     float: right !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         float: right !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         float: right !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         float: right !important;
       }
     }
@@ -28,19 +28,19 @@
     float: left !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         float: left !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         float: left !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         float: left !important;
       }
     }

package/scss/_utilities_hide.scss

@@ -21,19 +21,19 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: none !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: none !important;
       }
     }
@@ -45,19 +45,19 @@
     @include vf-hide-table-column;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         @include vf-hide-table-column;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         @include vf-hide-table-column;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         @include vf-hide-table-column;
       }
     }
@@ -69,19 +69,19 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: none !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: none !important;
       }
     }

package/scss/_utilities_show.scss

@@ -6,21 +6,21 @@
     display: initial !important;
 
     &--small {
-      @media (max-width: $breakpoint-small - 1) {
+      @media (width < $breakpoint-small) {
         display: inherit !important;
         display: initial !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+      @media ($breakpoint-small <= width < $breakpoint-large) {
         display: inherit !important;
         display: initial !important;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media ($breakpoint-large <= width) {
         display: inherit !important;
         display: initial !important;
       }