@lightspeed/design-system-css 1.2.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. package/README.md +2 -39
  2. package/dist/index.css +151 -80
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +151 -80
  5. package/package.json +1 -34
  6. package/src/images-ui/images-ui-ns.scss +1 -1
  7. package/src/vend-stylelint/use-colour-function.js +25 -22
  8. package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
  9. package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
  10. package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
  11. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
  12. package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
  13. package/src/vend-styles/components/Modal/Modal.scss +25 -12
  14. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
  15. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
  16. package/src/vend-styles/components/TableList/TableList.scss +2 -1
  17. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
  18. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
  19. package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
  20. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
  21. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
  22. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  23. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
  24. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
  25. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
  26. package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
  27. package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
  28. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
  29. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
  30. package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
  31. package/src/vend.ui/components/vd-card/vd-card-ns.scss +0 -1
  32. package/src/vend.ui/components/vd-card/vd-card.scss +0 -4
  33. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
  34. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
  35. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
  36. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
  37. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
  38. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
  39. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  40. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
  41. package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
  42. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
  43. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
  44. package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
  45. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
  46. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
  47. package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
  48. package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
  49. package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
  50. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  51. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
  52. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  53. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
  54. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  55. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  56. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  57. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  58. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  59. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  60. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  61. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  62. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  63. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  64. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  65. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  66. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  67. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  68. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +5 -2
  69. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +2 -5
  70. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +5 -2
  71. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  72. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  73. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  74. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  75. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  76. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  77. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  78. package/src/vend.ui/styles/global/_grid.scss +5 -5
  79. package/src/vend.ui/styles/global/_layout.scss +2 -2
  80. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  81. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  82. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  83. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  84. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  85. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  86. package/src/vend.ui/styles/global/effects/_effects.scss +19 -9
  87. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  88. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  89. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  90. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  91. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  92. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  93. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  94. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  95. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  96. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  97. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  98. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  99. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  100. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  101. package/src/vend.ui/styles/navi/navi.scss +8 -8
  102. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  103. package/CHANGELOG.md +0 -192
@@ -23,14 +23,14 @@
23
23
  /// background-color: #FACADE;
24
24
  /// }
25
25
  ///
26
- @mixin vd-viewport-media-only ($_viewport) {
26
+ @mixin vd-viewport-media-only($_viewport) {
27
27
  $_viewport-min-width: null;
28
28
  $_viewport-max-width: null;
29
29
 
30
30
  @if (type-of($_viewport) == 'string') {
31
31
  // Known viewport range provided, e.g. xsmall
32
- $_viewport-min-width: get-viewport-px-width($_viewport, "min");
33
- $_viewport-max-width: get-viewport-px-width($_viewport, "max");
32
+ $_viewport-min-width: get-viewport-px-width($_viewport, 'min');
33
+ $_viewport-max-width: get-viewport-px-width($_viewport, 'max');
34
34
  } @else if (type-of($_viewport) == 'map') {
35
35
  // Custom min and max range values provided
36
36
  @if (map-has-key($_viewport, 'min') and map-has-key($_viewport, 'max')) {
@@ -48,11 +48,11 @@
48
48
 
49
49
  // Determine if a named viewport has been provided for the min and max widths
50
50
  @if (type-of($_custom-min) == 'string') {
51
- $_custom-min: get-viewport-px-width($_custom-min, "min");
51
+ $_custom-min: get-viewport-px-width($_custom-min, 'min');
52
52
  }
53
53
 
54
54
  @if (type-of($_custom-max) == 'string') {
55
- $_custom-max: get-viewport-px-width($_custom-max, "max");
55
+ $_custom-max: get-viewport-px-width($_custom-max, 'max');
56
56
  }
57
57
 
58
58
  $_viewport-min-width: $_custom-min;
@@ -62,14 +62,14 @@
62
62
  }
63
63
  }
64
64
 
65
- $_viewport-media-range: "(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})";
65
+ $_viewport-media-range: '(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})';
66
66
 
67
67
  @if ($_viewport-min-width == null) {
68
- $_viewport-media-range: "(max-width: #{$_viewport-max-width})";
68
+ $_viewport-media-range: '(max-width: #{$_viewport-max-width})';
69
69
  }
70
70
 
71
71
  @if ($_viewport-max-width == null) {
72
- $_viewport-media-range: "(min-width: #{$_viewport-min-width})";
72
+ $_viewport-media-range: '(min-width: #{$_viewport-min-width})';
73
73
  }
74
74
 
75
75
  @media #{$vd-viewport-screen} and #{$_viewport-media-range} {
@@ -94,12 +94,12 @@
94
94
  /// background-color: #C0FFEE;
95
95
  /// }
96
96
  ///
97
- @mixin vd-viewport-media-min ($_viewport-range-min) {
97
+ @mixin vd-viewport-media-min($_viewport-range-min) {
98
98
  $_media-min-width: null;
99
99
  $_viewport-media-range: null;
100
100
 
101
101
  @if (type-of($_viewport-range-min) == 'string') {
102
- $_media-min-width: get-viewport-px-width($_viewport-range-min, "min");
102
+ $_media-min-width: get-viewport-px-width($_viewport-range-min, 'min');
103
103
  @if ($_media-min-width == null) {
104
104
  @error '[vd-viewport-media-min] Specified viewport range does not have a min range value. Use vd-viewport-media-max instead.';
105
105
  }
@@ -113,8 +113,8 @@
113
113
 
114
114
  @media #{$vd-viewport-screen} and
115
115
  (min-width: $_media-min-width) {
116
- @content;
117
- }
116
+ @content;
117
+ }
118
118
  }
119
119
 
120
120
  /// Descending content control.
@@ -133,12 +133,12 @@
133
133
  /// @include vd-viewport-media-max (250px) {
134
134
  /// background-color: #C0FFEE;
135
135
  /// }
136
- @mixin vd-viewport-media-max ($_viewport-range-max) {
136
+ @mixin vd-viewport-media-max($_viewport-range-max) {
137
137
  $_media-max-width: null;
138
138
  $_viewport-media-range: null;
139
139
 
140
140
  @if (type-of($_viewport-range-max) == 'string') {
141
- $_media-max-width: get-viewport-px-width($_viewport-range-max, "max");
141
+ $_media-max-width: get-viewport-px-width($_viewport-range-max, 'max');
142
142
  @if ($_media-max-width == null) {
143
143
  @error '[vd-viewport-media-max] Specified viewport range does not have a max range value. Use vd-viewport-media-min instead.';
144
144
  }
@@ -152,6 +152,6 @@
152
152
 
153
153
  @media #{$vd-viewport-screen} and
154
154
  (max-width: $_media-max-width) {
155
- @content;
156
- }
155
+ @content;
156
+ }
157
157
  }
@@ -1,15 +1,15 @@
1
1
  // Viewport Screen
2
- $vd-viewport-screen: "only screen";
2
+ $vd-viewport-screen: 'only screen';
3
3
 
4
4
  // Viewport Breakpoints - @todo Remove these !defaults.
5
- $vd-breakpoint-xsmall: get-viewport-px-width('xsmall', 'max') !default;
6
- $vd-breakpoint-small-min: get-viewport-px-width('small', 'min') !default;
7
- $vd-breakpoint-small: get-viewport-px-width('small', 'max') !default;
8
- $vd-breakpoint-medium-min: get-viewport-px-width('medium', 'min') !default;
9
- $vd-breakpoint-medium: get-viewport-px-width('medium', 'max') !default;
10
- $vd-breakpoint-large-min: get-viewport-px-width('large', 'min') !default;
11
- $vd-breakpoint-large: get-viewport-px-width('large', 'max') !default;
12
- $vd-breakpoint-xlarge-min: get-viewport-px-width('xlarge', 'min') !default;
5
+ $vd-breakpoint-xsmall: get-viewport-px-width('xsmall', 'max') !default;
6
+ $vd-breakpoint-small-min: get-viewport-px-width('small', 'min') !default;
7
+ $vd-breakpoint-small: get-viewport-px-width('small', 'max') !default;
8
+ $vd-breakpoint-medium-min: get-viewport-px-width('medium', 'min') !default;
9
+ $vd-breakpoint-medium: get-viewport-px-width('medium', 'max') !default;
10
+ $vd-breakpoint-large-min: get-viewport-px-width('large', 'min') !default;
11
+ $vd-breakpoint-large: get-viewport-px-width('large', 'max') !default;
12
+ $vd-breakpoint-xlarge-min: get-viewport-px-width('xlarge', 'min') !default;
13
13
 
14
14
  // Viewport Identifier
15
15
  $vd-viewport-identifier-map: map-get($vd-viewport, 'identifier');
@@ -13,7 +13,7 @@
13
13
 
14
14
  // ========= Responsive Breakpoint Styles ========= //
15
15
 
16
- @include vd-viewport-media-max ($vd-breakpoint-medium) {
16
+ @include vd-viewport-media-max($vd-breakpoint-medium) {
17
17
  .nv-topnav-title-shorthand {
18
18
  display: inline;
19
19
  }
@@ -20,7 +20,7 @@
20
20
  justify-content: center;
21
21
  flex: 1;
22
22
 
23
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
23
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
24
24
  flex: initial;
25
25
  }
26
26
  }
@@ -29,7 +29,7 @@
29
29
  min-width: 0;
30
30
  flex: 1;
31
31
 
32
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
32
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
33
33
  &.nv-topnav-header--mobile {
34
34
  flex: initial;
35
35
  }
@@ -76,7 +76,7 @@
76
76
  margin-left: auto;
77
77
  flex: 1;
78
78
 
79
- @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
79
+ @include vd-viewport-media-max($vd-breakpoint-xsmall) {
80
80
  flex: initial;
81
81
  }
82
82
  }
@@ -93,7 +93,7 @@
93
93
 
94
94
  // ========= Responsive Breakpoint Styles ========= //
95
95
 
96
- @include vd-viewport-media-max ($vd-breakpoint-large) {
96
+ @include vd-viewport-media-max($vd-breakpoint-large) {
97
97
  .nv-topnav-header {
98
98
  display: none;
99
99
 
@@ -7,7 +7,7 @@
7
7
  list-style: none;
8
8
  padding: 0;
9
9
  margin: 0;
10
- max-height: calc(100vh - #{$vd-topbar-height})
10
+ max-height: calc(100vh - #{$vd-topbar-height});
11
11
  }
12
12
 
13
13
  .nv-notifications-list-item {
@@ -32,7 +32,7 @@
32
32
  word-wrap: break-word;
33
33
 
34
34
  &:before {
35
- content:'';
35
+ content: '';
36
36
  width: 8px;
37
37
  height: 8px;
38
38
  box-sizing: content-box;
@@ -1,11 +1,11 @@
1
1
  // Modules
2
- @import "nv-topnav";
3
- @import "nv-topnav-title";
4
- @import "nv-account-banner";
5
- @import "nv-notifications-item";
6
- @import "nv-user-sale-data";
2
+ @import 'nv-topnav';
3
+ @import 'nv-topnav-title';
4
+ @import 'nv-account-banner';
5
+ @import 'nv-notifications-item';
6
+ @import 'nv-user-sale-data';
7
7
 
8
8
  // Dialogs
9
- @import "dialogs/nv-dialog-drawer";
10
- @import "dialogs/nv-notifications-dialog";
11
- @import "dialogs/nv-user-dialog";
9
+ @import 'dialogs/nv-dialog-drawer';
10
+ @import 'dialogs/nv-notifications-dialog';
11
+ @import 'dialogs/nv-user-dialog';
@@ -2,15 +2,17 @@
2
2
  // Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
3
3
  // darkened equivalent. Stripes are 15px wide.
4
4
  //
5
- @mixin nv-striped-background ($color) {
6
- background: repeating-linear-gradient(-60deg,
5
+ @mixin nv-striped-background($color) {
6
+ background: repeating-linear-gradient(
7
+ -60deg,
7
8
  darken($color, 3),
8
9
  darken($color, 3) 15px,
9
10
  $color 15px,
10
- $color 30px);
11
+ $color 30px
12
+ );
11
13
  }
12
14
 
13
- @mixin nv-topnav-status-icon ($_vd-icon-color: vd-colour(do)) {
15
+ @mixin nv-topnav-status-icon($_vd-icon-color: vd-colour(do)) {
14
16
  &::after {
15
17
  content: '';
16
18
  transform: scale(0);
package/CHANGELOG.md DELETED
@@ -1,192 +0,0 @@
1
- # @lightspeed/design-system-css
2
-
3
- ## 1.2.0
4
-
5
- ### Minor Changes
6
-
7
- - [#4901](https://github.com/vend/monocle/pull/4901) [`86a6a576a`](https://github.com/vend/monocle/commit/86a6a576a63c1a82dd3710004bb962dd520b82cd) Thanks [@rothlis](https://github.com/rothlis)! - Add new sidebar styles under feature flag
8
-
9
- ## 1.1.2
10
-
11
- ### Patch Changes
12
-
13
- - [#4635](https://github.com/vend/monocle/pull/4635) [`de5cd5a28`](https://github.com/vend/monocle/commit/de5cd5a286e507412c816c5c146a9d6c56862c07) Thanks [@aarr0n](https://github.com/aarr0n)! - Setting a zindex on the `topnav` so that it isn't obscured when the Transifex loader is shown.
14
-
15
- ## 1.1.1
16
-
17
- ### Patch Changes
18
-
19
- - [#4592](https://github.com/vend/monocle/pull/4592) [`697caaf9d`](https://github.com/vend/monocle/commit/697caaf9dea2ee9e11322e04a7ceb6de0dbd1f82) Thanks [@edsrzf](https://github.com/edsrzf)! - Use align-items: flex-start instead of start to avoid an autoprefixer warning.
20
-
21
- ## 1.1.0
22
-
23
- ### Minor Changes
24
-
25
- - [#4381](https://github.com/vend/monocle/pull/4381) [`291ce4a3d`](https://github.com/vend/monocle/commit/291ce4a3db11882b4e19e10a9865b896643d890b) Thanks [@stephen-boswell](https://github.com/stephen-boswell)! - Adds classes to hide the nav container in single-spa enviroment
26
-
27
- ## 1.0.3
28
-
29
- ### Patch Changes
30
-
31
- - [#4344](https://github.com/vend/monocle/pull/4344) [`908e57aea`](https://github.com/vend/monocle/commit/908e57aea8abb71d3b4bb26bcae152f87cf2b874) Thanks [@WaiHaiDere](https://github.com/WaiHaiDere)! - Update checkbox styling to match design (Margin + label)
32
-
33
- ## 1.0.2
34
-
35
- ### Patch Changes
36
-
37
- - Updated dependencies [[`13743872b`](https://github.com/vend/monocle/commit/13743872b0eb04bae4143efd20e24d11ba5cd925)]:
38
- - @lightspeed/design-system-tokens@1.0.0
39
-
40
- ## 1.0.1
41
-
42
- ### Patch Changes
43
-
44
- - [#4275](https://github.com/vend/monocle/pull/4275) [`2eb35a37f`](https://github.com/vend/monocle/commit/2eb35a37fb01bbb451bda857666ae5538969fac5) Thanks [@rothlis](https://github.com/rothlis)! - Fix Inputs height to 44px
45
-
46
- **Why?**
47
-
48
- Specs define buttons and inputs having a height of 44px. However, before this release, inputs (e.g. TextInput, Dropdown) where having a height of 46px.
49
-
50
- ## 1.0.0
51
-
52
- ### Major Changes
53
-
54
- - [#4264](https://github.com/vend/monocle/pull/4264) [`50352c606`](https://github.com/vend/monocle/commit/50352c6063a4de1e493d6a95c8058cdbbcb29c66) Thanks [@rothlis](https://github.com/rothlis)! - Ability to manually set the dark or light theme.
55
-
56
- - By default, no dark theme is enabled
57
- - If your UI supports the dark theme, then either:
58
- - Set the SASS variable `$vd-theme-use-dark-mode: true;` before importing the SASS styles
59
- - Set the CSS class `vd-theme--use-dark-mode` to the `<body>`
60
- - The dark theme will be automatically applied based on the OS preference
61
- - If you have a theme swicher, you can add `vd-theme--light` or `vd-theme--dark` to the `<body>`
62
- - This will override the OS preference
63
-
64
- ## 0.6.3
65
-
66
- ### Patch Changes
67
-
68
- - [#4252](https://github.com/vend/monocle/pull/4252) [`b720075e4`](https://github.com/vend/monocle/commit/b720075e419fc9d5671bb448bd987c33119fcd1a) Thanks [@staugaard](https://github.com/staugaard)! - Slightly improved styling of popovers
69
-
70
- ## 0.6.2
71
-
72
- ### Patch Changes
73
-
74
- - [#4249](https://github.com/vend/monocle/pull/4249) [`3dd1fa50b`](https://github.com/vend/monocle/commit/3dd1fa50bd328ac2b33f00fb66aa53e955a47f78) Thanks [@aarr0n](https://github.com/aarr0n)! - Fix animation for Dott.
75
-
76
- ## 0.6.1
77
-
78
- ### Patch Changes
79
-
80
- - [#4237](https://github.com/vend/monocle/pull/4237) [`a90d5a43e`](https://github.com/vend/monocle/commit/a90d5a43eea46eb9ddeca8410638ad1730fd9803) Thanks [@aarr0n](https://github.com/aarr0n)! - Navigation: Update the selector which highlights a sidebar drawer item as "active".
81
-
82
- ## 0.6.0
83
-
84
- ### Minor Changes
85
-
86
- - [#4229](https://github.com/vend/monocle/pull/4229) [`7f70bec24`](https://github.com/vend/monocle/commit/7f70bec24f7cae5938279e0ab567e62196152f5c) Thanks [@haydenwoodhead](https://github.com/haydenwoodhead)! - # Dropdown: add divider and search header margin
87
-
88
- ## What
89
-
90
- - Adds a divider suggestion type to the Dropdown.
91
- - Adds 4px of padding to the label that displays the search header inside of a Dropdown.
92
-
93
- ## Why
94
-
95
- IAM is creating a new page and needs a specific design for the dropdown component. That includes a divider. See the [figma](https://www.figma.com/file/n2CJXP9CDaLyUoiz23iEPj/08-Setup?node-id=1065%3A248430).
96
-
97
- It also appears that this search header label should have some margin. See [this slack discussion](https://lightspeedhq.slack.com/archives/C02K5U88KUH/p1646880176830629).
98
-
99
- ## How
100
-
101
- Use the new divider like so:
102
-
103
- ```
104
- const items = [
105
- { id: 'item7', label: 'item7', name: 'item7' },
106
- {
107
- id: 'dividerItem',
108
- label: 'divider',
109
- name: 'Divider',
110
- itemType: SuggestionType.Divider,
111
- },
112
- { id: 'item8', label: 'item8', name: 'item8' },
113
- { id: 'item9', label: 'item9', name: 'item9' },
114
- ]
115
-
116
- ...
117
-
118
- <Dropdown items={items}>
119
- ```
120
-
121
- ## 0.5.0
122
-
123
- ### Minor Changes
124
-
125
- - [#4200](https://github.com/vend/monocle/pull/4200) [`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f) Thanks [@rothlis](https://github.com/rothlis)! - Theme tokens have been extracted to `@lightspeed/design-system-tokens`
126
-
127
- **Deprecated**: This package does not export anymore the theme tokens. Please use `@lightspeed/design-system-tokens` going forward.
128
-
129
- ### Patch Changes
130
-
131
- - Updated dependencies [[`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f)]:
132
- - @lightspeed/design-system-tokens@0.1.0
133
-
134
- ## 0.4.0
135
-
136
- ### Minor Changes
137
-
138
- - 24ea79113: Update styling for Vend to Lightspeed brand replacement
139
-
140
- ## 0.3.0
141
-
142
- ### Minor Changes
143
-
144
- - 622131d30: Updates `ToastNotification` by adding a check icon to all success toasts and small style changes (padding and bolded font)
145
-
146
- ## 0.2.0
147
-
148
- ### Minor Changes
149
-
150
- - 495da32fa: Remove Vend's naming from the package's API
151
-
152
- ## New API
153
-
154
- Import CSS styles
155
-
156
- ```tsx
157
- import '@lightspeed/design-system-css'
158
- ```
159
-
160
- Import SCSS non-styles (variables, mixins, functions)
161
-
162
- ```scss
163
- @import '@lightspeed/design-system-css/src/common';
164
- ```
165
-
166
- ## Deprecated API
167
-
168
- > Those APIs are deprecated but still available for retro-compatibility.
169
-
170
- Import CSS styles
171
-
172
- ```tsx
173
- import '@lightspeed/design-system-css/dist/vend-styles.css'
174
- ```
175
-
176
- Import SCSS non-styles (variables, mixins, functions)
177
-
178
- ```scss
179
- @import '@lightspeed/design-system-css/src/vend.ui/styles/global/non-styles';
180
- ```
181
-
182
- ## 0.1.0
183
-
184
- ### Minor Changes
185
-
186
- - 094a8faf7: Initial release of `@lightspeed/design-sytem-css`.
187
-
188
- See https://github.com/vend/monocle/pull/3616 for context.
189
-
190
- ### Patch Changes
191
-
192
- - dc309dc98: Remove dependency on @vend packages