@lightspeed/design-system-css 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (216) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/LICENSE.md +24 -0
  3. package/README.md +70 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +9 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/themes/types.d.ts +54 -0
  8. package/dist/themes/types.js +16 -0
  9. package/dist/themes/types.js.map +1 -0
  10. package/dist/themes/xseries/dark.d.ts +68 -0
  11. package/dist/themes/xseries/dark.js +84 -0
  12. package/dist/themes/xseries/dark.js.map +1 -0
  13. package/dist/themes/xseries/light.d.ts +68 -0
  14. package/dist/themes/xseries/light.js +84 -0
  15. package/dist/themes/xseries/light.js.map +1 -0
  16. package/dist/vend-styles.css +6643 -0
  17. package/package.json +34 -0
  18. package/src/fonts-ui/fonts-ns.scss +14 -0
  19. package/src/images-ui/images-ui-ns.scss +1 -0
  20. package/src/index.ts +9 -0
  21. package/src/themes/themeToScss.ts +67 -0
  22. package/src/themes/types.ts +68 -0
  23. package/src/themes/xseries/dark.ts +90 -0
  24. package/src/themes/xseries/light.ts +89 -0
  25. package/src/vend-stylelint/use-colour-function.js +60 -0
  26. package/src/vend-styles/components/BarChart/BarChart.scss +45 -0
  27. package/src/vend-styles/components/Carousel/Carousel.scss +114 -0
  28. package/src/vend-styles/components/CodeInput/CodeInput.scss +25 -0
  29. package/src/vend-styles/components/CurrencyInput/CurrencyInput.scss +4 -0
  30. package/src/vend-styles/components/DatePicker/DatePicker.scss +232 -0
  31. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +32 -0
  32. package/src/vend-styles/components/FileUpload/FileUpload.scss +8 -0
  33. package/src/vend-styles/components/InboundIndicator/InboundIndicator.scss +7 -0
  34. package/src/vend-styles/components/InboundItem/InboundItem.scss +3 -0
  35. package/src/vend-styles/components/LineChart/LineChart.scss +99 -0
  36. package/src/vend-styles/components/Modal/Modal.scss +149 -0
  37. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -0
  38. package/src/vend-styles/components/PageHeader/_PageHeader.scss +3 -0
  39. package/src/vend-styles/components/ProgressBar/ProgressBar.scss +21 -0
  40. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +44 -0
  41. package/src/vend-styles/components/SearchFilters/SearchFilters.scss +6 -0
  42. package/src/vend-styles/components/TableList/TableList.scss +291 -0
  43. package/src/vend-styles/components/TableList/_TableList-ns.scss +15 -0
  44. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +53 -0
  45. package/src/vend-styles/components/UpsellPrimary/_UpsellPrimary-ns.scss +12 -0
  46. package/src/vend-styles/components/UpsellSecondary/UpsellSecondary.scss +30 -0
  47. package/src/vend-styles/components/VendVideo/VendVideo.scss +48 -0
  48. package/src/vend-styles/utilities/position.scss +3 -0
  49. package/src/vend-styles/utilities/text.scss +9 -0
  50. package/src/vend-styles/vend-styles.scss +39 -0
  51. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex-ns.scss +2 -0
  52. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +47 -0
  53. package/src/vend.ui/behaviours/vd-align/vd-align.scss +3 -0
  54. package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +3 -0
  55. package/src/vend.ui/components/vd-action-bar/vd-action-bar.scss +33 -0
  56. package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +36 -0
  57. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +68 -0
  58. package/src/vend.ui/components/vd-avatar/vd-avatar-ns.scss +3 -0
  59. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +78 -0
  60. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss +4 -0
  61. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +70 -0
  62. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -0
  63. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge-ns.scss +10 -0
  64. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +159 -0
  65. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +16 -0
  66. package/src/vend.ui/components/vd-banner/vd-banner.scss +89 -0
  67. package/src/vend.ui/components/vd-bg/vd-bg.scss +4 -0
  68. package/src/vend.ui/components/vd-body/vd-body.scss +20 -0
  69. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +121 -0
  70. package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss +7 -0
  71. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +74 -0
  72. package/src/vend.ui/components/vd-btn/vd-btn.scss +112 -0
  73. package/src/vend.ui/components/vd-card/vd-card-ns.scss +9 -0
  74. package/src/vend.ui/components/vd-card/vd-card.scss +11 -0
  75. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +120 -0
  76. package/src/vend.ui/components/vd-checkbox/vd-checkbox-ns.scss +7 -0
  77. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +158 -0
  78. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +74 -0
  79. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +332 -0
  80. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +10 -0
  81. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +220 -0
  82. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +8 -0
  83. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +117 -0
  84. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer-ns.scss +1 -0
  85. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +22 -0
  86. package/src/vend.ui/components/vd-dott/vd-dott.scss +41 -0
  87. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +15 -0
  88. package/src/vend.ui/components/vd-expandable/vd-expandable.scss +11 -0
  89. package/src/vend.ui/components/vd-feedback/vd-feedback.scss +23 -0
  90. package/src/vend.ui/components/vd-field/vd-field-ns.scss +4 -0
  91. package/src/vend.ui/components/vd-field/vd-field.scss +59 -0
  92. package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +19 -0
  93. package/src/vend.ui/components/vd-flag/vd-flag-ns.scss +1 -0
  94. package/src/vend.ui/components/vd-flag/vd-flag.scss +46 -0
  95. package/src/vend.ui/components/vd-flex/vd-flex.scss +21 -0
  96. package/src/vend.ui/components/vd-grid/vd-grid.scss +26 -0
  97. package/src/vend.ui/components/vd-header/vd-header.scss +34 -0
  98. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +28 -0
  99. package/src/vend.ui/components/vd-hero/vd-hero.scss +114 -0
  100. package/src/vend.ui/components/vd-hr/vd-hr.scss +14 -0
  101. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +61 -0
  102. package/src/vend.ui/components/vd-input/vd-input-ns.scss +99 -0
  103. package/src/vend.ui/components/vd-input/vd-input.scss +49 -0
  104. package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +8 -0
  105. package/src/vend.ui/components/vd-link/vd-link.scss +23 -0
  106. package/src/vend.ui/components/vd-loader/vd-loader.scss +56 -0
  107. package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +40 -0
  108. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +38 -0
  109. package/src/vend.ui/components/vd-main-content/vd-main-content.scss +39 -0
  110. package/src/vend.ui/components/vd-modals-container/vd-modals-container.scss +5 -0
  111. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +32 -0
  112. package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +30 -0
  113. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +62 -0
  114. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -0
  115. package/src/vend.ui/components/vd-overlay/vd-overlay.scss +19 -0
  116. package/src/vend.ui/components/vd-p/vd-p.scss +8 -0
  117. package/src/vend.ui/components/vd-panel/vd-panel.scss +9 -0
  118. package/src/vend.ui/components/vd-popover/vd-popover-ns.scss +5 -0
  119. package/src/vend.ui/components/vd-popover/vd-popover.scss +180 -0
  120. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +16 -0
  121. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +128 -0
  122. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +12 -0
  123. package/src/vend.ui/components/vd-promo/vd-promo.scss +86 -0
  124. package/src/vend.ui/components/vd-radio/vd-radio-ns.scss +7 -0
  125. package/src/vend.ui/components/vd-radio/vd-radio.scss +130 -0
  126. package/src/vend.ui/components/vd-save/vd-save.scss +4 -0
  127. package/src/vend.ui/components/vd-scrollable/vd-scrollable-ns.scss +2 -0
  128. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +54 -0
  129. package/src/vend.ui/components/vd-section/vd-section-ns.scss +17 -0
  130. package/src/vend.ui/components/vd-section/vd-section.scss +118 -0
  131. package/src/vend.ui/components/vd-section-back/vd-section-back-ns.scss +3 -0
  132. package/src/vend.ui/components/vd-section-back/vd-section-back.scss +34 -0
  133. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +82 -0
  134. package/src/vend.ui/components/vd-select/vd-select-group.scss +47 -0
  135. package/src/vend.ui/components/vd-select/vd-select-inline.scss +40 -0
  136. package/src/vend.ui/components/vd-select/vd-select-ns.scss +17 -0
  137. package/src/vend.ui/components/vd-select/vd-select.scss +26 -0
  138. package/src/vend.ui/components/vd-settings/vd-settings-ns.scss +1 -0
  139. package/src/vend.ui/components/vd-settings/vd-settings.scss +8 -0
  140. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +10 -0
  141. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +6 -0
  142. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +47 -0
  143. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +15 -0
  144. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +73 -0
  145. package/src/vend.ui/components/vd-splash/vd-splash.scss +47 -0
  146. package/src/vend.ui/components/vd-status-icon/vd-status-icon-ns.scss +1 -0
  147. package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +12 -0
  148. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +5 -0
  149. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +76 -0
  150. package/src/vend.ui/components/vd-switch/vd-switch-ns.scss +8 -0
  151. package/src/vend.ui/components/vd-switch/vd-switch.scss +117 -0
  152. package/src/vend.ui/components/vd-table/vd-table-ns.scss +13 -0
  153. package/src/vend.ui/components/vd-table/vd-table.scss +251 -0
  154. package/src/vend.ui/components/vd-tabs/_vd-tabs-ns.scss +3 -0
  155. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +76 -0
  156. package/src/vend.ui/components/vd-text/vd-text.scss +18 -0
  157. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss +3 -0
  158. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +58 -0
  159. package/src/vend.ui/components/vd-tooltip/vd-tooltip-ns.scss +1 -0
  160. package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +15 -0
  161. package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +10 -0
  162. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +36 -0
  163. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +73 -0
  164. package/src/vend.ui/fonts/fira-mono-regular.woff2 +0 -0
  165. package/src/vend.ui/fonts/lato-black.woff2 +0 -0
  166. package/src/vend.ui/fonts/lato-bold.woff2 +0 -0
  167. package/src/vend.ui/fonts/lato-regular.woff2 +0 -0
  168. package/src/vend.ui/styles/global/_base-mixins.scss +12 -0
  169. package/src/vend.ui/styles/global/_button-mixins.scss +17 -0
  170. package/src/vend.ui/styles/global/_grid.scss +102 -0
  171. package/src/vend.ui/styles/global/_helper-mixins.scss +36 -0
  172. package/src/vend.ui/styles/global/_layout.scss +10 -0
  173. package/src/vend.ui/styles/global/_misc.scss +14 -0
  174. package/src/vend.ui/styles/global/_non-styles.scss +72 -0
  175. package/src/vend.ui/styles/global/_normalise.scss +16 -0
  176. package/src/vend.ui/styles/global/_placeholders.scss +11 -0
  177. package/src/vend.ui/styles/global/_z-index.scss +40 -0
  178. package/src/vend.ui/styles/global/colour/_base.scss +105 -0
  179. package/src/vend.ui/styles/global/colour/_colour-functions.scss +76 -0
  180. package/src/vend.ui/styles/global/colour/_colour-helpers.scss +7 -0
  181. package/src/vend.ui/styles/global/colour/_colour.scss +5 -0
  182. package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +12 -0
  183. package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss +1 -0
  184. package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +81 -0
  185. package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +5 -0
  186. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +53 -0
  187. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +53 -0
  188. package/src/vend.ui/styles/global/effects/_effects-ns.scss +13 -0
  189. package/src/vend.ui/styles/global/effects/_effects.scss +22 -0
  190. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +12 -0
  191. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +24 -0
  192. package/src/vend.ui/styles/global/spacing/_spacing.scss +4 -0
  193. package/src/vend.ui/styles/global/text/_base.scss +6 -0
  194. package/src/vend.ui/styles/global/text/_text-definitions.scss +65 -0
  195. package/src/vend.ui/styles/global/text/_text-helpers.scss +17 -0
  196. package/src/vend.ui/styles/global/text/_text-mixins.scss +141 -0
  197. package/src/vend.ui/styles/global/text/_text.scss +3 -0
  198. package/src/vend.ui/styles/global/utils/_functions.scss +84 -0
  199. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +37 -0
  200. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +37 -0
  201. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +157 -0
  202. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +18 -0
  203. package/src/vend.ui/styles/navi/_non-styles.scss +2 -0
  204. package/src/vend.ui/styles/navi/_nv-account-banner.scss +12 -0
  205. package/src/vend.ui/styles/navi/_nv-notifications-item.scss +15 -0
  206. package/src/vend.ui/styles/navi/_nv-sidenav.scss +143 -0
  207. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +24 -0
  208. package/src/vend.ui/styles/navi/_nv-topnav.scss +112 -0
  209. package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +14 -0
  210. package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +44 -0
  211. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +85 -0
  212. package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +44 -0
  213. package/src/vend.ui/styles/navi/navi.scss +12 -0
  214. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +48 -0
  215. package/src/vend.ui/styles/navi/non-styles/_variables.scss +26 -0
  216. package/src/vend.ui/styles/vend-ui.scss +98 -0
@@ -0,0 +1,105 @@
1
+ // stylelint-disable vend/use-colour-function
2
+
3
+ // Green
4
+ $vd-colour-green-0: #eefff0;
5
+ $vd-colour-green-5: #defce0;
6
+ $vd-colour-green-10: #cdf8d1;
7
+ $vd-colour-green-20: #a6f1ad;
8
+ $vd-colour-green-30: #84e78d;
9
+ $vd-colour-green-40: #68d972;
10
+ $vd-colour-green-50: #52c65d;
11
+ $vd-colour-green-60: #41af4b;
12
+ $vd-colour-green-70: #279731;
13
+ $vd-colour-green-80: #14781d;
14
+ $vd-colour-green-90: #07560e;
15
+ $vd-colour-green-100: #013305;
16
+
17
+ // Red
18
+ $vd-colour-red-0: #fff3f0;
19
+ $vd-colour-red-5: #ffe5dc;
20
+ $vd-colour-red-10: #ffd6c8;
21
+ $vd-colour-red-20: #ffb59e;
22
+ $vd-colour-red-30: #fc9677;
23
+ $vd-colour-red-40: #f37b56;
24
+ $vd-colour-red-50: #e6643c;
25
+ $vd-colour-red-60: #cc4f29;
26
+ $vd-colour-red-70: #ac3d1b;
27
+ $vd-colour-red-80: #872d11;
28
+ $vd-colour-red-90: #5e1e0a;
29
+ $vd-colour-red-100: #331005;
30
+
31
+ // Blue
32
+ $vd-colour-blue-0: #ecf7ff;
33
+ $vd-colour-blue-5: #d1eeff;
34
+ $vd-colour-blue-10: #b5e4ff;
35
+ $vd-colour-blue-20: #7fcdff;
36
+ $vd-colour-blue-30: #4db7fe;
37
+ $vd-colour-blue-40: #4db7fe;
38
+ $vd-colour-blue-50: #24a1f5;
39
+ $vd-colour-blue-60: #058de9;
40
+ $vd-colour-blue-70: #007bce;
41
+ $vd-colour-blue-80: #0068ae;
42
+ $vd-colour-blue-90: #00385e;
43
+ $vd-colour-blue-100: #001f33;
44
+
45
+ // Supplementary Blue
46
+ $vd-colour-sup-blue-0: #f2faff;
47
+ $vd-colour-sup-blue-5: #e2eff8;
48
+ $vd-colour-sup-blue-10: #d3e5f1;
49
+ $vd-colour-sup-blue-20: #b2d1e6;
50
+ $vd-colour-sup-blue-30: #9fbdd8;
51
+ $vd-colour-sup-blue-40: #7ca8c6;
52
+ $vd-colour-sup-blue-50: #6692b0;
53
+ $vd-colour-sup-blue-60: #4e7fa1;
54
+ $vd-colour-sup-blue-70: #396b8c;
55
+ $vd-colour-sup-blue-80: #275371;
56
+ $vd-colour-sup-blue-90: #183b53;
57
+ $vd-colour-sup-blue-100: #0c2333;
58
+
59
+ // Charcoal
60
+ $vd-colour-charcoal-0: #fafbfb;
61
+ $vd-colour-charcoal-5: #f0f4f4;
62
+ $vd-colour-charcoal-10: #e5eaed;
63
+ $vd-colour-charcoal-20: #d0d7da;
64
+ $vd-colour-charcoal-30: #bcc3c8;
65
+ $vd-colour-charcoal-40: #a4adb3;
66
+ $vd-colour-charcoal-50: #8f99a0;
67
+ $vd-colour-charcoal-60: #7a858d;
68
+ $vd-colour-charcoal-70: #637078;
69
+ $vd-colour-charcoal-80: #4f5d66;
70
+ $vd-colour-charcoal-90: #3a4953;
71
+ $vd-colour-charcoal-100: #2b363d;
72
+ $vd-colour-charcoal-110: #242e34;
73
+
74
+ // Yin and Yang
75
+ $vd-colour-black: #000;
76
+ $vd-colour-white: #fff;
77
+
78
+ // @Depreacted use the theme based swatches instead
79
+ $vd-colour-golden-sand: #f2c17b;
80
+ $vd-colour-gothic: #678e98;
81
+ $vd-colour-lavender-purple: #aa88b5;
82
+ $vd-colour-new-york-pink: #d77173;
83
+ $vd-colour-shuttle-gray: #62676f;
84
+ $vd-colour-sinbad: #99c8d4;
85
+ $vd-colour-tacao: #f49b8c;
86
+
87
+ // Navigation
88
+ $vd-nav-item-colours: (
89
+ // Old nav colours; @todo once all apps are on a version of vend.ui which include the new nav colours, navago should
90
+ // be updated to use the new nav colours and these should be removed.
91
+ carnation: #f5765f,
92
+ ocean-green: #44b773,
93
+ rajah: #f3c276,
94
+ shakespeare: #56bad6,
95
+
96
+ // New nav colours (these actually match those used by Design)
97
+ downy: #70b8d3, // Should replace `shakespeare`
98
+ fern: #65b479, // Should replace `ocean-green`
99
+ fiord: #4b576e,
100
+ rob-roy: #ebc381, // Should replace `rajah`
101
+ terracotta: #e57d66, // Should replace `carnation`
102
+ wistera: #965fb0
103
+ );
104
+
105
+ // stylelint-enable vend/use-colour-function
@@ -0,0 +1,76 @@
1
+ /// Get a theme based colour for a specific colour element.
2
+ ///
3
+ /// @function vd-colour
4
+ /// @param {String} $_vd-colour-element - The required element; e.g. text, background
5
+ /// @param {String} [$_vd-colour-theme=$vd-colour-theme] @deprecated
6
+ /// @return {Colour<String>} - The retrieved colour for the element
7
+ @function vd-colour($_vd-colour-element, $_vd-colour-theme: _no_arg_provided_) {
8
+ @if ($_vd-colour-theme != _no_arg_provided_) {
9
+ @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
10
+ }
11
+ @if (index($vd-theme-available-keys, $_vd-colour-element) != null) {
12
+ @return var(--vd-colour--#{$_vd-colour-element});
13
+ } @else {
14
+ @error "[colour-functions] The specified element (#{$_vd-colour-element}) does not exist.";
15
+ @return null;
16
+ }
17
+ }
18
+
19
+ /// Generates a highlighted colour based on the provided colour elements. This would
20
+ /// normally take the form of an action colour element (`do`, `go`, `no`) as the primary element, and either `box` or
21
+ /// `background` as the secondary element.
22
+ ///
23
+ /// @example vd-colour-highlight(do, box);
24
+ ///
25
+ /// @function vd-colour-highlight
26
+ /// @param {String} $_vd-primary-element - The vd colour element; e.g. `do`. The weight specifies the amount of this
27
+ /// colour which should be included in the returned colour.
28
+ /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
29
+ /// @return {Colour<String>} - The highlighted colour
30
+ @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
31
+ @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
32
+ }
33
+
34
+ /// Generating a solid border for permitted border types (currently either keyline or framing)
35
+ ///
36
+ /// @function vd-border
37
+ /// @param {String} $_vd-border-type - The border type, either keyline or framing
38
+ /// @param {Unit} [$_vd-border-width=1px] - The width of the border
39
+ /// @param {String} [$_vd-border-style=solid] - The style of the border
40
+ @function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
41
+ @if (null != index($vd-border-types, $_vd-border-type)) {
42
+ @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
43
+ } @else {
44
+ @warn "[colour-functions] The specified border type (#{$_vd-border-type}) is not a valid.";
45
+ }
46
+ }
47
+
48
+ /// Converts HEX to RGB Values
49
+ ///
50
+ /// @function vd-hex-to-rgb
51
+ /// @return {String} The RGB values
52
+ @function vd-hex-to-rgb($hexColour) {
53
+ @return red($hexColour),green($hexColour),blue($hexColour);
54
+ }
55
+
56
+ /// Ensures that the browsers RGBA colour function is used. This means we can use string values (which is not allowed
57
+ /// by SASS's RGBA function).
58
+ ///
59
+ /// @function vd-rgba
60
+ /// @return {String} RGBA value
61
+ @function vd-rgba($string, $opacity) {
62
+ @return #{"rgba(#{$string}, #{$opacity})"};
63
+ }
64
+
65
+ /// Encodes a hex value.
66
+ ///
67
+ /// @function vd-encode-colour
68
+ /// @return {String} The encoded hex value.
69
+ @function vd-encode-colour($string) {
70
+ @if type-of($string) == 'color' {
71
+ $hex: str-slice(ie-hex-str($string), 4);
72
+ $string:unquote("#{$hex}");
73
+ }
74
+ $string: '%23' + $string;
75
+ @return $string;
76
+ }
@@ -0,0 +1,7 @@
1
+ $_vd-colour-helpers: (do, go, no, supplementary);
2
+
3
+ @each $key in ($_vd-colour-helpers) {
4
+ .vd-colour-#{$key} {
5
+ color: vd-colour($key);
6
+ }
7
+ }
@@ -0,0 +1,5 @@
1
+ @import "colour-functions";
2
+
3
+ // @todo Remove these imports once theme functions and mixins have been introduced
4
+ @import "base";
5
+ @import "./themes/colour-themes";
@@ -0,0 +1,12 @@
1
+ @import './theme-keys';
2
+ @import './xseries/theme-dark';
3
+ @import './xseries/theme-light';
4
+ @import './theme-functions';
5
+
6
+ $vd-colour-themes: (
7
+ xseries-dark: vd-add-theme($vd-xseries-theme-dark),
8
+ xseries-light: vd-add-theme($vd-xseries-theme-light)
9
+ );
10
+
11
+ // Only generate dark mode css variables for apps that request it
12
+ $vd-theme-use-dark-mode: false !default;
@@ -0,0 +1 @@
1
+ @include vd-generate-themes();
@@ -0,0 +1,81 @@
1
+ /// Validates all required theme properties are present in the provided theme map.
2
+ ///
3
+ /// @function addTheme
4
+ /// @param {Map} $theme - The theme to add.
5
+ /// @return {Map} The verified and updated theme.
6
+ @function vd-add-theme($theme) {
7
+ $_vend-theme: ();
8
+
9
+ @each $key in ($vd-theme-required-base-keys) {
10
+ @if (map-has-key($theme, $key) == false) {
11
+ @error '[colour-themes] Missing required theme property "#{$key}"';
12
+ }
13
+
14
+ $value: map-get($theme, $key);
15
+
16
+ // Set the theme based background image for selects;
17
+ @if ($key == select-arrows-bg) {
18
+ $value: vd-select-arrows-bg(map-get($theme, $key));
19
+ }
20
+
21
+ // Some swatches require rgb values
22
+ @if (index($vd-theme-available-rgb-keys, $key) != null) {
23
+ // Add original HEX values and generated RGB value to theme
24
+ $combined: (
25
+ $key: $value,
26
+ #{$key}-rgb: vd-hex-to-rgb($value)
27
+ );
28
+ $_vend-theme: map-merge($_vend-theme, $combined);
29
+ } @else {
30
+ // RGB value not required, just append the original value
31
+ $_vend-theme: map-merge($_vend-theme, ($key: $value));
32
+ }
33
+ }
34
+
35
+ @return $_vend-theme;
36
+ }
37
+
38
+
39
+ @mixin vd-generate-themes() {
40
+ :root {
41
+ color-scheme: light;
42
+ @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-light));
43
+ }
44
+
45
+ // Dark themes
46
+ @if ($vd-theme-use-dark-mode) {
47
+ @media (prefers-color-scheme: dark) {
48
+ :root {
49
+ color-scheme: dark;
50
+ @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
51
+ }
52
+ }
53
+ } @else {
54
+ // Making dark mode toggleable via selectors
55
+ @media (prefers-color-scheme: dark) {
56
+ .vd-theme--dark {
57
+ color-scheme: dark;
58
+ @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
59
+ }
60
+ }
61
+ }
62
+ }
63
+
64
+ /// Generates css variables from the provided theme map.
65
+ ///
66
+ /// @function vd-generate-theme-values
67
+ /// @param {Map} $theme - The theme to add.
68
+ @mixin vd-generate-theme-values($_vd-theme-values) {
69
+ @each $vd-theme-prop, $vd-theme-value in $_vd-theme-values {
70
+ --vd-colour--#{$vd-theme-prop}: #{$vd-theme-value};
71
+ }
72
+ }
73
+
74
+ /// Generates theme based background image for a select.
75
+ ///
76
+ /// @function vd-select-arrows-bg
77
+ /// @param {Colour} $_vd-colour - The colour to use
78
+ /// @return {String} The background url for selects.
79
+ @function vd-select-arrows-bg($_vd-colour) {
80
+ @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>');
81
+ }
@@ -0,0 +1,5 @@
1
+ // THIS IS A GENERATED FILE. DO NOT EDIT.
2
+
3
+ $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;
4
+ $vd-theme-available-rgb-keys: background,box,box-inverse,do,go,nav-side-drawer,nav-side-tabs,nav-top,no,supplementary;
5
+ $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;
@@ -0,0 +1,53 @@
1
+ // THIS IS A GENERATED FILE. DO NOT EDIT.
2
+
3
+ // stylelint-disable vend/use-colour-function
4
+
5
+ $vd-xseries-theme-dark: (
6
+ background:#141217,
7
+ box:#1E1C21,
8
+ background-inverse:#F4F2F5,
9
+ box-inverse:#FFFFFF,
10
+ success:#15BF20,
11
+ go-lighter:#6054FF,
12
+ go:#477BFF,
13
+ go-darker:#352ACF,
14
+ go-highlight:rgba(0, 23, 229, .1),
15
+ no-lighter:#D4301D,
16
+ no:#EB4F29,
17
+ no-darker:#A12416,
18
+ supplementary-lighter:#3C6996,
19
+ supplementary:#5B83AC,
20
+ supplementary-darker:#284563,
21
+ text:#E7E5E8,
22
+ text-inverse:#0B0B0B,
23
+ text-action:#FFFFFF,
24
+ select-arrows-bg:#E7E5E8,
25
+ shadow:rgba(0, 0, 0, 0.35),
26
+ overlay:rgba(43, 54, 61, 0.65),
27
+ framing:#27252A,
28
+ keyline:#37353A,
29
+ framing-inverse:#E7E5E8,
30
+ keyline-inverse:#C9C7CA,
31
+ golden-sand:#E6B03D,
32
+ tacao:#ED6B44,
33
+ new-york-pink:#DE3CEC,
34
+ gothic:#A02FB6,
35
+ lavender-purple:#501897,
36
+ sinbad:#6952F6,
37
+ shuttle-gray:#5D5D5D,
38
+ nav-top:#0B0B0B,
39
+ nav-side-tabs:#27252A,
40
+ nav-side-drawer:#1E1C21,
41
+ nav-icon-unselected:#FFFFFF,
42
+ nav-icon-selected:#E7E5E8,
43
+ box-supplementary:#27252A,
44
+ text-nav:#FFFFFF,
45
+ supplementary--text:#5B83AC,
46
+ supplementary-highlight:rgba(0, 61, 229, .1),
47
+ do-highlight:rgba(0, 23, 229, .1),
48
+ no-highlight:rgba(229, 0, 0,.1),
49
+ do-lighter:#618EFF,
50
+ do:#477BFF,
51
+ do-darker:#406FE5);
52
+
53
+ // stylelint-enable vend/use-colour-function
@@ -0,0 +1,53 @@
1
+ // THIS IS A GENERATED FILE. DO NOT EDIT.
2
+
3
+ // stylelint-disable vend/use-colour-function
4
+
5
+ $vd-xseries-theme-light: (
6
+ background:#F4F2F5,
7
+ box:#FFFFFF,
8
+ background-inverse:#141217,
9
+ box-inverse:#1E1C21,
10
+ success:#0E7B1D,
11
+ go-lighter:#6054FF,
12
+ go:#3F32F5,
13
+ go-darker:#352ACF,
14
+ go-highlight:rgba(128, 140, 255, .1),
15
+ no-lighter:#D4301D,
16
+ no:#BB2A1A,
17
+ no-darker:#A12416,
18
+ supplementary-lighter:#3C6996,
19
+ supplementary:#32577D,
20
+ supplementary-darker:#284563,
21
+ text:#27252A,
22
+ text-inverse:#FFFFFF,
23
+ text-action:#FFFFFF,
24
+ select-arrows-bg:#27252A,
25
+ shadow:rgba(0, 0, 0, 0.35),
26
+ overlay:rgba(0, 0, 0, 0.35),
27
+ framing:#E7E5E8,
28
+ keyline:#C9C7CA,
29
+ framing-inverse:#27252A,
30
+ keyline-inverse:#37353A,
31
+ golden-sand:#E6B03D,
32
+ tacao:#ED6B44,
33
+ new-york-pink:#DE3CEC,
34
+ gothic:#A02FB6,
35
+ lavender-purple:#501897,
36
+ sinbad:#6952F6,
37
+ shuttle-gray:#5D5D5D,
38
+ nav-top:#0B0B0B,
39
+ nav-side-tabs:#E7E5E8,
40
+ nav-side-drawer:#FFFFFF,
41
+ nav-icon-unselected:#27252A,
42
+ nav-icon-selected:#3F32F5,
43
+ box-supplementary:#E7E5E8,
44
+ text-nav:#FFFFFF,
45
+ supplementary--text:#32577D,
46
+ supplementary-highlight:rgba(76, 124, 255, 0.1),
47
+ do-highlight:rgba(128, 140, 255, .1),
48
+ no-highlight:rgba(255, 128, 128, .1),
49
+ do-lighter:#6054FF,
50
+ do:#3F32F5,
51
+ do-darker:#352ACF);
52
+
53
+ // stylelint-enable vend/use-colour-function
@@ -0,0 +1,13 @@
1
+ $vd-time-s: .2s !default;
2
+ $vd-time-m: .5s !default;
3
+ $vd-time-l: .8s !default;
4
+ $vd-time-xl: 1s !default;
5
+
6
+ @mixin vd-slow-rotate {
7
+ animation: vd-rotate $vd-time-xl ease-in-out infinite;
8
+ }
9
+
10
+ @mixin vd-fade-in ($time: $vd-time-m) {
11
+ animation: vd-fade-in $time ease-in-out;
12
+ animation-fill-mode: forwards;
13
+ }
@@ -0,0 +1,22 @@
1
+ @keyframes vd-rotate {
2
+ 100% {
3
+ transform: rotate(360deg);
4
+ }
5
+ }
6
+
7
+ @keyframes vd-fade-in {
8
+ 0% { opacity: 0; }
9
+ 100% { opacity: 1; }
10
+ }
11
+
12
+ @keyframes vd-flash {
13
+ 0% {opacity: 0;}
14
+ 30%, 70% {opacity: 1;}
15
+ 100% {opacity: 0;}
16
+ }
17
+
18
+ .vd-fade-out {
19
+ animation-duration: 1.5s;
20
+ animation-name: vd-flash;
21
+ animation-fill-mode:forwards;
22
+ }
@@ -0,0 +1,12 @@
1
+ /// Returns a calculated spacing value based on the supplied multiplier.
2
+ ///
3
+ /// @function vd-spacer
4
+ /// @param {Number} $_vd-multiplier - The number of times to multiply the spacing unit.
5
+ /// @return {Unit<px>} - The calculated spacing value.
6
+ @function vd-spacer ($_vd-multiplier:1) {
7
+ @if ($_vd-multiplier > $vd-spacing-max-multiplier) {
8
+ @error('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
9
+ } @else {
10
+ @return $vd-spacing-unit * $_vd-multiplier;
11
+ }
12
+ }
@@ -0,0 +1,24 @@
1
+ // Generates spacing helpers for padding and margins.
2
+ @each $_vd-spacing_type in $vd-spacing-types {
3
+ @each $_vd-position_value in $vd-spacing-positions {
4
+ // stylelint-disable selector-type-no-unknown
5
+ @for $i from 0 through $vd-spacing-max-multiplier {
6
+ $_vd-spacing_value: $i * $vd-spacing-unit;
7
+
8
+ @if $_vd-position_value == a {
9
+ .vd-#{nth($_vd-spacing_type, 1)
10
+ + nth($_vd-position_value, 1)
11
+ + $i} {
12
+ #{nth($_vd-spacing_type, 2)}: $_vd-spacing_value !important;
13
+ }
14
+ } @else {
15
+ .vd-#{nth($_vd-spacing_type, 1)
16
+ + nth($_vd-position_value, 1)
17
+ + $i} {
18
+ #{nth($_vd-spacing_type, 2)}-#{nth($_vd-position_value, 2)}: $_vd-spacing_value !important;
19
+ }
20
+ }
21
+ }
22
+ // stylelint-enable selector-type-no-unknown
23
+ }
24
+ }
@@ -0,0 +1,4 @@
1
+ $vd-spacing-unit: 4px;
2
+ $vd-spacing-max-multiplier: 10;
3
+ $vd-spacing-types: (m margin) (p padding);
4
+ $vd-spacing-positions: (t top) (b bottom) (l left) (r right) a;
@@ -0,0 +1,6 @@
1
+ $vd-font-weight--regular: 400;
2
+ $vd-font-weight--bold: 700;
3
+ $vd-font-weight--ultra-bold: 900;
4
+
5
+ $vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; // stylelint-disable-line value-keyword-case
6
+ $vd-font-primary: $vd-font-lato !default;
@@ -0,0 +1,65 @@
1
+ $_vd-text-definitions: (
2
+ grand: (
3
+ size: 48,
4
+ leading: 56,
5
+ font-weight: 700
6
+ ),
7
+ hero: (
8
+ size: 32,
9
+ leading: 48,
10
+ font-weight: 700
11
+ ),
12
+ heading: (
13
+ size: 24,
14
+ leading: 32,
15
+ font-weight: 700
16
+ ),
17
+ sub-heading: (
18
+ size: 18,
19
+ leading: 24,
20
+ font-weight: 700
21
+ ),
22
+ intro: (
23
+ size: 18,
24
+ leading: 24,
25
+ font-weight: 400
26
+ ),
27
+ signpost: (
28
+ size: 15,
29
+ leading: 20,
30
+ font-weight: 900,
31
+ tracking: 1.5,
32
+ casing: uppercase
33
+ ),
34
+ label: (
35
+ size: 15,
36
+ leading: 20,
37
+ font-weight: 700
38
+ ),
39
+ body: (
40
+ size: 15,
41
+ leading: 20,
42
+ font-weight: 400
43
+ ),
44
+ supplementary: (
45
+ size: 12,
46
+ leading: 15,
47
+ font-weight: 400
48
+ ),
49
+ mini-signpost: (
50
+ size: 10,
51
+ leading: 12,
52
+ font-weight: 900,
53
+ casing: uppercase
54
+ ),
55
+ mini-copy: (
56
+ size: 10,
57
+ leading: 12,
58
+ font-weight: 400
59
+ ),
60
+ button: (
61
+ size: 15,
62
+ leading: 18,
63
+ font-weight: 700
64
+ )
65
+ );
@@ -0,0 +1,17 @@
1
+ // Generates a helper class for each text defintion
2
+ // e.g. .vd-text-heading { font-size: 24px; ... }
3
+ @each $name, $style in $_vd-text-definitions {
4
+ .vd-text-#{$name} {
5
+ @include vd-text($name);
6
+ }
7
+ }
8
+
9
+ // Helper class implementing the vd-truncate mixin
10
+ .vd-text-truncate {
11
+ @include vd-truncate();
12
+ }
13
+
14
+ // Helper class implementing white-space: nowrap
15
+ .vd-no-wrap {
16
+ white-space: nowrap;
17
+ }