@transferwise/neptune-css 12.4.2 → 12.5.0

package/src/less/loaders.less

@@ -28,7 +28,7 @@
     width: 160px;
     height: 160px;
     position: absolute;
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0IC01NCAxNjAgMTYwIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTA4LjY2MiIgeTE9IjUyLjE3NSIgeDI9IjEwNy42NjIiIHkyPSI1Mi4xNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTYwIDAgMCAtODAgLTE3MTcyIDQxNjApIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDk3YzciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDk3YzciIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTIxNCAyNmMwLTQ0LjItMzUuOC04MC04MC04MFM1NC0xOC4yIDU0IDI2aDJjMC00My4xIDM0LjktNzggNzgtNzhzNzggMzQuOSA3OCA3OGgyeiIvPjwvc3ZnPg==);
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0IC01NCAxNjAgMTYwIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTA4LjY2MiIgeTE9IjUyLjE3NSIgeDI9IjEwNy42NjIiIHkyPSI1Mi4xNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTYwIDAgMCAtODAgLTE3MTcyIDQxNjApIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDk3YzciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDk3YzciIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTIxNCAyNmMwLTQ0LjItMzUuOC04MC04MC04MFM1NC0xOC4yIDU0IDI2aDJjMC00My4xIDM0LjktNzggNzgtNzhzNzggMzQuOSA3OCA3OGgyeiIvPjwvc3ZnPg==");
     animation: rotating 1.4s linear infinite;
   }
 

package/src/less/media.less

@@ -1,4 +1,4 @@
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "./mixins/_logical-properties.less";
 
 .media {
   display: flex;

package/src/less/mixins/_alerts.less

@@ -1,5 +1,5 @@
-@import (reference) '../mixins/_logical-properties.less';
-@import (reference) '../mixins/_arrows.less';
+@import (reference) "../mixins/_logical-properties.less";
+@import (reference) "../mixins/_arrows.less";
 
 .alert-variant(@background; @text-color; @text-hover) {
   background-color: @background;

package/src/less/mixins/_arrows.less

@@ -1,4 +1,4 @@
-@import (reference) '../mixins/_logical-properties.less';
+@import (reference) "../mixins/_logical-properties.less";
 
 .arrow(@size: 10px) {
   position: relative;
@@ -8,7 +8,7 @@
 
 .arrow-pointer(@size: 10px) {
   &::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     display: block;
     width: @size;

package/src/less/mixins/_clearfix.less

@@ -13,7 +13,7 @@
 .clearfix() {
   &::before,
   &::after {
-    content: ' '; // 1
+    content: " "; // 1
     display: table; // 2
   }
 

package/src/less/mixins/_grid-framework.less

@@ -1,4 +1,4 @@
-@import (reference) '_logical-properties.less';
+@import (reference) "_logical-properties.less";
 
 // Framework grid generation
 //
@@ -9,13 +9,13 @@
   // Common styles for all sizes of grid columns, widths 1-12
   .col(@index) {
     // initial
-    @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}';
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) {
     // general; "=<" isn't a typo
-    @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) {
     // terminal
@@ -34,13 +34,13 @@
 .float-grid-columns(@class) {
   .col(@index) {
     // initial
-    @item: ~'.col-@{class}-@{index}';
+    @item: ~".col-@{class}-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) {
     // general
-    @item: ~'.col-@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) {
     // terminal
@@ -56,7 +56,8 @@
     width: percentage((@index / @grid-columns));
 
     .row-equal-height & {
-      width: calc(percentage((@index / @grid-columns)) ~'- 0.5px');
+      /* stylelint-disable-next-line function-calc-no-unspaced-operator */
+      width: calc(percentage((@index / @grid-columns)) ~"- 0.5px");
     }
   }
 }

package/src/less/mixins/_list-group.less

@@ -1,4 +1,4 @@
-@import (reference) '_logical-properties.less';
+@import (reference) "_logical-properties.less";
 
 .list-group-item-variant(@state; @background; @color) {
   .list-group-item-@{state} {

package/src/less/mixins/_logical-properties-IE-friendly.less

@@ -1,6 +1,7 @@
 // Mixin to support Logical properties/values for IE
 
-// CSS property: float: Flow-relative values inline-start and inline-end: https://caniuse.com/mdn-css_properties_float_flow_relative_values
+// CSS property: float: Flow-relative values inline-start
+// and inline-end: https://caniuse.com/mdn-css_properties_float_flow_relative_values
 
 .float(@direction) {
   & when (@direction = left) {
@@ -20,7 +21,8 @@
   }
 }
 
-// CSS property: clear: Flow-relative values inline-start and inline-end: https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+// CSS property: clear: Flow-relative values inline-start
+// and inline-end: https://caniuse.com/mdn-css_properties_clear_flow_relative_values
 
 .clear(@direction) {
   & when (@direction = left) {
@@ -40,7 +42,8 @@
   }
 }
 
-// CSS property: text-align: Flow-relative values start and end: https://caniuse.com/mdn-css_properties_text-align_flow_relative_values_start_and_end
+// CSS property: text-align: Flow-relative values start
+// and end: https://caniuse.com/mdn-css_properties_text-align_flow_relative_values_start_and_end
 
 .text-align(@direction) {
   & when (@direction = left) {
@@ -105,8 +108,11 @@
 }
 
 // Use only if the right and left values are different or you have to step up specificity of the padding.
-// Use for single value shorthand 'padding: var(--foo);' -> '.padding-shorthand(var(--foo))'
-// Use for multiple value shorthand 'padding: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.padding-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
+// Use for single value shorthand
+//  'padding: var(--foo);' -> '.padding-shorthand(var(--foo))'
+// Use for multiple value shorthand
+//  'padding: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' ->
+//  '.padding-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
 
 .padding-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
   [dir="rtl"] & {
@@ -162,7 +168,9 @@
 
 // Use only if the right and left values are different or you have to step up specificity of the margin.
 // Use for single value shorthand 'margin: var(--foo);' -> '.margin-shorthand(var(--foo))'
-// Use for multiple value shorthand 'margin: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.margin-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
+// Use for multiple value shorthand
+//  'margin: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' ->
+//  '.margin-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
 
 .margin-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
   [dir="rtl"] & {

package/src/less/mixins/_logical-properties.less

@@ -1,5 +1,5 @@
 // Custom support for logical properties/values. Select one of the options:
 
 // @import '../mixins/_physical-properties.less';
-@import '../mixins/_logical-properties-IE-friendly.less';
+@import "../mixins/_logical-properties-IE-friendly.less";
 // @import '../mixins/_logical-properties-modern-browsers.less';

package/src/less/mixins/_nav-vertical-align.less

@@ -1,7 +1,8 @@
 // Navbar vertical align
 //
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
+// to calculate the appropriate top margin.
 
 .navbar-vertical-align(@element-height) {
   margin-top: (((@navbar-height - @element-height) / 2) + 1px);

package/src/less/mixins/_physical-properties.less

@@ -1,4 +1,3 @@
-
 // Mixin to add physical properties/values without RTL support for a lighter bundle.
 
 // Float left/right

package/src/less/mixins/_reset-text.less

@@ -1,4 +1,4 @@
-@import (reference) '_logical-properties.less';
+@import (reference) "_logical-properties.less";
 
 .reset-text() {
   font-family: var(--font-family-regular);

package/src/less/mixins/_sequence.less

@@ -1,4 +1,4 @@
-@import (reference) '_logical-properties.less';
+@import (reference) "_logical-properties.less";
 
 .sequence-vertical-spacing(
 @sequence-margin,
@@ -119,7 +119,7 @@
 }
 
 .sequence-variant(@type, @color) {
-  @variant: ~'.sequence-@{type}';
+  @variant: ~".sequence-@{type}";
 
   @{variant} {
     .sequence-variant-detail(
@@ -129,7 +129,7 @@
     );
   }
 
-  @keyframes ~'sequence-pip-@{type}' {
+  @keyframes ~"sequence-pip-@{type}" {
     from { border-color: @color-navy-border-neutral; }
     to { border-color: @color; }
   }
@@ -161,7 +161,13 @@
 
   &.sequence-inverse > li {
     &::after {
-      background-image: linear-gradient(@color 0, @color 50%, @sequence-inverse-border 50%, @sequence-inverse-border 100%);
+      background-image:
+        linear-gradient(
+          @color 0,
+          @color 50%,
+          @sequence-inverse-border 50%,
+          @sequence-inverse-border 100%
+        );
     }
   }
 

package/src/less/modals.less

@@ -1,6 +1,6 @@
-@import (reference) '../variables/neptune-tokens.less';
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 //
 // Modals

package/src/less/navbar.less

@@ -1,21 +1,21 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) 'bootstrap/less/mixins/nav-vertical-align.less';
-@import (reference) 'bootstrap/less/mixins/nav-divider.less';
-@import (reference) './mixins/_arrows.less';
-@import (reference) './mixins/_border-radius.less';
-@import (reference) './mixins/_clearfix.less';
-@import (reference) './mixins/_center-block.less';
-@import (reference) './mixins/_hide-text.less';
-@import (reference) './mixins/_grid.less';
-@import (reference) './mixins/_tab-focus.less';
-@import (reference) './mixins/_logical-properties.less';
-@import './addons/_utilities.less';
-@import 'dropdowns.less';
-@import 'navs.less';
-@import 'navbar-base.less';
-@import 'close.less';
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "bootstrap/less/mixins/nav-vertical-align.less";
+@import (reference) "bootstrap/less/mixins/nav-divider.less";
+@import (reference) "./mixins/_arrows.less";
+@import (reference) "./mixins/_border-radius.less";
+@import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_center-block.less";
+@import (reference) "./mixins/_hide-text.less";
+@import (reference) "./mixins/_grid.less";
+@import (reference) "./mixins/_tab-focus.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import "./addons/_utilities.less";
+@import "dropdowns.less";
+@import "navs.less";
+@import "navbar-base.less";
+@import "close.less";
 
 // Extracted form 'forms.less'
 
@@ -76,8 +76,8 @@
       }
     }
 
-    .radio input[type='radio'],
-    .checkbox input[type='checkbox'] {
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
       position: relative;
       .margin(left, 0);
     }

package/src/less/navs.less

@@ -1,12 +1,12 @@
-@import (reference)  '../variables/neptune-tokens.less';
+@import (reference)  "../variables/neptune-tokens.less";
 
 // TODO: remove bootstrap dependencies
-@import (reference) '../variables/legacy-variables.less';
+@import (reference) "../variables/legacy-variables.less";
 
 // mixins
-@import (reference) 'bootstrap/less/mixins/nav-divider.less';
-@import (reference) './mixins/_border-radius.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "bootstrap/less/mixins/nav-divider.less";
+@import (reference) "./mixins/_border-radius.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 //
 // Navs

package/src/less/neptune-addons.less

@@ -1,3 +1,3 @@
-@import './addons/_background-utilities.less';
-@import './addons/_display-utilities.less';
-@import './addons/_spacing-utilities.less';
+@import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
+@import "./addons/_spacing-utilities.less";

package/src/less/neptune-core.less

@@ -1,4 +1,4 @@
-@import './core/_fonts.less';
-@import './core/_scaffolding.less';
-@import './core/_typography.less';
-@import './core/_typography-utilities.less';
+@import "./core/_fonts.less";
+@import "./core/_scaffolding.less";
+@import "./core/_typography.less";
+@import "./core/_typography-utilities.less";

package/src/less/neptune-social-media.less

@@ -1,6 +1,6 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_buttons.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_buttons.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 // stylelint-disable
 

package/src/less/neptune.bundle.less

@@ -1,43 +1,43 @@
-@import '@transferwise/neptune-tokens/tokens.css';
-@import './neptune-core.less';
-@import './neptune-addons.less';
+@import "@transferwise/neptune-tokens/tokens.css";
+@import "./neptune-core.less";
+@import "./neptune-addons.less";
 
 // Components
-@import './components/_component-animations.less';
-@import './accordion.less';
-@import './alerts.less';
-@import './background.less';
-@import './badge.less';
-@import './breadcrumbs.less';
-@import './buttons.less';
-@import './button-groups.less';
-@import './input-groups.less';
-@import './circles.less';
-@import './column-layout.less';
-@import './currency-flags.less';
-@import './decision.less';
-@import './dropdowns.less';
-@import './droppable.less';
-@import './flex.less';
-@import './footer.less';
-@import './forms.less';
-@import './grid.less';
-@import './link-callout.less';
-@import './list-group.less';
-@import './navs.less';
-@import './navbar.less';
-@import './select.less';
-@import './close.less';
-@import './loaders.less';
-@import './media.less';
-@import './modals.less';
-@import './panels.less';
-@import './popovers.less';
-@import './process.less';
-@import './progress-bars.less';
-@import './sequences.less';
-@import './table.less';
-@import './tooltip.less';
-@import './tick.less';
-@import './utilities.less';
-@import './wells.less';
+@import "./components/_component-animations.less";
+@import "./accordion.less";
+@import "./alerts.less";
+@import "./background.less";
+@import "./badge.less";
+@import "./breadcrumbs.less";
+@import "./buttons.less";
+@import "./button-groups.less";
+@import "./input-groups.less";
+@import "./circles.less";
+@import "./column-layout.less";
+@import "./currency-flags.less";
+@import "./decision.less";
+@import "./dropdowns.less";
+@import "./droppable.less";
+@import "./flex.less";
+@import "./footer.less";
+@import "./forms.less";
+@import "./grid.less";
+@import "./link-callout.less";
+@import "./list-group.less";
+@import "./navs.less";
+@import "./navbar.less";
+@import "./select.less";
+@import "./close.less";
+@import "./loaders.less";
+@import "./media.less";
+@import "./modals.less";
+@import "./panels.less";
+@import "./popovers.less";
+@import "./process.less";
+@import "./progress-bars.less";
+@import "./sequences.less";
+@import "./table.less";
+@import "./tooltip.less";
+@import "./tick.less";
+@import "./utilities.less";
+@import "./wells.less";

package/src/less/panels.less

@@ -1,8 +1,7 @@
-
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_border-radius.less';
-@import (reference) './mixins/_logical-properties.less';
-@import (reference) './mixins/_panels.less';
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_border-radius.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "./mixins/_panels.less";
 
 //
 // Panels

package/src/less/popovers.less

@@ -1,11 +1,11 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_buttons.less';
-@import (reference) './mixins/_arrows.less';
-@import (reference) './mixins/_reset-text.less';
-@import (reference) './mixins/_logical-properties.less';
-@import 'close.less';
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_buttons.less";
+@import (reference) "./mixins/_arrows.less";
+@import (reference) "./mixins/_reset-text.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import "close.less";
 
 //
 // Popovers
@@ -240,7 +240,7 @@
   .close();
 }
 
-[data-toggle='popover'] {
+[data-toggle="popover"] {
   &:not(.btn) {
     color: inherit !important;
     font-weight: inherit !important;

package/src/less/process.less

@@ -1,5 +1,5 @@
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 @process-xl-radius: 64px;
 @process-xl-stroke: 3px;
@@ -189,9 +189,15 @@
     }
   }
 }
-.process-size(xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke);
-.process-size(sm, @process-sm-radius, @process-sm-circumference, @process-sm-stroke, @process-sm-icon-size, @process-sm-icon-stroke);
-.process-size(xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke);
+.process-size(
+  xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
+);
+.process-size(
+  sm, @process-sm-radius, @process-sm-circumference, @process-sm-stroke, @process-sm-icon-size, @process-sm-icon-stroke
+);
+.process-size(
+  xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke
+);
 
 .process-xs {
   .process-circle {

package/src/less/progress-bars.less

@@ -1,5 +1,5 @@
-@import (reference) '../variables/neptune-tokens.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 @progress-height: 2px;
 @progress-pip-size: 8px;
@@ -26,7 +26,7 @@
   transition: width 0.6s ease;
 
   &::after {
-    content: '';
+    content: "";
     .float(right);
 
     margin-top: @progress-pip-size / 2 + 1;

package/src/less/select.less

@@ -1,5 +1,5 @@
-@import (reference) '@transferwise/neptune-css/src/variables/neptune-tokens.less';
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) "@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "./mixins/_logical-properties.less";
 
 .tw-select {
   .tw-icon {
@@ -18,6 +18,7 @@
     &--divider {
       border-bottom-style: solid;
       border-bottom-width: 1px;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
       border-bottom-color: var(--color-border-neutral);
     }
 

package/src/less/sequences.less

@@ -1,14 +1,14 @@
 // TODO: remove bootstrap dependencies
 
-@import (reference) '../variables/neptune-tokens.less';
-@import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
-@import (reference) 'bootstrap/less/mixins/background-variant';
-@import (reference) 'bootstrap/less/mixins/gradients';
-@import (reference) './mixins/_sequence.less';
-@import (reference) './mixins/_text-emphasis';
-@import (reference) 'bootstrap/less/mixins/text-overflow';
-@import (reference) './core/_typography-utilities.less';
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "bootstrap/less/mixins/background-variant";
+@import (reference) "bootstrap/less/mixins/gradients";
+@import (reference) "./mixins/_sequence.less";
+@import (reference) "./mixins/_text-emphasis";
+@import (reference) "bootstrap/less/mixins/text-overflow";
+@import (reference) "./core/_typography-utilities.less";
 
 @pip-offset-sm: ((@sequence-step-height / 2) + @sequence-item-spacing-sm);
 @pip-offset-md: ((@sequence-step-height / 2) + @sequence-item-spacing-md);
@@ -205,11 +205,11 @@
   }
 }
 
-.sequence-variant('info', var(--color-interactive-accent));
-.sequence-variant('primary', @color-navy-background-elevated);
-.sequence-variant('success', var(--color-interactive-positive));
-.sequence-variant('warning', var(--color-interactive-warning));
-.sequence-variant('danger', var(--color-interactive-negative));
+.sequence-variant("info", var(--color-interactive-accent));
+.sequence-variant("primary", @color-navy-background-elevated);
+.sequence-variant("success", var(--color-interactive-positive));
+.sequence-variant("warning", var(--color-interactive-warning));
+.sequence-variant("danger", var(--color-interactive-negative));
 
 .sequence-hollow {
   > li::before {
@@ -425,19 +425,19 @@
   }
 
   &.sequence-info {
-    .sequence-animation-variant('info');
+    .sequence-animation-variant("info");
   }
 
   &.sequence-warning {
-    .sequence-animation-variant('warning');
+    .sequence-animation-variant("warning");
   }
 
   &.sequence-success {
-    .sequence-animation-variant('success');
+    .sequence-animation-variant("success");
   }
 
   &.sequence-danger {
-    .sequence-animation-variant('danger');
+    .sequence-animation-variant("danger");
   }
 
   .sequence-animation-delays(10);