vanilla-framework 4.15.0 → 4.17.0

package/scss/_patterns_lists.scss

@@ -3,24 +3,24 @@ $list-status-icon-height: $default-icon-size;
 $list-step-bullet-margin: $sph--x-large;
 
 @mixin vf-p-list-placeholders {
-  // container for stepped lists (`ol`)
-  // defines the layout and resets the native browser counter
+  // Container for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Defines the layout and resets a custom counter
   %numbered-step-container {
-    counter-reset: list-item;
+    counter-reset: p-stepped-list-counter;
     display: flex;
     flex-direction: column;
     list-style: none;
     padding-left: 0;
   }
 
-  // list item for stepped lists (`li`)
-  // increments the default browser counter
+  // List item for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Increments the custom counter
   %numbered-step-item {
-    counter-increment: list-item;
+    counter-increment: p-stepped-list-counter;
   }
 
-  // title for stepped lists
-  // displays the title and step counter
+  // Title for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Displays the title and step counter
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
@@ -28,7 +28,7 @@ $list-step-bullet-margin: $sph--x-large;
     position: relative;
 
     &::before {
-      content: counter(list-item) '.';
+      content: counter(p-stepped-list-counter) '.';
       display: block;
       height: map-get($line-heights, default-text);
       left: 0;
@@ -39,16 +39,30 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
-  // used with .p-list--nested-counter
+  // Styles for .p-list--nested-counter
   %nested-counter {
     // Counter is named and it will be reset for each "ol" element.
-    counter-reset: list-item;
+    counter-reset: p-list-nested-counter-top;
+
+    li {
+      counter-increment: p-list-nested-counter-top;
+    }
+
     li::marker {
-      // "counters" function returns a string representing the current value of the named counter ("list-item").
-      // It is used to insert a string between different levels of nested counters.
-      // Source: https://www.w3schools.com/css/css_counters.asp
-      content: counters(list-item, '.') '. ';
-      counter-increment: list-item;
+      content: counter(p-list-nested-counter-top) '. ';
+    }
+
+    // Counter is named and it will be reset for each nested "ol" element.
+    li ol {
+      counter-reset: p-list-nested-counter-nested;
+    }
+
+    li ol li {
+      counter-increment: p-list-nested-counter-nested;
+    }
+
+    li ol li::marker {
+      content: counter(p-list-nested-counter-top) '.' counter(p-list-nested-counter-nested) '. ';
     }
   }
 
@@ -80,7 +94,10 @@ $list-step-bullet-margin: $sph--x-large;
     top: $spv--small;
   }
 
+  // Styles for .p-list--divided ordered lists
   %vf-list-item-ordered {
+    counter-increment: p-list-divided-counter;
+
     &::marker {
       content: none;
       display: none;
@@ -88,9 +105,32 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       color: $colors--theme--text-default;
-      content: counters(list-item, '.') '. ';
+      // If .p-list--divided ordered list is not within stepped list, display
+      // counter as unique whole number
+      content: counter(p-list-divided-counter) '.';
       display: inline-block;
       text-align: right;
+
+      // If .p-list--divided ordered list is within a stepped list, display
+      // counter as decimal nested under parent number
+      .p-stepped-list &,
+      .p-stepped-list--detailed & {
+        content: counter(p-stepped-list-counter) '.' counter(p-list-divided-counter) '.';
+      }
+    }
+
+    // If .p-list--divided is within another .p-list--divided, display counter
+    // as decimal nested under parent number
+    ol.p-list--divided {
+      counter-reset: p-list-divided-nested-counter;
+
+      .p-list__item {
+        counter-increment: p-list-divided-nested-counter;
+
+        &::before {
+          content: counter(p-list-divided-counter) '.' counter(p-list-divided-nested-counter) '.';
+        }
+      }
     }
   }
 
@@ -187,6 +227,7 @@ $list-step-bullet-margin: $sph--x-large;
 
   // stylelint-disable selector-max-type -- we want to target ordered lists
   ol.p-list--divided {
+    counter-reset: p-list-divided-counter;
     list-style: none;
 
     .p-list__item {

package/scss/_patterns_matrix.scss

@@ -31,7 +31,7 @@
       width: 33.333%;
     }
 
-    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+    @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
       flex-direction: column;
 
       &:nth-child(2),
@@ -142,7 +142,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold - 1) {
+    @media (width < $breakpoint-heading-threshold) {
       margin-top: -#{$sp-unit};
     }
 

package/scss/_patterns_navigation.scss

@@ -85,7 +85,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @extend %navigation-link-text;
     @extend %vf-navigation-separator;
     @include vf-transition($properties, snap);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     // override button styles
     background-color: transparent;
@@ -327,7 +327,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     margin: 0 $sph--large 0 0;
 
     .p-navigation__item {
-      @include vf-focus;
+      @include vf-focus-themed;
 
       display: flex;
     }
@@ -478,7 +478,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %navigation-link-text;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin: 0 0 auto 0;
   }
@@ -688,7 +688,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
       top: $spv--large * 2 + map-get($line-heights, default-text);
     }
 
-    @media (max-width: ($breakpoint-navigation-threshold - 1)) {
+    @media (width < $breakpoint-navigation-threshold) {
       box-shadow: none;
     }
   }

package/scss/_patterns_pull-quotes.scss

@@ -109,7 +109,7 @@
   .p-pull-quote--large {
     .p-pull-quote__quote {
       &:first-of-type::before {
-        @media (max-width: $breakpoint-heading-threshold - 1) {
+        @media (width < $breakpoint-heading-threshold) {
           top: 0.75rem;
         }
       }

package/scss/_patterns_rule.scss

@@ -4,7 +4,11 @@
   .p-rule,
   .p-rule--muted,
   .p-rule--highlight {
-    @extend %u-no-margin--bottom--hr;
+    @extend %hr;
+
+    &.is-fixed-width {
+      @extend %fixed-width-hr;
+    }
   }
 
   .p-rule--muted {
@@ -15,7 +19,7 @@
     @include vf-highlight-bar($colors--theme--text-default);
 
     &.is-accent {
-      @include vf-highlight-bar($color-accent);
+      @include vf-highlight-bar($colors--theme--accent);
     }
   }
 }

package/scss/_patterns_search-and-filter.scss

@@ -22,12 +22,12 @@
   $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);
 
   .p-search-and-filter {
-    border-bottom: $input-border-thickness solid $colors--light-theme--border-high-contrast;
+    border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     position: relative;
 
     .p-search-and-filter__search-container {
       align-items: center;
-      background-color: $colors--light-theme--background-inputs;
+      background-color: $colors--theme--background-inputs;
       display: flex;
       flex-wrap: wrap;
       height: auto;
@@ -52,11 +52,11 @@
       }
 
       .p-search-and-filter__selected-count {
-        color: $color-information;
+        color: $colors--theme--link-default;
         cursor: pointer;
         position: absolute;
         right: 0.5rem;
-        top: $focus-outline-offset;
+        top: 0.3rem;
       }
 
       &[aria-expanded='true'] {
@@ -72,7 +72,7 @@
     .p-search-and-filter__panel {
       @include vf-transition(opacity, fast);
 
-      background-color: $color-x-light;
+      background-color: $colors--theme--background-inputs;
       box-shadow: $box-shadow;
       opacity: 1;
       padding: $input-vertical-padding $sph--large 0;
@@ -87,7 +87,7 @@
     }
 
     .p-search-and-filter__search-prompt {
-      background: $color-light;
+      background: $colors--theme--background-inputs;
       cursor: pointer;
       margin-left: -1rem;
       margin-right: -1rem;
@@ -99,7 +99,7 @@
 
     .p-search-and-filter__clear {
       @extend %vf-button-has-icon;
-      background-color: $colors--light-theme--background-inputs;
+      background-color: $colors--theme--background-inputs;
 
       border: none;
       bottom: $focus-outline-offset;
@@ -145,7 +145,7 @@
 
 @mixin vf-filter-panel-section {
   .p-filter-panel-section {
-    border-bottom: 1px solid $color-mid-x-light;
+    border-bottom: 1px solid $colors--theme--border-low-contrast;
     margin: 0;
     padding-bottom: $spv--large;
 
@@ -168,9 +168,8 @@
     }
 
     .p-filter-panel-section__heading {
-      color: $color-mid-dark;
-      font-size: 1rem;
-      margin-bottom: 0;
+      @extend %vf-heading-5;
+      color: $colors--theme--text-muted;
     }
 
     .p-filter-panel-section__chips {
@@ -185,7 +184,7 @@
 
     .p-filter-panel-section__counter {
       bottom: 0;
-      color: $color-information;
+      color: $colors--theme--link-default;
       cursor: pointer;
       position: absolute;
       right: 0.25rem;

package/scss/_patterns_separator.scss

@@ -1,3 +1,4 @@
+// DEPRECATED: use rule component for the separator and strips or sections for spacing
 @mixin vf-p-separator {
   .p-separator {
     // spacing based on %section-padding--default, but using margins on <hr>

package/scss/_patterns_side-navigation.scss

@@ -354,7 +354,7 @@
   }
 
   %side-navigation__link {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     &,
     &:visited {

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_strip.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-p-strip {
@@ -118,9 +119,9 @@
 
 // DEPRECATED:
 // gradient of the main suru slant
-$color-suru-start: lighten($color-brand, 10%) !default;
+$color-suru-start: color.adjust($color-brand, $lightness: 10%) !default;
 $color-suru-middle: $color-brand !default;
-$color-suru-end: darken($color-brand, 10%) !default;
+$color-suru-end: color.adjust($color-brand, $lightness: -10%) !default;
 
 // page background
 $color-suru-background: $color-x-light !default;

package/scss/_patterns_switch.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 $knob-size: $sp-unit * 2;
 
@@ -37,7 +38,7 @@ $knob-size: $sp-unit * 2;
   .p-switch__slider {
     background: $colors--theme--background-neutral-default;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
+    box-shadow: inset 0 2px 5px 0 color.scale($color-x-dark, $alpha: -80%);
     display: inline-block;
     height: $knob-size;
     margin: 0;

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Global color settings
 $color-transparent: transparent !default;
 
@@ -41,7 +43,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 +94,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 +106,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 +118,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;
@@ -123,7 +125,7 @@ $colors--light-theme--background-code: $color-code-background !default;
 $colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
 $colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
 $colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
-$colors--light-theme--background-overlay: transparentize($color-dark, 0.15) !default;
+$colors--light-theme--background-overlay: color.scale($color-dark, $alpha: -15%) !default;
 
 $colors--light-theme--border-default: rgba($color-x-dark, 0.2) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
@@ -176,15 +178,14 @@ $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-overlay: transparentize($color-dark, 0.15) !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: color.scale($color-dark, $alpha: -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.5) !default;
@@ -229,9 +230,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 +245,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 +290,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 +302,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 +346,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 +359,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 +403,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 +425,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/_settings_placeholders.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings_spacing';
 @import 'settings_colors';
 
@@ -7,7 +8,7 @@ $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems s
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $colors--theme--border-default !default;
 $box-shadow:
-  0 1px 1px 0 transparentize($color-x-dark, 0.85),
-  0 2px 2px -1px transparentize($color-x-dark, 0.85),
-  0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
+  0 1px 1px 0 color.scale($color-x-dark, $alpha: -85%),
+  0 2px 2px -1px color.scale($color-x-dark, $alpha: -85%),
+  0 0 3px 0 color.scale($color-x-dark, $alpha: -80%) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

package/scss/_utilities_baseline-grid.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-u-baseline-grid {
@@ -9,7 +10,7 @@
     position: relative;
 
     &::after {
-      background: linear-gradient(to top, transparentize($baseline-color, 0.85), transparentize($baseline-color, 0.85) 1px, transparent 1px, transparent);
+      background: linear-gradient(to top, color.scale($baseline-color, $alpha: -85%), color.scale($baseline-color, $alpha: -85%) 1px, transparent 1px, transparent);
       background-size: 100% $baseline-size;
       bottom: 0;
       content: '';
@@ -26,7 +27,7 @@
   // baseline grid on document should be in the background
   // stylelint-disable selector-max-type -- needed for examples
   html.u-baseline-grid {
-    background-color: transparentize($baseline-color, 0.95);
+    background-color: color.scale($baseline-color, $alpha: -95%);
     position: static;
 
     &::after {