@ebay/skin 19.11.0 → 19.12.1
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.
- package/dist/bundles/skin-default.css +158 -98
- package/dist/bundles/skin-full.css +169 -116
- package/dist/bundles/skin-headless.css +147 -80
- package/dist/button/button.css +164 -130
- package/dist/cta-button/cta-button.css +4 -1
- package/dist/drawer-dialog/drawer-dialog.css +1 -0
- package/dist/fullscreen-dialog/fullscreen-dialog.css +1 -0
- package/dist/mixins/_animation-mixins.scss +2 -41
- package/dist/mixins/_animation.scss +41 -0
- package/dist/mixins/_title.scss +42 -0
- package/dist/mixins/_typography-mixins.scss +3 -136
- package/dist/mixins/_typography.scss +92 -0
- package/dist/mixins/_utility-mixins.scss +2 -97
- package/dist/mixins/_utility.scss +98 -0
- package/dist/mixins/typography-mixins.less +2 -0
- package/dist/mixins/utility-mixins.less +2 -0
- package/dist/tokens/evo-dark.css +11 -18
- package/dist/tokens/evo-light.css +11 -18
- package/dist/variables/_variables.scss +20 -1
- package/mixins.scss +4 -0
- package/package.json +2 -2
|
@@ -1,136 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
line-height: 52px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
@mixin typography-giant-2() {
|
|
8
|
-
font-size: var(--font-size-giant-2);
|
|
9
|
-
font-weight: var(--font-weight-bold);
|
|
10
|
-
line-height: 46px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@mixin typography-giant-1() {
|
|
14
|
-
font-size: var(--font-size-giant-1);
|
|
15
|
-
font-weight: var(--font-weight-bold);
|
|
16
|
-
line-height: 40px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@mixin typography-large-2() {
|
|
20
|
-
font-size: var(--font-size-large-2);
|
|
21
|
-
font-weight: var(--font-weight-bold);
|
|
22
|
-
line-height: 32px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@mixin typography-large-2-secondary() {
|
|
26
|
-
@include typography-large-2();
|
|
27
|
-
|
|
28
|
-
color: var(--color-foreground-secondary);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin typography-large-1() {
|
|
32
|
-
font-size: var(--font-size-large-1);
|
|
33
|
-
font-weight: var(--font-weight-bold);
|
|
34
|
-
line-height: 28px;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@mixin typography-large-1-secondary() {
|
|
38
|
-
@include typography-large-1();
|
|
39
|
-
|
|
40
|
-
color: var(--color-foreground-secondary);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@mixin typography-medium() {
|
|
44
|
-
font-size: var(--font-size-medium);
|
|
45
|
-
line-height: 24px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@mixin typography-medium-bold() {
|
|
49
|
-
@include typography-medium();
|
|
50
|
-
|
|
51
|
-
font-weight: var(--font-weight-bold);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@mixin typography-medium-secondary() {
|
|
55
|
-
@include typography-medium();
|
|
56
|
-
|
|
57
|
-
color: var(--color-foreground-secondary);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@mixin typography-regular() {
|
|
61
|
-
font-size: var(--font-size-default);
|
|
62
|
-
line-height: 20px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@mixin typography-regular-bold() {
|
|
66
|
-
@include typography-regular();
|
|
67
|
-
|
|
68
|
-
font-weight: var(--font-weight-bold);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
@mixin typography-regular-secondary() {
|
|
72
|
-
@include typography-regular();
|
|
73
|
-
|
|
74
|
-
color: var(--color-foreground-secondary);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@mixin typography-small() {
|
|
78
|
-
font-size: var(--font-size-small);
|
|
79
|
-
line-height: 16px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
@mixin typography-small-bold() {
|
|
83
|
-
@include typography-small();
|
|
84
|
-
|
|
85
|
-
font-weight: var(--font-weight-bold);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@mixin typography-small-secondary() {
|
|
89
|
-
@include typography-small();
|
|
90
|
-
|
|
91
|
-
color: var(--color-foreground-secondary);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* large screen titles */
|
|
95
|
-
|
|
96
|
-
@mixin title-giant-screen-large() {
|
|
97
|
-
font-size: var(--font-size-giant-1);
|
|
98
|
-
line-height: 36px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@mixin title-large-screen-large() {
|
|
102
|
-
font-size: var(--font-size-large-2);
|
|
103
|
-
line-height: 30px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
@mixin title-medium-screen-large() {
|
|
107
|
-
font-size: var(--font-size-large-1);
|
|
108
|
-
line-height: 24px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
@mixin title-small-screen-large() {
|
|
112
|
-
font-size: var(--font-size-medium);
|
|
113
|
-
line-height: 20px;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/* small screen titles */
|
|
117
|
-
|
|
118
|
-
@mixin title-giant-screen-small() {
|
|
119
|
-
font-size: var(--font-size-large-2);
|
|
120
|
-
line-height: 30px;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
@mixin title-large-screen-small() {
|
|
124
|
-
font-size: var(--font-size-large-1);
|
|
125
|
-
line-height: 24px;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
@mixin title-medium-screen-small() {
|
|
129
|
-
font-size: var(--font-size-medium);
|
|
130
|
-
line-height: 20px;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
@mixin title-small-screen-small() {
|
|
134
|
-
font-size: var(--font-size-default);
|
|
135
|
-
line-height: 16px;
|
|
136
|
-
}
|
|
1
|
+
// Deprecated, use typography and title instead
|
|
2
|
+
@forward "./typography" as typography-*;
|
|
3
|
+
@forward "./title" as title-*;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
@mixin giant-3() {
|
|
2
|
+
font-size: var(--font-size-giant-3);
|
|
3
|
+
font-weight: var(--font-weight-bold);
|
|
4
|
+
line-height: 52px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@mixin giant-2() {
|
|
8
|
+
font-size: var(--font-size-giant-2);
|
|
9
|
+
font-weight: var(--font-weight-bold);
|
|
10
|
+
line-height: 46px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin giant-1() {
|
|
14
|
+
font-size: var(--font-size-giant-1);
|
|
15
|
+
font-weight: var(--font-weight-bold);
|
|
16
|
+
line-height: 40px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin large-2() {
|
|
20
|
+
font-size: var(--font-size-large-2);
|
|
21
|
+
font-weight: var(--font-weight-bold);
|
|
22
|
+
line-height: 32px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin large-2-secondary() {
|
|
26
|
+
@include large-2;
|
|
27
|
+
|
|
28
|
+
color: var(--color-foreground-secondary);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin large-1() {
|
|
32
|
+
font-size: var(--font-size-large-1);
|
|
33
|
+
font-weight: var(--font-weight-bold);
|
|
34
|
+
line-height: 28px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin large-1-secondary() {
|
|
38
|
+
@include large-1;
|
|
39
|
+
|
|
40
|
+
color: var(--color-foreground-secondary);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin medium() {
|
|
44
|
+
font-size: var(--font-size-medium);
|
|
45
|
+
line-height: 24px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@mixin medium-bold() {
|
|
49
|
+
@include medium;
|
|
50
|
+
|
|
51
|
+
font-weight: var(--font-weight-bold);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@mixin medium-secondary() {
|
|
55
|
+
@include medium;
|
|
56
|
+
|
|
57
|
+
color: var(--color-foreground-secondary);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin regular() {
|
|
61
|
+
font-size: var(--font-size-default);
|
|
62
|
+
line-height: 20px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin regular-bold() {
|
|
66
|
+
@include regular;
|
|
67
|
+
|
|
68
|
+
font-weight: var(--font-weight-bold);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin regular-secondary() {
|
|
72
|
+
@include regular;
|
|
73
|
+
|
|
74
|
+
color: var(--color-foreground-secondary);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@mixin small() {
|
|
78
|
+
font-size: var(--font-size-small);
|
|
79
|
+
line-height: 16px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@mixin small-bold() {
|
|
83
|
+
@include small;
|
|
84
|
+
|
|
85
|
+
font-weight: var(--font-weight-bold);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@mixin small-secondary() {
|
|
89
|
+
@include small;
|
|
90
|
+
|
|
91
|
+
color: var(--color-foreground-secondary);
|
|
92
|
+
}
|
|
@@ -1,98 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
border: 0;
|
|
3
|
-
clip-path: inset(50%);
|
|
4
|
-
height: 1px;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
padding: 0;
|
|
7
|
-
position: absolute;
|
|
8
|
-
white-space: nowrap;
|
|
9
|
-
width: 1px;
|
|
10
|
-
}
|
|
1
|
+
// Deprecated, use utility instead
|
|
11
2
|
|
|
12
|
-
@
|
|
13
|
-
clip-path: none;
|
|
14
|
-
height: auto;
|
|
15
|
-
overflow: visible;
|
|
16
|
-
white-space: normal;
|
|
17
|
-
width: auto;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@mixin truncate() {
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
text-overflow: ellipsis;
|
|
23
|
-
white-space: nowrap;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin image-treatment($border-radius: 8px, $display: flex) {
|
|
27
|
-
align-items: center;
|
|
28
|
-
border-radius: $border-radius;
|
|
29
|
-
display: $display;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
overflow: hidden;
|
|
32
|
-
position: relative;
|
|
33
|
-
|
|
34
|
-
&::after {
|
|
35
|
-
background: rgb(0 0 0 / 0.05);
|
|
36
|
-
bottom: 0;
|
|
37
|
-
content: "";
|
|
38
|
-
display: block;
|
|
39
|
-
left: 0;
|
|
40
|
-
pointer-events: none;
|
|
41
|
-
position: absolute;
|
|
42
|
-
right: 0;
|
|
43
|
-
top: 0;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
> img {
|
|
47
|
-
display: inline-block;
|
|
48
|
-
max-height: 100%;
|
|
49
|
-
max-width: 100%;
|
|
50
|
-
object-fit: contain;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@mixin flex-items-centered($display: flex) {
|
|
55
|
-
align-items: center;
|
|
56
|
-
display: $display;
|
|
57
|
-
justify-content: center;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@mixin inline-flex-items-centered() {
|
|
61
|
-
@include flex-items-centered(inline-flex);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@mixin scrollbars-permanent($target) {
|
|
65
|
-
#{$target} {
|
|
66
|
-
-webkit-overflow-scrolling: touch;
|
|
67
|
-
scroll-behavior: smooth;
|
|
68
|
-
/* stylelint-disable declaration-block-no-duplicate-properties */
|
|
69
|
-
-webkit-scroll-snap-type: mandatory;
|
|
70
|
-
-webkit-scroll-snap-type: x mandatory;
|
|
71
|
-
-ms-scroll-snap-type: mandatory;
|
|
72
|
-
-ms-scroll-snap-type: x mandatory;
|
|
73
|
-
scroll-snap-type: proximity;
|
|
74
|
-
scroll-snap-type: x proximity;
|
|
75
|
-
/* stylelint-enable declaration-block-no-duplicate-properties */
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
#{$target}::-webkit-scrollbar {
|
|
79
|
-
background-color: var(--color-background-faint);
|
|
80
|
-
border-radius: 12px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
#{$target}::-webkit-scrollbar:vertical {
|
|
84
|
-
width: 6px;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
#{$target}::-webkit-scrollbar:horizontal {
|
|
88
|
-
height: 6px;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
#{$target}::-webkit-scrollbar-thumb {
|
|
92
|
-
background-color: var(--color-foreground-secondary);
|
|
93
|
-
border-color: transparent;
|
|
94
|
-
border-radius: 12px;
|
|
95
|
-
border-right-style: inset;
|
|
96
|
-
box-shadow: none;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
3
|
+
@forward "./utility";
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@mixin clipped() {
|
|
2
|
+
border: 0;
|
|
3
|
+
clip-path: inset(50%);
|
|
4
|
+
height: 1px;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
padding: 0;
|
|
7
|
+
position: absolute;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
width: 1px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin unclipped() {
|
|
13
|
+
clip-path: none;
|
|
14
|
+
height: auto;
|
|
15
|
+
overflow: visible;
|
|
16
|
+
white-space: normal;
|
|
17
|
+
width: auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin truncate() {
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
text-overflow: ellipsis;
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin image-treatment($border-radius: 8px, $display: flex) {
|
|
27
|
+
align-items: center;
|
|
28
|
+
border-radius: $border-radius;
|
|
29
|
+
display: $display;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
position: relative;
|
|
33
|
+
|
|
34
|
+
&::after {
|
|
35
|
+
background: rgb(0 0 0 / 0.05);
|
|
36
|
+
bottom: 0;
|
|
37
|
+
content: "";
|
|
38
|
+
display: block;
|
|
39
|
+
left: 0;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
position: absolute;
|
|
42
|
+
right: 0;
|
|
43
|
+
top: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
> img {
|
|
47
|
+
display: inline-block;
|
|
48
|
+
max-height: 100%;
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
object-fit: contain;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@mixin flex-items-centered($display: flex) {
|
|
55
|
+
align-items: center;
|
|
56
|
+
display: $display;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin inline-flex-items-centered() {
|
|
61
|
+
@include flex-items-centered(inline-flex);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@mixin scrollbars-permanent($target) {
|
|
65
|
+
#{$target} {
|
|
66
|
+
-webkit-overflow-scrolling: touch;
|
|
67
|
+
scroll-behavior: smooth;
|
|
68
|
+
/* stylelint-disable declaration-block-no-duplicate-properties */
|
|
69
|
+
-webkit-scroll-snap-type: mandatory;
|
|
70
|
+
-webkit-scroll-snap-type: x mandatory;
|
|
71
|
+
-ms-scroll-snap-type: mandatory;
|
|
72
|
+
-ms-scroll-snap-type: x mandatory;
|
|
73
|
+
scroll-snap-type: proximity;
|
|
74
|
+
scroll-snap-type: x proximity;
|
|
75
|
+
/* stylelint-enable declaration-block-no-duplicate-properties */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
#{$target}::-webkit-scrollbar {
|
|
79
|
+
background-color: var(--color-background-faint);
|
|
80
|
+
border-radius: 12px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
#{$target}::-webkit-scrollbar:vertical {
|
|
84
|
+
width: 6px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
#{$target}::-webkit-scrollbar:horizontal {
|
|
88
|
+
height: 6px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#{$target}::-webkit-scrollbar-thumb {
|
|
92
|
+
background-color: var(--color-foreground-secondary);
|
|
93
|
+
border-color: transparent;
|
|
94
|
+
border-radius: 12px;
|
|
95
|
+
border-right-style: inset;
|
|
96
|
+
box-shadow: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
package/dist/tokens/evo-dark.css
CHANGED
|
@@ -89,19 +89,20 @@
|
|
|
89
89
|
--color-data-viz-tooltip-shadow-secondary: #ffffff2b;
|
|
90
90
|
--color-scrim-image: rgba(255, 255, 255, 0.12);
|
|
91
91
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
92
|
-
--state-layer-
|
|
92
|
+
--state-layer-neutral: rgb(var(--color-neutral-100-rgb), 0);
|
|
93
|
+
--state-layer-focus: rgb(
|
|
93
94
|
var(--color-neutral-100-rgb),
|
|
94
95
|
var(--opacity-50)
|
|
95
96
|
);
|
|
96
|
-
--state-layer-hover:
|
|
97
|
+
--state-layer-hover: rgb(
|
|
97
98
|
var(--color-neutral-100-rgb),
|
|
98
99
|
var(--opacity-50)
|
|
99
100
|
);
|
|
100
|
-
--state-layer-pressed:
|
|
101
|
+
--state-layer-pressed: rgb(
|
|
101
102
|
var(--color-neutral-100-rgb),
|
|
102
103
|
var(--opacity-100)
|
|
103
104
|
);
|
|
104
|
-
--state-layer-drag:
|
|
105
|
+
--state-layer-drag: rgb(
|
|
105
106
|
var(--color-neutral-100-rgb),
|
|
106
107
|
var(--opacity-150)
|
|
107
108
|
);
|
|
@@ -143,7 +144,7 @@
|
|
|
143
144
|
--color-ai-gradient-blue-subtle: linear-gradient(
|
|
144
145
|
270deg,
|
|
145
146
|
var(--color-ai-solid-green-subtle) -36%,
|
|
146
|
-
var(--color-ai-solid-blue-subtle)
|
|
147
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
147
148
|
var(--color-ai-solid-purple-subtle) 113%
|
|
148
149
|
);
|
|
149
150
|
--color-ai-gradient-green-subtle: linear-gradient(
|
|
@@ -179,27 +180,19 @@
|
|
|
179
180
|
);
|
|
180
181
|
--color-loading-ai-gradient-purple-subtle: linear-gradient(
|
|
181
182
|
270deg,
|
|
182
|
-
var(--color-ai-solid-
|
|
183
|
-
var(--color-ai-solid-red-subtle-dark) 34%,
|
|
184
|
-
var(--color-ai-solid-purple-subtle-dark) 50%,
|
|
185
|
-
var(--color-ai-solid-red-subtle-dark) 66%,
|
|
183
|
+
var(--color-ai-solid-purple-subtle-dark) 0%,
|
|
186
184
|
var(--color-ai-solid-red-subtle-dark) 100%
|
|
187
185
|
);
|
|
188
186
|
--color-loading-ai-gradient-blue-subtle: linear-gradient(
|
|
189
187
|
270deg,
|
|
190
|
-
var(--color-ai-solid-
|
|
191
|
-
var(--color-ai-solid-blue-subtle-dark)
|
|
192
|
-
var(--color-ai-solid-purple-subtle-dark)
|
|
193
|
-
var(--color-ai-solid-blue-subtle-dark) 66%,
|
|
194
|
-
var(--color-ai-solid-blue-subtle-dark) 100%
|
|
188
|
+
var(--color-ai-solid-green-subtle-dark) -36%,
|
|
189
|
+
var(--color-ai-solid-blue-subtle-dark) 38.5%,
|
|
190
|
+
var(--color-ai-solid-purple-subtle-dark) 113%
|
|
195
191
|
);
|
|
196
192
|
--color-loading-ai-gradient-green-subtle: linear-gradient(
|
|
197
193
|
270deg,
|
|
198
194
|
var(--color-ai-solid-green-subtle-dark) 0%,
|
|
199
|
-
var(--color-ai-solid-
|
|
200
|
-
var(--color-ai-solid-blue-subtle-dark) 50%,
|
|
201
|
-
var(--color-ai-solid-green-subtle-dark) 66%,
|
|
202
|
-
var(--color-ai-solid-green-subtle-dark) 100%
|
|
195
|
+
var(--color-ai-solid-blue-subtle-dark) 154.5%
|
|
203
196
|
);
|
|
204
197
|
}
|
|
205
198
|
}
|
|
@@ -103,13 +103,14 @@
|
|
|
103
103
|
--color-marketing-orange-background-3: var(--color-coral-400);
|
|
104
104
|
--color-marketing-magenta-foreground-4: var(--color-neutral-100);
|
|
105
105
|
--color-marketing-magenta-background-4: var(--color-pink-400);
|
|
106
|
-
--state-layer-
|
|
107
|
-
--state-layer-
|
|
108
|
-
--state-layer-
|
|
106
|
+
--state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
|
|
107
|
+
--state-layer-focus: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
|
|
108
|
+
--state-layer-hover: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
|
|
109
|
+
--state-layer-pressed: rgb(
|
|
109
110
|
var(--color-neutral-900-rgb),
|
|
110
111
|
var(--opacity-100)
|
|
111
112
|
);
|
|
112
|
-
--state-layer-drag:
|
|
113
|
+
--state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));
|
|
113
114
|
--color-ai-gradient-full-spectrum: linear-gradient(
|
|
114
115
|
223deg,
|
|
115
116
|
var(--color-ai-solid-yellow-strong) 9.79%,
|
|
@@ -144,7 +145,7 @@
|
|
|
144
145
|
--color-ai-gradient-blue-subtle: linear-gradient(
|
|
145
146
|
270deg,
|
|
146
147
|
var(--color-ai-solid-green-subtle) -36%,
|
|
147
|
-
var(--color-ai-solid-blue-subtle)
|
|
148
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
148
149
|
var(--color-ai-solid-purple-subtle) 113%
|
|
149
150
|
);
|
|
150
151
|
--color-ai-gradient-green-subtle: linear-gradient(
|
|
@@ -184,27 +185,19 @@
|
|
|
184
185
|
);
|
|
185
186
|
--color-loading-ai-gradient-purple-subtle: linear-gradient(
|
|
186
187
|
270deg,
|
|
187
|
-
var(--color-ai-solid-
|
|
188
|
-
var(--color-ai-solid-red-subtle) 34%,
|
|
189
|
-
var(--color-ai-solid-purple-subtle) 50%,
|
|
190
|
-
var(--color-ai-solid-red-subtle) 66%,
|
|
188
|
+
var(--color-ai-solid-purple-subtle) 0%,
|
|
191
189
|
var(--color-ai-solid-red-subtle) 100%
|
|
192
190
|
);
|
|
193
191
|
--color-loading-ai-gradient-blue-subtle: linear-gradient(
|
|
194
192
|
270deg,
|
|
195
|
-
var(--color-ai-solid-
|
|
196
|
-
var(--color-ai-solid-blue-subtle)
|
|
197
|
-
var(--color-ai-solid-purple-subtle)
|
|
198
|
-
var(--color-ai-solid-blue-subtle) 66%,
|
|
199
|
-
var(--color-ai-solid-blue-subtle) 100%
|
|
193
|
+
var(--color-ai-solid-green-subtle) -36%,
|
|
194
|
+
var(--color-ai-solid-blue-subtle) 38.5%,
|
|
195
|
+
var(--color-ai-solid-purple-subtle) 113%
|
|
200
196
|
);
|
|
201
197
|
--color-loading-ai-gradient-green-subtle: linear-gradient(
|
|
202
198
|
270deg,
|
|
203
199
|
var(--color-ai-solid-green-subtle) 0%,
|
|
204
|
-
var(--color-ai-solid-
|
|
205
|
-
var(--color-ai-solid-blue-subtle) 50%,
|
|
206
|
-
var(--color-ai-solid-green-subtle) 66%,
|
|
207
|
-
var(--color-ai-solid-green-subtle) 100%
|
|
200
|
+
var(--color-ai-solid-blue-subtle) 154.5%
|
|
208
201
|
);
|
|
209
202
|
--color-media-disabled-filter: grayscale(1) opacity(0.25);
|
|
210
203
|
/* Motion Functions */
|
|
@@ -3,7 +3,26 @@
|
|
|
3
3
|
/* Mobile-first means the default layout applies to mobile and there should be no mimimums even though */
|
|
4
4
|
/* most mobile devices would be higher in screen width than the smallest viewport width. */
|
|
5
5
|
|
|
6
|
-
/* The variables
|
|
6
|
+
/* The variables are to be considered constants. They can be read, but should not be modified. */
|
|
7
|
+
$screen-size-XS: 320px;
|
|
8
|
+
$screen-size-SM: 512px;
|
|
9
|
+
$screen-size-MD: 768px;
|
|
10
|
+
$screen-size-LG: 1024px;
|
|
11
|
+
$screen-size-XL: 1280px;
|
|
12
|
+
$screen-size-XL2: 1440px;
|
|
13
|
+
$screen-size-XL3: 1680px;
|
|
14
|
+
$screen-size-XL4: 1920px;
|
|
15
|
+
$page-grid-max-width: 1584px;
|
|
16
|
+
$page-grid-number-cols-small: 8;
|
|
17
|
+
$page-grid-number-cols-large: 16;
|
|
18
|
+
$page-grid-outside-margins-small: 16px;
|
|
19
|
+
$page-grid-outside-margins-large: 32px;
|
|
20
|
+
$page-grid-outside-margins-max: 48px;
|
|
21
|
+
$page-grid-column-gaps-small: var(--spacing-100);
|
|
22
|
+
$page-grid-column-gaps-large: var(--spacing-200);
|
|
23
|
+
$page-grid-row-gaps-small: var(--spacing-100);
|
|
24
|
+
$page-grid-row-gaps-large: var(--spacing-200);
|
|
25
|
+
/* Deprecated when using variables with _ or - with @use, they are not accessable */
|
|
7
26
|
$_screen-size-XS: 320px;
|
|
8
27
|
$_screen-size-SM: 512px;
|
|
9
28
|
$_screen-size-MD: 768px;
|
package/mixins.scss
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ebay/skin",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.12.1",
|
|
4
4
|
"description": "Skin - CSS modules that represent the brand eBay",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"eBay",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
|
|
55
55
|
"lint:css": "stylelint dist --config .stylelintrc",
|
|
56
56
|
"lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
|
|
57
|
-
"lint:sass": "stylelint
|
|
57
|
+
"lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
|
|
58
58
|
"postcss": "postcss dist/**/*.css -r ",
|
|
59
59
|
"prepublishOnly": "node scripts gen",
|
|
60
60
|
"preview": "marko-run preview",
|