@lightspeed/design-system-css 31.0.1 → 32.1.0

Sign up to get free protection for your applications and to get access to all the features.
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;