@lightspeed/design-system-css 27.2.1 → 29.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.css +420 -420
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +420 -420
- package/package.json +1 -1
- package/src/vend-styles/components/Carousel/Carousel.scss +3 -3
- package/src/vend-styles/components/DataTable/DataTable.scss +7 -7
- package/src/vend-styles/components/DatePicker/DatePicker.scss +4 -4
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +5 -5
- package/src/vend-styles/components/LineChart/LineChart.scss +8 -8
- package/src/vend-styles/components/Modal/Modal.scss +1 -1
- package/src/vend-styles/components/ProgressBar/ProgressBar.scss +2 -2
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
- package/src/vend-styles/components/TableList/TableList.scss +9 -9
- package/src/vend-styles/components/TableList/_TableList-ns.scss +1 -1
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +4 -4
- package/src/vend-styles/components/VendVideo/VendVideo.scss +3 -3
- package/src/vend-styles/utilities/sticky.scss +2 -2
- package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +1 -1
- package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +1 -1
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +1 -1
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +4 -4
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +3 -3
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +5 -5
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +2 -2
- package/src/vend.ui/components/vd-banner/vd-banner.scss +3 -3
- package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +13 -13
- package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss +2 -0
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +8 -8
- package/src/vend.ui/components/vd-btn/vd-btn.scss +1 -1
- package/src/vend.ui/components/vd-card/vd-card-ns.scss +1 -1
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -3
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +7 -7
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +6 -6
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +8 -8
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +1 -1
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +2 -2
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +1 -1
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +8 -8
- package/src/vend.ui/components/vd-dott/vd-dott.scss +7 -7
- package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +1 -1
- package/src/vend.ui/components/vd-flag/vd-flag.scss +4 -4
- package/src/vend.ui/components/vd-header/vd-header.scss +1 -1
- package/src/vend.ui/components/vd-hero/vd-hero.scss +4 -4
- package/src/vend.ui/components/vd-hr/vd-hr.scss +1 -1
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +1 -1
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +7 -7
- package/src/vend.ui/components/vd-input/vd-input.scss +2 -2
- package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +1 -1
- package/src/vend.ui/components/vd-link/vd-link.scss +3 -3
- package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
- package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +6 -6
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +2 -2
- package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
- package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +2 -2
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
- package/src/vend.ui/components/vd-panel/vd-panel.scss +2 -2
- package/src/vend.ui/components/vd-password/vd-password.scss +1 -1
- package/src/vend.ui/components/vd-popover/vd-popover.scss +4 -4
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +6 -6
- package/src/vend.ui/components/vd-radio/vd-radio.scss +7 -7
- package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
- package/src/vend.ui/components/vd-section/vd-section.scss +3 -3
- package/src/vend.ui/components/vd-section-back/vd-section-back.scss +2 -2
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +7 -7
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +1 -1
- package/src/vend.ui/components/vd-select/vd-select-ns.scss +1 -1
- package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
- package/src/vend.ui/components/vd-splash/vd-splash.scss +1 -1
- package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +2 -2
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +3 -3
- package/src/vend.ui/components/vd-switch/vd-switch.scss +8 -8
- package/src/vend.ui/components/vd-table/vd-table-ns.scss +2 -2
- package/src/vend.ui/components/vd-table/vd-table.scss +8 -8
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +4 -4
- package/src/vend.ui/components/vd-text/vd-text.scss +4 -4
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +3 -3
- package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +6 -6
- package/src/vend.ui/styles/global/_base-mixins.scss +1 -1
- package/src/vend.ui/styles/global/_helper-mixins.scss +1 -1
- package/src/vend.ui/styles/global/_misc.scss +2 -2
- package/src/vend.ui/styles/global/_normalise.scss +1 -1
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +72 -16
- package/src/vend.ui/styles/global/colour/_colour-helpers.scss +4 -2
- package/src/vend.ui/styles/global/effects/_effects.scss +1 -1
- package/src/vend.ui/styles/global/text/_text-mixins.scss +1 -1
package/package.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"name":"@lightspeed/design-system-css","version":"
|
1
|
+
{"name":"@lightspeed/design-system-css","version":"29.0.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":"^29.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
|
@@ -75,7 +75,7 @@
|
|
75
75
|
display: flex;
|
76
76
|
flex-direction: row;
|
77
77
|
justify-content: space-between;
|
78
|
-
background-color:
|
78
|
+
background-color: hs-color(bg-neutral-top);
|
79
79
|
padding-top: 8px;
|
80
80
|
height: auto;
|
81
81
|
}
|
@@ -104,11 +104,11 @@
|
|
104
104
|
width: 8px;
|
105
105
|
height: 8px;
|
106
106
|
border-radius: 50%;
|
107
|
-
background-color:
|
107
|
+
background-color: hs-color(border-neutral-strong);
|
108
108
|
}
|
109
109
|
}
|
110
110
|
|
111
111
|
.vd-carousel-paginator-indicator--active::before {
|
112
|
-
background-color:
|
112
|
+
background-color: hs-color(bg-go-default);
|
113
113
|
}
|
114
114
|
}
|
@@ -49,10 +49,10 @@
|
|
49
49
|
// -----------------------------------------------------------------
|
50
50
|
.vd-datatable-row {
|
51
51
|
&:nth-child(odd) {
|
52
|
-
background-color:
|
52
|
+
background-color: hs-color(bg-neutral-backdrop);
|
53
53
|
}
|
54
54
|
&:nth-child(even) {
|
55
|
-
background-color:
|
55
|
+
background-color: hs-color(bg-neutral-top);
|
56
56
|
}
|
57
57
|
}
|
58
58
|
|
@@ -63,7 +63,7 @@
|
|
63
63
|
|
64
64
|
&:nth-child(odd),
|
65
65
|
&:nth-child(even) {
|
66
|
-
background-color:
|
66
|
+
background-color: hs-color(bg-neutral-top);
|
67
67
|
}
|
68
68
|
}
|
69
69
|
|
@@ -72,7 +72,7 @@
|
|
72
72
|
|
73
73
|
&:nth-child(odd),
|
74
74
|
&:nth-child(even) {
|
75
|
-
background-color:
|
75
|
+
background-color: hs-color(border-neutral-soft);
|
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:
|
84
|
+
background-color: hs-color(border-neutral-soft);
|
85
85
|
}
|
86
86
|
}
|
87
87
|
|
@@ -93,7 +93,7 @@
|
|
93
93
|
}
|
94
94
|
|
95
95
|
.vd-datatable-foot.vd-sticky--stuck & {
|
96
|
-
border-bottom-color:
|
96
|
+
border-bottom-color: hs-color(border-neutral-strong);
|
97
97
|
border-radius: 0;
|
98
98
|
}
|
99
99
|
}
|
@@ -109,7 +109,7 @@
|
|
109
109
|
left: 0;
|
110
110
|
width: 100%;
|
111
111
|
height: 30px;
|
112
|
-
box-shadow: inset 0 -30px 40px -48px
|
112
|
+
box-shadow: inset 0 -30px 40px -48px hs-color(overlay-dark-default);
|
113
113
|
}
|
114
114
|
}
|
115
115
|
|
@@ -182,8 +182,8 @@
|
|
182
182
|
.react-datepicker__day--range-end,
|
183
183
|
.react-datepicker__day--selected {
|
184
184
|
.vd-datepicker-day-button {
|
185
|
-
background:
|
186
|
-
color:
|
185
|
+
background: hs-color(bg-go-default);
|
186
|
+
color: hs-color(bg-neutral-top);
|
187
187
|
font-weight: $vd-font-weight--bold;
|
188
188
|
border: none;
|
189
189
|
}
|
@@ -191,7 +191,7 @@
|
|
191
191
|
|
192
192
|
.react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
|
193
193
|
.vd-datepicker-day-button:hover {
|
194
|
-
background: vd-rgba(
|
194
|
+
background: vd-rgba(hs-color(bg-go-default-rgb), 0.35);
|
195
195
|
}
|
196
196
|
}
|
197
197
|
|
@@ -202,7 +202,7 @@
|
|
202
202
|
|
203
203
|
// Highlight today
|
204
204
|
.react-datepicker__day--today {
|
205
|
-
color:
|
205
|
+
color: hs-color(fg-go-default);
|
206
206
|
font-weight: $vd-font-weight--bold;
|
207
207
|
}
|
208
208
|
|
@@ -1,13 +1,13 @@
|
|
1
1
|
// Date picker general
|
2
2
|
$vd-datepicker-font-size: 15px;
|
3
|
-
$vd-datepicker-button-colour:
|
3
|
+
$vd-datepicker-button-colour: hs-color(fg-go-default);
|
4
4
|
$vd-datepicker-padding: 24px;
|
5
|
-
$vd-datepicker-background:
|
5
|
+
$vd-datepicker-background: hs-color(bg-neutral-top);
|
6
6
|
$vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
|
7
7
|
|
8
8
|
// Grid
|
9
9
|
$vd-datepicker-day-spacing: 10px;
|
10
|
-
$vd-datepicker-range-colour:
|
10
|
+
$vd-datepicker-range-colour: hs-color(bg-go-highlight-default);
|
11
11
|
|
12
12
|
// Button
|
13
13
|
$vd-datepicker-button-radius: 50%;
|
@@ -16,8 +16,8 @@ $vd-datepicker-button-size: 30px;
|
|
16
16
|
// Button next / prev
|
17
17
|
$vd-datepicker-next-prev-button-width: 26px;
|
18
18
|
$vd-datepicker-next-prev-button-icon-size: 7px;
|
19
|
-
$vd-datepicker-next-prev-arrow-border-enabled: 3px solid
|
20
|
-
$vd-datepicker-next-prev-arrow-border-disabled: 3px solid
|
19
|
+
$vd-datepicker-next-prev-arrow-border-enabled: 3px solid hs-color(fg-neutral-default);
|
20
|
+
$vd-datepicker-next-prev-arrow-border-disabled: 3px solid hs-color(border-neutral-soft);
|
21
21
|
|
22
22
|
// Date range picker granularity input
|
23
23
|
$vd-datepicker-range-granularity-input-width: 153px;
|
@@ -16,7 +16,7 @@ $chart-bg: #fafafa;
|
|
16
16
|
}
|
17
17
|
|
18
18
|
.tick line {
|
19
|
-
stroke:
|
19
|
+
stroke: hs-color(border-neutral-soft);
|
20
20
|
stroke-width: 1px;
|
21
21
|
fill: transparent;
|
22
22
|
}
|
@@ -32,13 +32,13 @@ $chart-bg: #fafafa;
|
|
32
32
|
}
|
33
33
|
|
34
34
|
.vd-grid-zero-tick {
|
35
|
-
stroke:
|
35
|
+
stroke: hs-color(border-neutral-strong);
|
36
36
|
}
|
37
37
|
|
38
38
|
.vd-line {
|
39
39
|
fill: transparent;
|
40
40
|
stroke-width: 2px;
|
41
|
-
stroke:
|
41
|
+
stroke: hs-color(border-neutral-strong);
|
42
42
|
}
|
43
43
|
|
44
44
|
.vd-line-with-fill {
|
@@ -54,8 +54,8 @@ $chart-bg: #fafafa;
|
|
54
54
|
}
|
55
55
|
|
56
56
|
.vd-plot-point {
|
57
|
-
fill:
|
58
|
-
stroke:
|
57
|
+
fill: hs-color(fg-go-default);
|
58
|
+
stroke: hs-color(bg-neutral-top);
|
59
59
|
stroke-width: 2px;
|
60
60
|
}
|
61
61
|
|
@@ -71,7 +71,7 @@ $chart-bg: #fafafa;
|
|
71
71
|
|
72
72
|
.vd-line-wrapper-main {
|
73
73
|
.vd-line {
|
74
|
-
stroke:
|
74
|
+
stroke: hs-color(bg-supplementary-default);
|
75
75
|
}
|
76
76
|
}
|
77
77
|
|
@@ -84,12 +84,12 @@ $chart-bg: #fafafa;
|
|
84
84
|
|
85
85
|
.vd-line-label {
|
86
86
|
@include vd-text(mini-signpost);
|
87
|
-
fill:
|
87
|
+
fill: hs-color(border-neutral-strong);
|
88
88
|
}
|
89
89
|
.vd-axis {
|
90
90
|
.tick text {
|
91
91
|
@include vd-text(mini-copy);
|
92
|
-
fill:
|
92
|
+
fill: hs-color(fg-neutral-default);
|
93
93
|
}
|
94
94
|
}
|
95
95
|
}
|
@@ -9,13 +9,13 @@
|
|
9
9
|
height: 10px;
|
10
10
|
width: 100%;
|
11
11
|
border-radius: 5px;
|
12
|
-
background-color:
|
12
|
+
background-color: hs-color(border-neutral-soft);
|
13
13
|
overflow: hidden;
|
14
14
|
}
|
15
15
|
|
16
16
|
.vs-progress-bar {
|
17
17
|
height: 100%;
|
18
18
|
width: 0%;
|
19
|
-
background-color:
|
19
|
+
background-color: hs-color(bg-go-default);
|
20
20
|
transition: width 0.6s ease;
|
21
21
|
}
|
@@ -11,7 +11,7 @@
|
|
11
11
|
display: flex;
|
12
12
|
padding-top: 6px;
|
13
13
|
padding-bottom: 6px;
|
14
|
-
border-bottom: 1px solid
|
14
|
+
border-bottom: 1px solid hs-color(border-neutral-strong);
|
15
15
|
justify-content: space-between;
|
16
16
|
align-items: center;
|
17
17
|
min-height: 60px;
|
@@ -93,7 +93,7 @@
|
|
93
93
|
}
|
94
94
|
|
95
95
|
.vd-table-list-toggle-icon {
|
96
|
-
color:
|
96
|
+
color: hs-color(bg-supplementary-default);
|
97
97
|
transition: transform 50ms ease-in-out 0s;
|
98
98
|
width: 16px;
|
99
99
|
height: 16px;
|
@@ -170,7 +170,7 @@
|
|
170
170
|
.vd-table-list-row {
|
171
171
|
border-bottom: 1px solid hs-color(border-neutral-soft);
|
172
172
|
&.vd-table-list-row--active {
|
173
|
-
background-color:
|
173
|
+
background-color: hs-color(bg-go-highlight-default);
|
174
174
|
}
|
175
175
|
}
|
176
176
|
|
@@ -179,14 +179,14 @@
|
|
179
179
|
.vd-table-list-row--expandable {
|
180
180
|
&:hover {
|
181
181
|
cursor: pointer;
|
182
|
-
background-color:
|
182
|
+
background-color: hs-color(bg-go-highlight-default);
|
183
183
|
}
|
184
184
|
}
|
185
185
|
|
186
186
|
// TABLE ROWS - EXPANDED ROW
|
187
187
|
// -----------------------------------------------------------------
|
188
188
|
.vd-table-list-row--expanded {
|
189
|
-
background:
|
189
|
+
background: hs-color(bg-neutral-top);
|
190
190
|
box-shadow: $vd-table-list-expanded-shadow;
|
191
191
|
|
192
192
|
.vd-table-list-cell:first-child {
|
@@ -202,8 +202,8 @@
|
|
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:
|
206
|
-
border-bottom: 1px solid
|
205
|
+
background-color: hs-color(border-neutral-soft);
|
206
|
+
border-bottom: 1px solid hs-color(border-neutral-strong);
|
207
207
|
}
|
208
208
|
|
209
209
|
// TABLE ROWS - EXPANDED ROW CONTENT
|
@@ -212,7 +212,7 @@
|
|
212
212
|
display: none; // @todo Perhaps not required
|
213
213
|
|
214
214
|
> .vd-table-list-cell {
|
215
|
-
background:
|
215
|
+
background: hs-color(bg-neutral-top);
|
216
216
|
padding: 0;
|
217
217
|
|
218
218
|
&:first-child {
|
@@ -236,7 +236,7 @@
|
|
236
236
|
// TABLE ROWS - HEADER ROW
|
237
237
|
// -----------------------------------------------------------------
|
238
238
|
.vd-table-list-row--header {
|
239
|
-
border-bottom-color:
|
239
|
+
border-bottom-color: hs-color(border-neutral-strong);
|
240
240
|
}
|
241
241
|
|
242
242
|
// TABLE ROWS - EXPANDED ROW INNARDS
|
@@ -12,9 +12,9 @@
|
|
12
12
|
position: absolute;
|
13
13
|
width: 100%;
|
14
14
|
height: 100%;
|
15
|
-
color:
|
16
|
-
background:
|
17
|
-
linear-gradient(to left,
|
15
|
+
color: hs-color(bg-neutral-top);
|
16
|
+
background: hs-color(bg-neutral-top)
|
17
|
+
linear-gradient(to left, hs-color(bg-neutral-top) 50%, $vd-upsell-background-colour 50%) no-repeat;
|
18
18
|
}
|
19
19
|
|
20
20
|
.vd-upsell-primary-background-inner {
|
@@ -28,7 +28,7 @@
|
|
28
28
|
|
29
29
|
.vd-upsell-primary-upper {
|
30
30
|
position: relative;
|
31
|
-
background-color:
|
31
|
+
background-color: hs-color(bg-neutral-top);
|
32
32
|
}
|
33
33
|
|
34
34
|
.vd-upsell-primary-background svg {
|
@@ -12,7 +12,7 @@
|
|
12
12
|
bottom: 0;
|
13
13
|
margin: auto;
|
14
14
|
.vd-video-play-button {
|
15
|
-
background-color:
|
15
|
+
background-color: hs-color(bg-neutral-backdrop);
|
16
16
|
width: 80px;
|
17
17
|
height: 80px;
|
18
18
|
border-radius: 50%;
|
@@ -21,10 +21,10 @@
|
|
21
21
|
}
|
22
22
|
}
|
23
23
|
.vd-video-play-button:hover {
|
24
|
-
background-color:
|
24
|
+
background-color: hs-color(bg-supplementary-default);
|
25
25
|
}
|
26
26
|
.vd-video-play-button:active {
|
27
|
-
background-color:
|
27
|
+
background-color: hs-color(bg-supplementary-default);
|
28
28
|
}
|
29
29
|
}
|
30
30
|
.vd-video-thumbnail-image {
|
@@ -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
|
-
|
13
|
+
hs-color(overlay-dark-default);
|
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
|
-
|
22
|
+
hs-color(overlay-dark-default);
|
23
23
|
}
|
24
24
|
}
|
25
25
|
|
@@ -66,7 +66,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
|
|
66
66
|
z-index: 1;
|
67
67
|
margin-left: $vd-autocomplete-filter-icon-margin;
|
68
68
|
margin-top: $vd-autocomplete-filter-icon-margin;
|
69
|
-
color:
|
69
|
+
color: hs-color(bg-supplementary-default);
|
70
70
|
}
|
71
71
|
|
72
72
|
.vd-autocomplete-filter-button-label {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
.vd-avatar {
|
2
|
-
background-color:
|
2
|
+
background-color: hs-color(border-neutral-soft);
|
3
3
|
background-repeat: no-repeat;
|
4
4
|
background-size: cover;
|
5
5
|
background-position: center;
|
@@ -24,11 +24,11 @@
|
|
24
24
|
|
25
25
|
&.vd-avatar--deleted-image {
|
26
26
|
@include disabled();
|
27
|
-
background-color:
|
27
|
+
background-color: hs-color(bg-no-default);
|
28
28
|
}
|
29
29
|
|
30
30
|
.deleted-state-icon {
|
31
|
-
color:
|
31
|
+
color: hs-color(bg-neutral-top);
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
@@ -37,7 +37,7 @@
|
|
37
37
|
|
38
38
|
word-wrap: normal;
|
39
39
|
word-break: normal;
|
40
|
-
color:
|
40
|
+
color: hs-color(fg-neutral-ondark-default);
|
41
41
|
text-align: center;
|
42
42
|
|
43
43
|
&.vd-avatar--x-small {
|
@@ -9,7 +9,7 @@
|
|
9
9
|
background-repeat: no-repeat;
|
10
10
|
background-size: cover;
|
11
11
|
background-position: center center;
|
12
|
-
background-color:
|
12
|
+
background-color: hs-color(border-neutral-soft);
|
13
13
|
position: relative;
|
14
14
|
|
15
15
|
// Ensure placeholder backgrounds are the same size regardless of tile size
|
@@ -19,7 +19,7 @@
|
|
19
19
|
}
|
20
20
|
|
21
21
|
.vd-avatar-multi-tile--remainder {
|
22
|
-
background-color:
|
22
|
+
background-color: hs-color(border-neutral-strong);
|
23
23
|
}
|
24
24
|
|
25
25
|
.vd-avatar-multi-count {
|
@@ -64,7 +64,7 @@
|
|
64
64
|
|
65
65
|
.vd-avatar-multi-tile {
|
66
66
|
flex: 1 1 50%;
|
67
|
-
border: ($vd-avatar-multi-size-gap * 0.5) solid
|
67
|
+
border: ($vd-avatar-multi-size-gap * 0.5) solid hs-color(bg-neutral-top);
|
68
68
|
border-radius: 5px;
|
69
69
|
}
|
70
70
|
}
|
@@ -37,12 +37,12 @@
|
|
37
37
|
&:active,
|
38
38
|
&:focus {
|
39
39
|
outline: none;
|
40
|
-
background-color:
|
40
|
+
background-color: hs-color(bg-go-highlight-default);
|
41
41
|
}
|
42
42
|
}
|
43
43
|
|
44
44
|
&.vd-id-badge--current {
|
45
|
-
border-color:
|
45
|
+
border-color: hs-color(fg-go-default);
|
46
46
|
}
|
47
47
|
|
48
48
|
&.vd-id-badge--small {
|
@@ -78,7 +78,7 @@
|
|
78
78
|
outline: none;
|
79
79
|
|
80
80
|
.vd-id-badge__header-title {
|
81
|
-
color:
|
81
|
+
color: hs-color(fg-go-default);
|
82
82
|
}
|
83
83
|
}
|
84
84
|
}
|
@@ -133,7 +133,7 @@
|
|
133
133
|
justify-content: center;
|
134
134
|
flex: 1;
|
135
135
|
word-break: break-word;
|
136
|
-
color:
|
136
|
+
color: hs-color(fg-neutral-default);
|
137
137
|
@include vd-text(body);
|
138
138
|
}
|
139
139
|
|
@@ -146,7 +146,7 @@
|
|
146
146
|
}
|
147
147
|
|
148
148
|
.vd-id-badge__image {
|
149
|
-
background-color:
|
149
|
+
background-color: hs-color(border-neutral-soft);
|
150
150
|
background-repeat: no-repeat;
|
151
151
|
background-size: contain;
|
152
152
|
background-position: center;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
@mixin vd-banner(
|
2
2
|
$primary-colour,
|
3
|
-
$text-colour:
|
4
|
-
$anchor-colour:
|
3
|
+
$text-colour: hs-color(fg-neutral-ondark-default),
|
4
|
+
$anchor-colour: hs-color(fg-neutral-ondark-default)
|
5
5
|
) {
|
6
6
|
background-color: $primary-colour;
|
7
7
|
color: $text-colour;
|
@@ -66,13 +66,13 @@
|
|
66
66
|
|
67
67
|
.vd-banner--info,
|
68
68
|
.vd-banner--activation {
|
69
|
-
@include vd-banner(
|
69
|
+
@include vd-banner(hs-color(bg-supplementary-default));
|
70
70
|
}
|
71
71
|
.vd-banner--negative {
|
72
|
-
@include vd-banner(
|
72
|
+
@include vd-banner(hs-color(fg-no-default));
|
73
73
|
}
|
74
74
|
.vd-banner--success {
|
75
|
-
@include vd-banner(
|
75
|
+
@include vd-banner(hs-color(fg-success-default));
|
76
76
|
}
|
77
77
|
|
78
78
|
@include vd-viewport-media-max(medium) {
|
@@ -21,7 +21,7 @@
|
|
21
21
|
//
|
22
22
|
@mixin vd-btn-shadow($_vd-colour-name) {
|
23
23
|
box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread
|
24
|
-
vd-rgba(
|
24
|
+
vd-rgba(hs-get-action-color(#{$_vd-colour-name}-rgb, bg), $vd-opacity);
|
25
25
|
}
|
26
26
|
|
27
27
|
// Applies a box shadow with an outline in the provided primary colour.
|
@@ -31,9 +31,9 @@
|
|
31
31
|
// @param {String} $_vd-colour-name - the button colour to use for the outline.
|
32
32
|
//
|
33
33
|
@mixin vd-btn-outline-shadow($_vd-colour-name) {
|
34
|
-
$_vd-requested-color:
|
34
|
+
$_vd-requested-color: hs-get-action-color(#{$_vd-colour-name}-rgb, bg);
|
35
35
|
|
36
|
-
box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(
|
36
|
+
box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top), 0.8),
|
37
37
|
0 0 $vd-shadow-blur #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, $vd-opacity),
|
38
38
|
0 0 0 #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, 0.6);
|
39
39
|
}
|
@@ -47,19 +47,19 @@
|
|
47
47
|
@mixin vd-btn-states($_vd-colour-name, $_vd-use-default-hover: false) {
|
48
48
|
@include vd-hover-when-supported {
|
49
49
|
&:hover {
|
50
|
-
color:
|
50
|
+
color: hs-color(fg-neutral-ondark-default);
|
51
51
|
@if ($_vd-use-default-hover) {
|
52
|
-
background-color:
|
52
|
+
background-color: hs-get-action-color($_vd-colour-name, bg);
|
53
53
|
} @else {
|
54
|
-
background-color:
|
54
|
+
background-color: hs-get-action-color(#{$_vd-colour-name}-lighter, bg);
|
55
55
|
}
|
56
56
|
}
|
57
57
|
}
|
58
58
|
|
59
59
|
&:active,
|
60
60
|
&.vd-btn--active {
|
61
|
-
color:
|
62
|
-
background-color:
|
61
|
+
color: hs-color(fg-neutral-ondark-default);
|
62
|
+
background-color: hs-get-action-color(#{$_vd-colour-name}-darker, bg);
|
63
63
|
@include vd-btn-shadow($_vd-colour-name);
|
64
64
|
}
|
65
65
|
|
@@ -77,8 +77,8 @@
|
|
77
77
|
// @param {String} $_vd-colour-name - the button colour.
|
78
78
|
//
|
79
79
|
@mixin vd-btn($_vd-colour-name) {
|
80
|
-
background-color:
|
81
|
-
color:
|
80
|
+
background-color: hs-get-action-color($_vd-colour-name, bg);
|
81
|
+
color: hs-color(fg-neutral-ondark-default);
|
82
82
|
|
83
83
|
@include vd-btn-states($_vd-colour-name);
|
84
84
|
}
|
@@ -94,7 +94,7 @@
|
|
94
94
|
//
|
95
95
|
@mixin vd-btn-text($_vd-colour-name) {
|
96
96
|
background-color: transparent;
|
97
|
-
color:
|
97
|
+
color: hs-get-action-color($_vd-colour-name, fg);
|
98
98
|
|
99
99
|
@include vd-btn-states($_vd-colour-name, true);
|
100
100
|
}
|
@@ -112,9 +112,9 @@
|
|
112
112
|
|
113
113
|
// Button icons with a "go" category have different colour when resting
|
114
114
|
@if ($_vd-colour-name == go) {
|
115
|
-
color:
|
115
|
+
color: hs-get-action-color($_vd-colour-name, fg);
|
116
116
|
} @else {
|
117
|
-
color:
|
117
|
+
color: hs-color(fg-supplementary-default);
|
118
118
|
}
|
119
119
|
|
120
120
|
@include vd-btn-states($_vd-colour-name, true);
|
@@ -1,5 +1,7 @@
|
|
1
1
|
$vd-btn-group-margin: vd-grid-unit(1);
|
2
2
|
$vd-btn-stroke-width: 1px !default;
|
3
|
+
// @TODO remove `do` color option. While React components no longer support `do`, we still need to keen the `vd-btn--do**` classes that are generated. Consuming apps still reference
|
4
|
+
// and use these - including VEND.UI.
|
3
5
|
$vd-btn-categories: (do, supplementary, no, go);
|
4
6
|
$vd-btn-icon-font-size: 18px;
|
5
7
|
$vd-btn-padding: vd-grid-unit(3) vd-grid-unit(5);
|