@lightspeed/design-system-css 0.1.0

package/src/vend.ui/styles/global/colour/_base.scss

@@ -0,0 +1,105 @@
+// stylelint-disable vend/use-colour-function
+
+// Green
+$vd-colour-green-0: #eefff0;
+$vd-colour-green-5: #defce0;
+$vd-colour-green-10: #cdf8d1;
+$vd-colour-green-20: #a6f1ad;
+$vd-colour-green-30: #84e78d;
+$vd-colour-green-40: #68d972;
+$vd-colour-green-50: #52c65d;
+$vd-colour-green-60: #41af4b;
+$vd-colour-green-70: #279731;
+$vd-colour-green-80: #14781d;
+$vd-colour-green-90: #07560e;
+$vd-colour-green-100: #013305;
+
+// Red
+$vd-colour-red-0: #fff3f0;
+$vd-colour-red-5: #ffe5dc;
+$vd-colour-red-10: #ffd6c8;
+$vd-colour-red-20: #ffb59e;
+$vd-colour-red-30: #fc9677;
+$vd-colour-red-40: #f37b56;
+$vd-colour-red-50: #e6643c;
+$vd-colour-red-60: #cc4f29;
+$vd-colour-red-70: #ac3d1b;
+$vd-colour-red-80: #872d11;
+$vd-colour-red-90: #5e1e0a;
+$vd-colour-red-100: #331005;
+
+// Blue
+$vd-colour-blue-0: #ecf7ff;
+$vd-colour-blue-5: #d1eeff;
+$vd-colour-blue-10: #b5e4ff;
+$vd-colour-blue-20: #7fcdff;
+$vd-colour-blue-30: #4db7fe;
+$vd-colour-blue-40: #4db7fe;
+$vd-colour-blue-50: #24a1f5;
+$vd-colour-blue-60: #058de9;
+$vd-colour-blue-70: #007bce;
+$vd-colour-blue-80: #0068ae;
+$vd-colour-blue-90: #00385e;
+$vd-colour-blue-100: #001f33;
+
+// Supplementary Blue
+$vd-colour-sup-blue-0: #f2faff;
+$vd-colour-sup-blue-5: #e2eff8;
+$vd-colour-sup-blue-10: #d3e5f1;
+$vd-colour-sup-blue-20: #b2d1e6;
+$vd-colour-sup-blue-30: #9fbdd8;
+$vd-colour-sup-blue-40: #7ca8c6;
+$vd-colour-sup-blue-50: #6692b0;
+$vd-colour-sup-blue-60: #4e7fa1;
+$vd-colour-sup-blue-70: #396b8c;
+$vd-colour-sup-blue-80: #275371;
+$vd-colour-sup-blue-90: #183b53;
+$vd-colour-sup-blue-100: #0c2333;
+
+// Charcoal
+$vd-colour-charcoal-0: #fafbfb;
+$vd-colour-charcoal-5: #f0f4f4;
+$vd-colour-charcoal-10: #e5eaed;
+$vd-colour-charcoal-20: #d0d7da;
+$vd-colour-charcoal-30: #bcc3c8;
+$vd-colour-charcoal-40: #a4adb3;
+$vd-colour-charcoal-50: #8f99a0;
+$vd-colour-charcoal-60: #7a858d;
+$vd-colour-charcoal-70: #637078;
+$vd-colour-charcoal-80: #4f5d66;
+$vd-colour-charcoal-90: #3a4953;
+$vd-colour-charcoal-100: #2b363d;
+$vd-colour-charcoal-110: #242e34;
+
+// Yin and Yang
+$vd-colour-black: #000;
+$vd-colour-white: #fff;
+
+// @Depreacted use the theme based swatches instead
+$vd-colour-golden-sand: #f2c17b;
+$vd-colour-gothic: #678e98;
+$vd-colour-lavender-purple: #aa88b5;
+$vd-colour-new-york-pink: #d77173;
+$vd-colour-shuttle-gray: #62676f;
+$vd-colour-sinbad: #99c8d4;
+$vd-colour-tacao: #f49b8c;
+
+// Navigation
+$vd-nav-item-colours: (
+  // Old nav colours; @todo once all apps are on a version of vend.ui which include the new nav colours, navago should
+  // be updated to use the new nav colours and these should be removed.
+  carnation: #f5765f,
+  ocean-green: #44b773,
+  rajah: #f3c276,
+  shakespeare: #56bad6,
+
+  // New nav colours (these actually match those used by Design)
+  downy: #70b8d3,       // Should replace `shakespeare`
+  fern: #65b479,        // Should replace `ocean-green`
+  fiord: #4b576e,
+  rob-roy: #ebc381,     // Should replace `rajah`
+  terracotta: #e57d66,  // Should replace `carnation`
+  wistera: #965fb0
+);
+
+// stylelint-enable vend/use-colour-function

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

@@ -0,0 +1,76 @@
+/// Get a theme based colour for a specific colour element.
+///
+/// @function vd-colour
+/// @param {String} $_vd-colour-element - The required element; e.g. text, background
+/// @param {String} [$_vd-colour-theme=$vd-colour-theme] @deprecated
+/// @return {Colour<String>} - The retrieved colour for the element
+@function vd-colour($_vd-colour-element, $_vd-colour-theme: _no_arg_provided_) {
+  @if ($_vd-colour-theme != _no_arg_provided_) {
+    @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
+  }
+  @if (index($vd-theme-available-keys, $_vd-colour-element) != null) {
+    @return var(--vd-colour--#{$_vd-colour-element});
+  } @else {
+    @error "[colour-functions] The specified element (#{$_vd-colour-element}) does not exist.";
+    @return null;
+  }
+}
+
+/// Generates a highlighted colour based on the provided colour elements. This would
+/// normally take the form of an action colour element (`do`, `go`, `no`) as the primary element, and either `box` or
+/// `background` as the secondary element.
+///
+/// @example vd-colour-highlight(do, box);
+///
+/// @function vd-colour-highlight
+/// @param {String} $_vd-primary-element - The vd colour element; e.g. `do`. The weight specifies the amount of this
+///                 colour which should be included in the returned colour.
+/// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
+/// @return {Colour<String>} - The highlighted colour
+@function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
+  @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
+}
+
+/// Generating a solid border for permitted border types (currently either keyline or framing)
+///
+/// @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
+/// @return {String} The RGB values
+@function vd-hex-to-rgb($hexColour) {
+  @return red($hexColour),green($hexColour),blue($hexColour);
+}
+
+/// Ensures that the browsers RGBA colour function is used. This means we can use string values (which is not allowed
+/// by SASS's RGBA function).
+///
+/// @function vd-rgba
+/// @return {String} RGBA value
+@function vd-rgba($string, $opacity) {
+  @return #{"rgba(#{$string}, #{$opacity})"};
+}
+
+/// Encodes a hex value.
+///
+/// @function vd-encode-colour
+/// @return {String} The encoded hex value.
+@function vd-encode-colour($string) {
+	@if type-of($string) == 'color' {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string:unquote("#{$hex}");
+  }
+  $string: '%23' + $string;
+	@return $string;
+}

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

@@ -0,0 +1,7 @@
+$_vd-colour-helpers: (do, go, no, supplementary);
+
+@each $key in ($_vd-colour-helpers) {
+  .vd-colour-#{$key} {
+    color: vd-colour($key);
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "colour-functions";
+
+// @todo Remove these imports once theme functions and mixins have been introduced
+@import "base";
+@import "./themes/colour-themes";

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

@@ -0,0 +1,12 @@
+@import './theme-keys';
+@import './xseries/theme-dark';
+@import './xseries/theme-light';
+@import './theme-functions';
+
+$vd-colour-themes: (
+  xseries-dark: vd-add-theme($vd-xseries-theme-dark),
+  xseries-light: vd-add-theme($vd-xseries-theme-light)
+);
+
+// Only generate dark mode css variables for apps that request it
+$vd-theme-use-dark-mode: false !default;

package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss

@@ -0,0 +1 @@
+@include vd-generate-themes();

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

@@ -0,0 +1,81 @@
+/// Validates all required theme properties are present in the provided theme map.
+///
+/// @function addTheme
+/// @param {Map} $theme - The theme to add.
+/// @return {Map} The verified and updated theme.
+@function vd-add-theme($theme) {
+  $_vend-theme: ();
+
+  @each $key in ($vd-theme-required-base-keys) {
+    @if (map-has-key($theme, $key) == false) {
+      @error '[colour-themes] Missing required theme property "#{$key}"';
+    }
+
+    $value: map-get($theme, $key);
+
+    // Set the theme based background image for selects;
+    @if ($key == select-arrows-bg) {
+      $value: vd-select-arrows-bg(map-get($theme, $key));
+    }
+
+    // Some swatches require rgb values
+    @if (index($vd-theme-available-rgb-keys, $key) != null) {
+      // Add original HEX values and generated RGB value to theme
+      $combined: (
+        $key: $value,
+        #{$key}-rgb: vd-hex-to-rgb($value)
+      );
+      $_vend-theme: map-merge($_vend-theme, $combined);
+    } @else {
+      // RGB value not required, just append the original value
+      $_vend-theme: map-merge($_vend-theme, ($key: $value));
+    }
+  }
+
+  @return $_vend-theme;
+}
+
+
+@mixin vd-generate-themes() {
+  :root {
+    color-scheme: light;
+    @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-light));
+  }
+
+  // Dark themes
+  @if ($vd-theme-use-dark-mode) {
+    @media (prefers-color-scheme: dark) {
+      :root {
+        color-scheme: dark;
+        @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
+      }
+    }
+  } @else {
+    // Making dark mode toggleable via selectors
+    @media (prefers-color-scheme: dark) {
+      .vd-theme--dark {
+        color-scheme: dark;
+        @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
+      }
+    }
+  }
+}
+
+/// Generates css variables from the provided theme map.
+///
+/// @function vd-generate-theme-values
+/// @param {Map} $theme - The theme to add.
+@mixin vd-generate-theme-values($_vd-theme-values) {
+  @each $vd-theme-prop, $vd-theme-value in $_vd-theme-values {
+    --vd-colour--#{$vd-theme-prop}: #{$vd-theme-value};
+  }
+}
+
+/// Generates theme based background image for a select.
+///
+/// @function vd-select-arrows-bg
+/// @param {Colour} $_vd-colour - The colour to use
+/// @return {String} The background url for selects.
+@function vd-select-arrows-bg($_vd-colour) {
+  @return url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="#{vd-encode-colour($_vd-colour)}" points="10,0 0,10 20,10"/><polygon fill="#{vd-encode-colour($_vd-colour)}" points="0,36 20,36 10,46 "/></svg>');
+}

package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss

@@ -0,0 +1,5 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT.
+
+$vd-theme-required-base-keys: background,box,background-inverse,box-inverse,success,go-lighter,go,go-darker,go-highlight,no-lighter,no,no-darker,supplementary-lighter,supplementary,supplementary-darker,text,text-inverse,text-action,select-arrows-bg,shadow,overlay,framing,keyline,framing-inverse,keyline-inverse,golden-sand,tacao,new-york-pink,gothic,lavender-purple,sinbad,shuttle-gray,nav-top,nav-side-tabs,nav-side-drawer,nav-icon-unselected,nav-icon-selected,box-supplementary,text-nav,supplementary--text,supplementary-highlight,do-highlight,no-highlight,do-lighter,do,do-darker;
+$vd-theme-available-rgb-keys: background,box,box-inverse,do,go,nav-side-drawer,nav-side-tabs,nav-top,no,supplementary;
+$vd-theme-available-keys: background,box,background-inverse,box-inverse,success,go-lighter,go,go-darker,go-highlight,no-lighter,no,no-darker,supplementary-lighter,supplementary,supplementary-darker,text,text-inverse,text-action,select-arrows-bg,shadow,overlay,framing,keyline,framing-inverse,keyline-inverse,golden-sand,tacao,new-york-pink,gothic,lavender-purple,sinbad,shuttle-gray,nav-top,nav-side-tabs,nav-side-drawer,nav-icon-unselected,nav-icon-selected,box-supplementary,text-nav,supplementary--text,supplementary-highlight,do-highlight,no-highlight,do-lighter,do,do-darker,background-rgb,box-rgb,box-inverse-rgb,do-rgb,go-rgb,nav-side-drawer-rgb,nav-side-tabs-rgb,nav-top-rgb,no-rgb,supplementary-rgb;

package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss

@@ -0,0 +1,53 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT.
+
+// stylelint-disable vend/use-colour-function
+
+$vd-xseries-theme-dark: (
+  background:#141217,
+  box:#1E1C21,
+  background-inverse:#F4F2F5,
+  box-inverse:#FFFFFF,
+  success:#15BF20,
+  go-lighter:#6054FF,
+  go:#477BFF,
+  go-darker:#352ACF,
+  go-highlight:rgba(0, 23, 229, .1),
+  no-lighter:#D4301D,
+  no:#EB4F29,
+  no-darker:#A12416,
+  supplementary-lighter:#3C6996,
+  supplementary:#5B83AC,
+  supplementary-darker:#284563,
+  text:#E7E5E8,
+  text-inverse:#0B0B0B,
+  text-action:#FFFFFF,
+  select-arrows-bg:#E7E5E8,
+  shadow:rgba(0, 0, 0, 0.35),
+  overlay:rgba(43, 54, 61, 0.65),
+  framing:#27252A,
+  keyline:#37353A,
+  framing-inverse:#E7E5E8,
+  keyline-inverse:#C9C7CA,
+  golden-sand:#E6B03D,
+  tacao:#ED6B44,
+  new-york-pink:#DE3CEC,
+  gothic:#A02FB6,
+  lavender-purple:#501897,
+  sinbad:#6952F6,
+  shuttle-gray:#5D5D5D,
+  nav-top:#0B0B0B,
+  nav-side-tabs:#27252A,
+  nav-side-drawer:#1E1C21,
+  nav-icon-unselected:#FFFFFF,
+  nav-icon-selected:#E7E5E8,
+  box-supplementary:#27252A,
+  text-nav:#FFFFFF,
+  supplementary--text:#5B83AC,
+  supplementary-highlight:rgba(0, 61, 229, .1),
+  do-highlight:rgba(0, 23, 229, .1),
+  no-highlight:rgba(229, 0, 0,.1),
+  do-lighter:#618EFF,
+  do:#477BFF,
+  do-darker:#406FE5);
+
+// stylelint-enable vend/use-colour-function

package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss

@@ -0,0 +1,53 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT.
+
+// stylelint-disable vend/use-colour-function
+
+$vd-xseries-theme-light: (
+  background:#F4F2F5,
+  box:#FFFFFF,
+  background-inverse:#141217,
+  box-inverse:#1E1C21,
+  success:#0E7B1D,
+  go-lighter:#6054FF,
+  go:#3F32F5,
+  go-darker:#352ACF,
+  go-highlight:rgba(128, 140, 255, .1),
+  no-lighter:#D4301D,
+  no:#BB2A1A,
+  no-darker:#A12416,
+  supplementary-lighter:#3C6996,
+  supplementary:#32577D,
+  supplementary-darker:#284563,
+  text:#27252A,
+  text-inverse:#FFFFFF,
+  text-action:#FFFFFF,
+  select-arrows-bg:#27252A,
+  shadow:rgba(0, 0, 0, 0.35),
+  overlay:rgba(0, 0, 0, 0.35),
+  framing:#E7E5E8,
+  keyline:#C9C7CA,
+  framing-inverse:#27252A,
+  keyline-inverse:#37353A,
+  golden-sand:#E6B03D,
+  tacao:#ED6B44,
+  new-york-pink:#DE3CEC,
+  gothic:#A02FB6,
+  lavender-purple:#501897,
+  sinbad:#6952F6,
+  shuttle-gray:#5D5D5D,
+  nav-top:#0B0B0B,
+  nav-side-tabs:#E7E5E8,
+  nav-side-drawer:#FFFFFF,
+  nav-icon-unselected:#27252A,
+  nav-icon-selected:#3F32F5,
+  box-supplementary:#E7E5E8,
+  text-nav:#FFFFFF,
+  supplementary--text:#32577D,
+  supplementary-highlight:rgba(76, 124, 255, 0.1),
+  do-highlight:rgba(128, 140, 255, .1),
+  no-highlight:rgba(255, 128, 128, .1),
+  do-lighter:#6054FF,
+  do:#3F32F5,
+  do-darker:#352ACF);
+
+// stylelint-enable vend/use-colour-function

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

@@ -0,0 +1,13 @@
+$vd-time-s: .2s !default;
+$vd-time-m: .5s !default;
+$vd-time-l: .8s !default;
+$vd-time-xl: 1s !default;
+
+@mixin vd-slow-rotate {
+  animation: vd-rotate $vd-time-xl ease-in-out infinite;
+}
+
+@mixin vd-fade-in ($time: $vd-time-m) {
+  animation: vd-fade-in $time ease-in-out;
+  animation-fill-mode: forwards;
+}

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

@@ -0,0 +1,22 @@
+@keyframes vd-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vd-fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes vd-flash {
+  0% {opacity: 0;}
+  30%, 70% {opacity: 1;}
+  100% {opacity: 0;}
+}
+
+.vd-fade-out {
+  animation-duration: 1.5s;
+  animation-name: vd-flash;
+  animation-fill-mode:forwards;
+}

package/src/vend.ui/styles/global/spacing/_spacing-functions.scss

@@ -0,0 +1,12 @@
+/// Returns a calculated spacing value based on the supplied multiplier.
+///
+/// @function vd-spacer
+/// @param {Number} $_vd-multiplier - The number of times to multiply the spacing unit.
+/// @return {Unit<px>} - The calculated spacing value.
+@function vd-spacer ($_vd-multiplier:1) {
+  @if ($_vd-multiplier > $vd-spacing-max-multiplier) {
+    @error('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
+  } @else {
+    @return $vd-spacing-unit * $_vd-multiplier;
+  }
+}

package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss

@@ -0,0 +1,24 @@
+// Generates spacing helpers for padding and margins.
+@each $_vd-spacing_type in $vd-spacing-types {
+  @each $_vd-position_value in $vd-spacing-positions {
+    // stylelint-disable selector-type-no-unknown
+    @for $i from 0 through $vd-spacing-max-multiplier {
+      $_vd-spacing_value: $i * $vd-spacing-unit;
+
+      @if $_vd-position_value == a {
+        .vd-#{nth($_vd-spacing_type, 1)
+          + nth($_vd-position_value, 1)
+          + $i} {
+          #{nth($_vd-spacing_type, 2)}: $_vd-spacing_value !important;
+        }
+      } @else {
+        .vd-#{nth($_vd-spacing_type, 1)
+          + nth($_vd-position_value, 1)
+          + $i} {
+          #{nth($_vd-spacing_type, 2)}-#{nth($_vd-position_value, 2)}: $_vd-spacing_value !important;
+        }
+      }
+    }
+    // stylelint-enable selector-type-no-unknown
+  }
+}

package/src/vend.ui/styles/global/spacing/_spacing.scss

@@ -0,0 +1,4 @@
+$vd-spacing-unit: 4px;
+$vd-spacing-max-multiplier: 10;
+$vd-spacing-types: (m margin) (p padding);
+$vd-spacing-positions: (t top) (b bottom) (l left) (r right) a;

package/src/vend.ui/styles/global/text/_base.scss

@@ -0,0 +1,6 @@
+$vd-font-weight--regular: 400;
+$vd-font-weight--bold: 700;
+$vd-font-weight--ultra-bold: 900;
+
+$vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;  // stylelint-disable-line value-keyword-case
+$vd-font-primary: $vd-font-lato !default;

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

@@ -0,0 +1,65 @@
+$_vd-text-definitions: (
+  grand: (
+    size: 48,
+    leading: 56,
+    font-weight: 700
+  ),
+  hero: (
+    size: 32,
+    leading: 48,
+    font-weight: 700
+  ),
+  heading: (
+    size: 24,
+    leading: 32,
+    font-weight: 700
+  ),
+  sub-heading: (
+    size: 18,
+    leading: 24,
+    font-weight: 700
+  ),
+  intro: (
+    size: 18,
+    leading: 24,
+    font-weight: 400
+  ),
+  signpost: (
+    size: 15,
+    leading: 20,
+    font-weight: 900,
+    tracking: 1.5,
+    casing: uppercase
+  ),
+  label: (
+    size: 15,
+    leading: 20,
+    font-weight: 700
+  ),
+  body: (
+    size: 15,
+    leading: 20,
+    font-weight: 400
+  ),
+  supplementary: (
+    size: 12,
+    leading: 15,
+    font-weight: 400
+  ),
+  mini-signpost: (
+    size: 10,
+    leading: 12,
+    font-weight: 900,
+    casing: uppercase
+  ),
+  mini-copy: (
+    size: 10,
+    leading: 12,
+    font-weight: 400
+  ),
+  button: (
+    size: 15,
+    leading: 18,
+    font-weight: 700
+  )
+);

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

@@ -0,0 +1,17 @@
+// Generates a helper class for each text defintion
+// e.g. .vd-text-heading { font-size: 24px; ... }
+@each $name, $style in $_vd-text-definitions {
+  .vd-text-#{$name} {
+    @include vd-text($name);
+  }
+}
+
+// Helper class implementing the vd-truncate mixin
+.vd-text-truncate {
+  @include vd-truncate();
+}
+
+// Helper class implementing white-space: nowrap
+.vd-no-wrap {
+  white-space: nowrap;
+}