@lightspeed/design-system-css 31.0.1 → 32.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/index.css +170 -152
  2. package/dist/index.css.map +1 -1
  3. package/dist/vend-styles.css +170 -152
  4. package/package.json +1 -1
  5. package/src/vend-styles/components/DataTable/DataTable.scss +3 -3
  6. package/src/vend-styles/components/ProgressBar/ProgressBar.scss +1 -1
  7. package/src/vend-styles/components/TableList/TableList.scss +1 -1
  8. package/src/vend-styles/components/TableList/_TableList-ns.scss +1 -1
  9. package/src/vend-styles/utilities/sticky.scss +2 -2
  10. package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +1 -1
  11. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +1 -1
  12. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  13. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +2 -2
  14. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +2 -2
  15. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +2 -2
  16. package/src/vend.ui/components/vd-dott/vd-dott.scss +6 -6
  17. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -1
  18. package/src/vend.ui/components/vd-input/vd-input-ns.scss +5 -5
  19. package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +1 -1
  20. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +2 -2
  21. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  22. package/src/vend.ui/components/vd-popover/vd-popover.scss +1 -1
  23. package/src/vend.ui/components/vd-radio/vd-radio.scss +1 -1
  24. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
  25. package/src/vend.ui/components/vd-section/vd-section.scss +2 -2
  26. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +1 -1
  27. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  28. package/src/vend.ui/components/vd-switch/vd-switch.scss +2 -2
  29. package/src/vend.ui/components/vd-table/vd-table-ns.scss +1 -1
  30. package/src/vend.ui/styles/global/_helper-mixins.scss +1 -1
  31. package/src/vend.ui/styles/global/_misc.scss +1 -1
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@lightspeed/design-system-css","version":"31.0.1","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^31.0.1"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
1
+ {"name":"@lightspeed/design-system-css","version":"32.1.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^32.1.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
package/src/vend-styles/components/DataTable/DataTable.scss CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  &:nth-child(odd),
74
74
  &:nth-child(even) {
75
- background-color: hs-color(border-neutral-soft);
75
+ background-color: hs-color(bg-neutral-edge);
76
76
  }
77
77
  }
78
78
 
@@ -81,7 +81,7 @@
81
81
  .vd-datatable-row--footer {
82
82
  &:nth-child(odd),
83
83
  &:nth-child(even) {
84
- background-color: hs-color(border-neutral-soft);
84
+ background-color: hs-color(bg-neutral-edge);
85
85
  }
86
86
  }
87
87
 
@@ -109,7 +109,7 @@
109
109
  left: 0;
110
110
  width: 100%;
111
111
  height: 30px;
112
- box-shadow: inset 0 -30px 40px -48px hs-color(overlay-dark-default);
112
+ box-shadow: inset 0 -30px 40px -48px hs-color(overlay-neutral-strong);
113
113
  }
114
114
  }
115
115
 
package/src/vend-styles/components/ProgressBar/ProgressBar.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  height: 10px;
10
10
  width: 100%;
11
11
  border-radius: 5px;
12
- background-color: hs-color(border-neutral-soft);
12
+ background-color: hs-color(bg-neutral-edge);
13
13
  overflow: hidden;
14
14
  }
15
15
 
package/src/vend-styles/components/TableList/TableList.scss CHANGED
@@ -202,7 +202,7 @@
202
202
  // TABLE ROWS - ACTIONS ROW (FOR THINGS SUCH AS HIGHLIGHTING ITEMS SELECTED)
203
203
  // -----------------------------------------------------------------
204
204
  .vd-table-list-row--actions {
205
- background-color: hs-color(border-neutral-soft);
205
+ background-color: hs-color(bg-neutral-edge);
206
206
  border-bottom: 1px solid hs-color(border-neutral-strong);
207
207
  }
208
208
 
package/src/vend-styles/components/TableList/_TableList-ns.scss CHANGED
@@ -11,5 +11,5 @@
11
11
  }
12
12
  }
13
13
 
14
- $vd-table-list-expanded-shadow: 0 10px 12px -2px hs-color(overlay-dark-default);
14
+ $vd-table-list-expanded-shadow: 0 10px 12px -2px hs-color(overlay-neutral-strong);
15
15
  $vd-table-list-max-height-for-vcentering: 50px;
package/src/vend-styles/utilities/sticky.scss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  &.vd-sticky--stuck {
12
12
  box-shadow: 0 $vd-sticky-shadow-x $vd-sticky-shadow-blur $vd-sticky-shadow-spread
13
- hs-color(overlay-dark-default);
13
+ hs-color(overlay-neutral-strong);
14
14
  }
15
15
  }
16
16
 
@@ -19,7 +19,7 @@
19
19
 
20
20
  &.vd-sticky--stuck {
21
21
  box-shadow: 0 (-$vd-sticky-shadow-x) $vd-sticky-shadow-blur $vd-sticky-shadow-spread
22
- hs-color(overlay-dark-default);
22
+ hs-color(overlay-neutral-strong);
23
23
  }
24
24
  }
25
25
 
package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss CHANGED
@@ -1,3 +1,3 @@
1
- $vd-action-bar-background-colour: hs-color(border-neutral-soft);
1
+ $vd-action-bar-background-colour: hs-color(bg-neutral-edge);
2
2
  $vd-action-bar--inline-padding: vd-grid-unit(2) vd-grid-unit(6);
3
3
  $vd-action-bar--min-height: 45px;
package/src/vend.ui/components/vd-avatar/vd-avatar.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .vd-avatar {
2
- background-color: hs-color(border-neutral-soft);
2
+ background-color: hs-color(bg-neutral-edge);
3
3
  background-repeat: no-repeat;
4
4
  background-size: cover;
5
5
  background-position: center;
package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  background-repeat: no-repeat;
10
10
  background-size: cover;
11
11
  background-position: center center;
12
- background-color: hs-color(border-neutral-soft);
12
+ background-color: hs-color(bg-neutral-edge);
13
13
  position: relative;
14
14
 
15
15
  // Ensure placeholder backgrounds are the same size regardless of tile size
package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss CHANGED
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  &.vd-id-badge--current {
45
- border-color: hs-color(fg-go-default);
45
+ border-color: hs-color(border-go-default);
46
46
  }
47
47
 
48
48
  &.vd-id-badge--small {
@@ -146,7 +146,7 @@
146
146
  }
147
147
 
148
148
  .vd-id-badge__image {
149
- background-color: hs-color(border-neutral-soft);
149
+ background-color: hs-color(bg-neutral-edge);
150
150
  background-repeat: no-repeat;
151
151
  background-size: contain;
152
152
  background-position: center;
package/src/vend.ui/components/vd-btn/vd-btn-panel.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  @include vd-btn-disabled();
30
30
 
31
31
  &:focus {
32
- border-color: hs-color(fg-go-default);
32
+ border-color: hs-color(border-go-default);
33
33
  @include vd-btn-shadow(go);
34
34
  }
35
35
 
@@ -46,7 +46,7 @@
46
46
  // =================================== Selected Modifier =================================== //
47
47
 
48
48
  .vd-btn-panel--selected {
49
- border-color: hs-color(fg-go-default);
49
+ border-color: hs-color(border-go-default);
50
50
 
51
51
  &:focus,
52
52
  &:hover {
package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss CHANGED
@@ -117,7 +117,7 @@
117
117
  .vd-checkbox-input:checked + .vd-checkbox-tick {
118
118
  transition: background-color $vd-time-l;
119
119
  background-color: hs-color(bg-go-default);
120
- border-color: hs-color(fg-go-default);
120
+ border-color: hs-color(bg-go-default);
121
121
 
122
122
  &:after {
123
123
  opacity: 1;
@@ -150,7 +150,7 @@
150
150
 
151
151
  // Mixed state
152
152
  .vd-checkbox--mixed .vd-checkbox-tick {
153
- border: 2px solid hs-color(fg-go-default);
153
+ border: 2px solid hs-color(bg-go-default);
154
154
  }
155
155
 
156
156
  .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
package/src/vend.ui/components/vd-dott/vd-dott.scss CHANGED
@@ -31,15 +31,15 @@ vd-dott,
31
31
  }
32
32
 
33
33
  .vd-dott-border:not(.vd-input--error):not(.vd-error) {
34
- // Overide existing borders before applying patchy border styles ourselves
34
+ // Override existing borders before applying patchy border styles ourselves
35
35
  border: initial;
36
- border-top: $vd-dot-border-width solid hs-color(fg-go-default);
37
- border-bottom: $vd-dot-border-width solid hs-color(fg-success-default);
36
+ border-top: $vd-dot-border-width solid hs-color(border-go-default);
37
+ border-bottom: $vd-dot-border-width solid hs-color(border-success-default);
38
38
  // Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
39
- background-image: linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default)),
40
- linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default));
39
+ background-image: linear-gradient(hs-color(border-go-default), hs-color(border-success-default)),
40
+ linear-gradient(hs-color(border-go-default), hs-color(border-success-default));
41
41
  background-size: $vd-dot-border-width 100%;
42
42
  background-position: 0 0, 100% 0;
43
43
  background-repeat: no-repeat;
44
- box-shadow: 0 0 4px 0 hs-color(fg-go-default);
44
+ box-shadow: 0 0 4px 0 hs-color(border-go-default);
45
45
  }
package/src/vend.ui/components/vd-flag/vd-flag.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @include vd-text(mini-signpost);
3
3
 
4
4
  padding: vd-grid-unit(1) vd-grid-unit(2);
5
- background-color: hs-color(border-neutral-soft);
5
+ background-color: hs-color(bg-neutral-edge);
6
6
  border-radius: $vd-border-radius;
7
7
  display: inline-block;
8
8
  vertical-align: text-top;
package/src/vend.ui/components/vd-input/vd-input-ns.scss CHANGED
@@ -27,7 +27,7 @@ $vd-textarea-line-height: vd-px-unit(
27
27
  word-break: normal;
28
28
 
29
29
  &::placeholder {
30
- color: hs-color(bg-supplementary-default);
30
+ color: hs-color(fg-supplementary-default);
31
31
  opacity: 1;
32
32
  }
33
33
 
@@ -70,8 +70,8 @@ $vd-textarea-line-height: vd-px-unit(
70
70
  @mixin vd-input-focus() {
71
71
  &:focus,
72
72
  &.vd-focus {
73
- border-color: hs-color(fg-go-default);
74
- box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
73
+ border-color: hs-color(border-go-default);
74
+ box-shadow: 0 0 $vd-shadow-blur hs-color(border-go-default);
75
75
  }
76
76
  }
77
77
 
@@ -92,11 +92,11 @@ $vd-textarea-line-height: vd-px-unit(
92
92
  }
93
93
 
94
94
  @mixin vd-input-error-styles() {
95
- border-color: hs-color(fg-no-default);
95
+ border-color: hs-color(border-no-default);
96
96
 
97
97
  &:focus,
98
98
  &.vd-focus {
99
- box-shadow: 0 0 $vd-shadow-blur hs-color(fg-no-default);
99
+ box-shadow: 0 0 $vd-shadow-blur hs-color(border-no-default);
100
100
  }
101
101
  }
102
102
 
package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  padding: 6px 10px;
5
5
  color: hs-color(fg-supplementary-default);
6
- background-color: hs-color(border-neutral-soft);
6
+ background-color: hs-color(bg-neutral-edge);
7
7
  border-radius: $vd-border-radius;
8
8
  display: inline-block;
9
9
  margin-right: vd-grid-unit(1);
package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss CHANGED
@@ -32,8 +32,8 @@
32
32
  @include vd-input-states();
33
33
 
34
34
  &:focus-within {
35
- border-color: hs-color(fg-go-default);
36
- box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
35
+ border-color: hs-color(border-go-default);
36
+ box-shadow: 0 0 $vd-shadow-blur hs-color(border-go-default);
37
37
  }
38
38
 
39
39
  .vd-lozenge {
package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss CHANGED
@@ -1 +1 @@
1
- $vd-colour-overlay: hs-color(overlay-dark-default);
1
+ $vd-colour-overlay: hs-color(overlay-neutral-strong);
package/src/vend.ui/components/vd-popover/vd-popover.scss CHANGED
@@ -71,7 +71,7 @@
71
71
  .vd-popover {
72
72
  position: relative;
73
73
  border-radius: $vd-popover-border-radius;
74
- filter: drop-shadow(0 4px 5px hs-color(overlay-dark-default));
74
+ filter: drop-shadow(0 4px 5px hs-color(overlay-neutral-strong));
75
75
  background-color: hs-color(bg-neutral-top);
76
76
 
77
77
  .vd-popover-tether-pinned-bottom & {
package/src/vend.ui/components/vd-radio/vd-radio.scss CHANGED
@@ -92,7 +92,7 @@
92
92
  .vd-radio-input:checked + .vd-radio-tick {
93
93
  transition: background-color $vd-time-l;
94
94
  background-color: hs-color(bg-go-default);
95
- border-color: hs-color(fg-go-default);
95
+ border-color: hs-color(bg-go-default);
96
96
 
97
97
  &:after {
98
98
  opacity: 1;
package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  &::before {
31
31
  content: '';
32
- box-shadow: 0 0 $vd-scrollable-indicator-height hs-color(overlay-dark-default);
32
+ box-shadow: 0 0 $vd-scrollable-indicator-height hs-color(overlay-neutral-strong);
33
33
  border-radius: 100%;
34
34
  width: 100%;
35
35
  height: 100%;
package/src/vend.ui/components/vd-section/vd-section.scss CHANGED
@@ -61,7 +61,7 @@ vd-section,
61
61
  .vd-section--secondary {
62
62
  &,
63
63
  .vd-section-container {
64
- background-color: hs-color(border-neutral-soft);
64
+ background-color: hs-color(bg-neutral-edge);
65
65
  }
66
66
  }
67
67
 
@@ -104,7 +104,7 @@ vd-section,
104
104
  .vd-section--action-bar {
105
105
  &,
106
106
  .vd-section-container {
107
- background-color: hs-color(border-neutral-soft);
107
+ background-color: hs-color(bg-neutral-edge);
108
108
  }
109
109
 
110
110
  .vd-section-wrap {
package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  .vd-segcontrol--selected {
23
23
  .vd-segcontrol-button {
24
- border-color: hs-color(fg-go-default) !important;
24
+ border-color: hs-color(border-go-default) !important;
25
25
  z-index: 3;
26
26
  }
27
27
  }
package/src/vend.ui/components/vd-select/vd-select.scss CHANGED
@@ -9,9 +9,9 @@
9
9
  // can just be added to the input.
10
10
  &.vd-error {
11
11
  .vd-select {
12
- border-color: hs-color(fg-no-default);
12
+ border-color: hs-color(border-no-default);
13
13
  &:focus {
14
- box-shadow: 0 0 $vd-shadow-blur hs-color(fg-no-default);
14
+ box-shadow: 0 0 $vd-shadow-blur hs-color(border-no-default);
15
15
  }
16
16
  }
17
17
  }
package/src/vend.ui/components/vd-switch/vd-switch.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  height: $trackHeightBig;
22
22
  border-radius: vd-grid-unit(9);
23
23
  box-sizing: border-box;
24
- border: 2px solid hs-color(fg-go-default);
24
+ border: 2px solid hs-color(bg-go-default);
25
25
  background-color: hs-color(bg-neutral-top);
26
26
  transition: background-color $vd-time-m ease-in-out;
27
27
 
@@ -69,7 +69,7 @@
69
69
  float: left;
70
70
  border-radius: inherit;
71
71
  box-sizing: border-box;
72
- border: 2px solid hs-color(fg-go-default);
72
+ border: 2px solid hs-color(bg-go-default);
73
73
  background-color: hs-color(bg-neutral-top);
74
74
  pointer-events: none;
75
75
  width: $knobWidthBig;
package/src/vend.ui/components/vd-table/vd-table-ns.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $vd-colour-table-tr-hover-background: hs-color(bg-go-highlight-default);
2
- $vd-colour-table-expanded-border-left: hs-color(fg-go-default);
2
+ $vd-colour-table-expanded-border-left: hs-color(border-go-default);
3
3
 
4
4
  // Compact tables are deprecated, since subtext size has changed globally
5
5
  // we now have a local variable for compact tables until its replaced with normal tables
package/src/vend.ui/styles/global/_helper-mixins.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  right: 1em;
20
20
  content: '';
21
21
  bottom: 0;
22
- box-shadow: 0 0.1em 4em 0 hs-color(overlay-dark-default);
22
+ box-shadow: 0 0.1em 4em 0 hs-color(overlay-neutral-strong);
23
23
  }
24
24
  }
25
25
 
package/src/vend.ui/styles/global/_misc.scss CHANGED
@@ -7,7 +7,7 @@ $vd-border-types: (keyline, keyline-inverse, framing, framing-inverse);
7
7
  $vd-opacity: 0.35;
8
8
  $vd-shadow-blur: 3px !default;
9
9
  $vd-shadow-spread: 2px !default;
10
- $vd-box-shadow: 0 4px 10px hs-color(overlay-dark-default);
10
+ $vd-box-shadow: 0 4px 10px hs-color(overlay-neutral-strong);
11
11
 
12
12
  // Shared navi non-styles
13
13
  $vd-topbar-height: 50px;