@lightspeed/design-system-css 27.2.1 → 29.0.0

package/src/vend.ui/styles/global/colour/_colour-functions.scss

@@ -24,7 +24,8 @@
 /// @return {String} - Color as a css variable
 @function hs-color($_hs-color) {
   // @TODO update map to use final unified theme once migration replacements have been made
-  @if (map-has-key($hs-unified-migration-theme-light, $_hs-color)) {
+  $_hs-theme: map-get($hs-unified-migration-themes, light);
+  @if (map-has-key($_hs-theme, $_hs-color)) {
     @return var(#{$hs-css-variables-prefix}#{$_hs-color});
   } @else {
     @error "[colour-functions] The specified element (#{$_hs-color}) does not exist in the helios unified theme.";
@@ -32,21 +33,6 @@
   }
 }
 
-/// Generating a solid border for permitted border types (currently either keyline or framing)
-///
-/// @ DEPRECATED
-/// @function vd-border
-/// @param {String} $_vd-border-type - The border type, either keyline or framing
-/// @param {Unit} [$_vd-border-width=1px] - The width of the border
-/// @param {String} [$_vd-border-style=solid] - The style of the border
-@function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
-  @if (null != index($vd-border-types, $_vd-border-type)) {
-    @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
-  } @else {
-    @warn "[colour-functions] The specified border type (#{$_vd-border-type}) is not a valid.";
-  }
-}
-
 /// Converts HEX to RGB Values
 ///
 /// @function vd-hex-to-rgb
@@ -76,3 +62,73 @@
   $string: '%23' + $string;
   @return $string;
 }
+
+// Helper function for getting an action colour during the migration to the
+// unified theme. This is mostly used by buttons.
+@function hs-get-action-color($_supplied-color, $_fgOrBg: '') {
+  $_vd-action-colors: (
+    do,
+    do-rgb,
+    do-lighter,
+    do-darker,
+    go,
+    go-rgb,
+    go-lighter,
+    go-darker,
+    no,
+    no-rgb,
+    no-lighter,
+    no-darker,
+    supplementary,
+    supplementary-rgb,
+    supplementary-lighter,
+    supplementary-darker
+  );
+  $_hs-color-types: (fg, bg);
+  // @TODO Remove once all instances of `do` have been replaced with `go` (they are the same value).
+  $_hs-color: vd-remove-suffix(vd-str-replace($_supplied-color, do, go));
+
+  @if (index($_vd-action-colors, $_supplied-color) == null) {
+    @error 'Must supply either do, go, no or supplementary: ' + $_supplied-color;
+  }
+
+  @if (index($_hs-color-types, $_fgOrBg) == null) {
+    @error 'Must supply either fg or bg';
+  }
+
+  @if (str-index($_supplied-color, lighter) != null) {
+    @return hs-color('#{$_fgOrBg}-#{$_hs-color}-soft');
+  } @else if (str-index($_supplied-color, darker) != null) {
+    @return hs-color('#{$_fgOrBg}-#{$_hs-color}-strong');
+  } @else if (str-index($_supplied-color, rbg) != null) {
+    @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default-rgb');
+  } @else {
+    @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default');
+  }
+}
+
+@function vd-str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      vd-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function vd-remove-suffix($string) {
+  $suffixes: (-rgb, -lighter, -darker);
+  $result: $string;
+
+  @each $suffix in $suffixes {
+    $suffix-position: str-index($result, $suffix);
+
+    @if $suffix-position {
+      $result: str-slice($result, 1, $suffix-position - 1);
+    }
+  }
+
+  @return $result;
+}

package/src/vend.ui/styles/global/colour/_colour-helpers.scss

@@ -1,7 +1,9 @@
+// @TODO remove `do` color option. While React components no longer support `do`, we still need to keen the `vd-colour-do` classes that are generated. Consuming apps still reference
+// and use these.
 $_vd-colour-helpers: (do, go, no, supplementary);
-
 @each $key in ($_vd-colour-helpers) {
   .vd-colour-#{$key} {
-    color: vd-colour($key);
+    color: hs-get-action-color($key, fg);
   }
 }
+

package/src/vend.ui/styles/global/effects/_effects.scss

@@ -35,7 +35,7 @@
 @keyframes vd-blink-highlight {
   20%,
   70% {
-    background-color: vd-colour(go-highlight);
+    background-color: hs-color(bg-go-highlight-default);
   }
 }
 

package/src/vend.ui/styles/global/text/_text-mixins.scss

@@ -10,7 +10,7 @@
 }
 
 // Heading Reset - Ensure correct styling continue for H<1..6>'s
-@mixin vd-heading-reset($color: vd-colour(text)) {
+@mixin vd-heading-reset($color: hs-color(fg-neutral-default)) {
   word-break: break-word;
   font-weight: $vd-font-weight--bold;
   margin: 0;