vanilla-framework 4.14.0 → 4.16.0

package/scss/_patterns_status-label.scss

@@ -1,5 +1,10 @@
 @import 'settings';
 
+/**
+  TODO this component uses hard-coded colors that don't respond to theming, which is not ideal.
+    However, it looks fine on all themes, and re-working it to support theming is a larger undertaking.
+    So, it is being left as-is until it can be revisited as part of the tokens effort in the future.
+ */
 // Default status label styling
 @mixin vf-p-status-label {
   %vf-status-label {

package/scss/_patterns_table-mobile-card.scss

@@ -10,7 +10,7 @@
       text-align: left;
     }
 
-    @media (max-width: $threshold-6-12-col - 1) {
+    @media (width < $threshold-6-12-col) {
       @supports (display: grid) {
         thead {
           display: none;

package/scss/_patterns_tooltips.scss

@@ -34,9 +34,9 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
   .p-tooltip__message {
     @extend %small-text;
 
-    background-color: $color-dark;
+    background-color: $colors--theme--background-alt;
     border: 0;
-    color: $color-x-light;
+    color: $colors--theme--text-default;
     display: none;
     left: -2 * $triangle-height;
     margin-bottom: 0;
@@ -50,6 +50,24 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
     white-space: pre;
     z-index: 11; // one step above p-navigation's z-index
 
+    @include vf-theme-dark; // Default to dark theme
+
+    // stylelint-disable selector-max-type -- Tooltip theming is based on theming of the document body.
+    // Apply light theme if the page or the tooltip component is dark
+    body.is-dark &,
+    .p-tooltip.is-dark & {
+      @include vf-theme-light;
+    }
+
+    // Override to dark theme if the page or the tooltip component is light or paper
+    body.is-light &,
+    body.is-paper &,
+    .p-tooltip.is-light &,
+    .p-tooltip.is-paper & {
+      @include vf-theme-dark;
+    }
+    // stylelint-enable selector-max-type
+
     .is-detached & {
       display: block;
     }
@@ -57,7 +75,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
     // tooltip
     &::before {
       border: {
-        bottom: $triangle-height solid $color-dark;
+        bottom: $triangle-height solid $colors--theme--background-alt;
         left: $triangle-height solid transparent;
         right: $triangle-height solid transparent;
       }
@@ -152,7 +170,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
           bottom: $triangle-height solid transparent;
           left: $triangle-height solid transparent;
           right: $triangle-height solid transparent;
-          top: $triangle-height solid $color-dark;
+          top: $triangle-height solid $colors--theme--background-alt;
         }
 
         bottom: -2 * $triangle-height;
@@ -186,7 +204,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
           bottom: $triangle-height solid transparent;
           left: $triangle-height solid transparent;
           right: $triangle-height solid transparent;
-          top: $triangle-height solid $color-dark;
+          top: $triangle-height solid $colors--theme--background-alt;
         }
 
         bottom: -2 * $triangle-height;
@@ -223,7 +241,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
           bottom: $triangle-height solid transparent;
           left: $triangle-height solid transparent;
           right: $triangle-height solid transparent;
-          top: $triangle-height solid $color-dark;
+          top: $triangle-height solid $colors--theme--background-alt;
         }
 
         bottom: -2 * $triangle-height;
@@ -257,7 +275,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
         border: {
           bottom: $triangle-height solid transparent;
           left: $triangle-height solid transparent;
-          right: $triangle-height solid $color-dark;
+          right: $triangle-height solid $colors--theme--background-alt;
           top: $triangle-height solid transparent;
         }
 
@@ -296,7 +314,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
       &::before {
         border: {
           bottom: $triangle-height solid transparent;
-          left: $triangle-height solid $color-dark;
+          left: $triangle-height solid $colors--theme--background-alt;
           right: $triangle-height solid transparent;
           top: $triangle-height solid transparent;
         }

package/scss/_settings_breakpoints.scss

@@ -5,3 +5,19 @@ $breakpoint-large: 1036px !default;
 $breakpoint-navigation-threshold: $breakpoint-large !default;
 $breakpoint-heading-threshold: $breakpoint-large !default;
 $breakpoint-x-large: 1681px !default; // exclude most laptops
+
+// Mapping of breakpoint names to the min and max widths at which they apply.
+$breakpoint-bounds: (
+  small: (
+    min: null,
+    max: $breakpoint-small,
+  ),
+  medium: (
+    min: $breakpoint-small,
+    max: $breakpoint-large,
+  ),
+  large: (
+    min: $breakpoint-large,
+    max: null,
+  ),
+);

package/scss/_settings_colors.scss

@@ -39,9 +39,8 @@ $color-link-visited-dark: #a679d2 !default;
 $color-focus-dark: #9cf !default;
 
 // Focus modifications to meet AA 3:1 contrast ratio against
-// button background for positive/negative buttons
+// button background for positive buttons
 $color-focus-positive: #003008 !default;
-$color-focus-negative: #3b0006 !default;
 
 // Button background color changes
 $input-background-opacity-amount: 0.04;
@@ -105,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;
@@ -178,9 +180,9 @@ $colors--dark-theme--focus: $color-focus-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;
@@ -226,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.
@@ -286,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
@@ -340,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 {
@@ -395,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 {
@@ -415,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;
       }

package/scss/_vanilla.scss

@@ -11,6 +11,7 @@
 @import 'patterns_chip';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
+@import 'patterns_cta';
 @import 'patterns_divider';
 @import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
@@ -104,6 +105,7 @@
   @include vf-p-chip;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
+  @include vf-p-cta-block;
   @include vf-p-divider;
   @include vf-p-equal-height-row;
   @include vf-p-form-help-text;