@ebay/skin 16.7.0-0 → 16.7.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.
Files changed (22) hide show
  1. package/_cdn/skin/v16.7.1/skin-default.min.css +41 -0
  2. package/_cdn/skin/v16.7.1/skin-full.min.css +88 -0
  3. package/_cdn/skin/v16.7.1/skin-headless.min.css +6 -0
  4. package/_cdn/skin/v16.7.1/skin-legacy.min.css +41 -0
  5. package/dist/alert-dialog/alert-dialog.css +2 -0
  6. package/dist/confirm-dialog/confirm-dialog.css +2 -0
  7. package/dist/legacy-tokens/ds4-light.css +32 -16
  8. package/dist/section-notice/section-notice.css +1 -1
  9. package/dist/tokens/evo-core.css +13 -5
  10. package/dist/tokens/evo-dark.css +36 -16
  11. package/dist/tokens/evo-light.css +32 -16
  12. package/package.json +1 -1
  13. package/src/less/alert-dialog/alert-dialog.less +2 -0
  14. package/src/less/confirm-dialog/confirm-dialog.less +2 -0
  15. package/src/less/section-notice/section-notice.less +1 -1
  16. package/src/tokens/evo-core.css +13 -5
  17. package/src/tokens/evo-dark.css +36 -16
  18. package/src/tokens/evo-light.css +32 -16
  19. package/_cdn/skin/v16.7.0-0/skin-default.min.css +0 -28
  20. package/_cdn/skin/v16.7.0-0/skin-full.min.css +0 -62
  21. package/_cdn/skin/v16.7.0-0/skin-headless.min.css +0 -6
  22. package/_cdn/skin/v16.7.0-0/skin-legacy.min.css +0 -28
package/dist/legacy-tokens/ds4-light.css CHANGED
@@ -92,30 +92,46 @@
92
92
  --state-layer-hover: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
93
93
  --state-layer-pressed: rgba(var(--color-neutral-8-rgb), var(--opacity-150));
94
94
  --state-layer-drag: rgba(var(--color-neutral-8-rgb), var(--opacity-200));
95
- --color-ai-gradient-full-color-diagonal: linear-gradient(
95
+ --color-ai-gradient-full-spectrum: linear-gradient(
96
96
  223deg,
97
- var(--color-ai-yellow) 9.79%,
98
- var(--color-ai-red) 26.69%,
99
- var(--color-ai-purple) 41.82%,
100
- var(--color-ai-blue) 56.17%,
101
- var(--color-ai-green) 78.48%
97
+ var(--color-ai-solid-yellow-strong) 9.79%,
98
+ var(--color-ai-solid-red-strong) 26.69%,
99
+ var(--color-ai-solid-purple-strong) 41.82%,
100
+ var(--color-ai-solid-blue-strong) 56.17%,
101
+ var(--color-ai-solid-green-strong) 78.48%
102
102
  );
103
- --color-ai-gradient-green: linear-gradient(
103
+ --color-ai-gradient-green-strong: linear-gradient(
104
104
  270deg,
105
- var(--color-ai-green) 0%,
105
+ var(--color-ai-solid-green-strong) 0%,
106
106
  #44cf63 25%,
107
- var(--color-ai-blue) 100%
107
+ var(--color-ai-solid-blue-strong) 100%
108
108
  );
109
- --color-ai-gradient-blue: linear-gradient(
109
+ --color-ai-gradient-blue-strong: linear-gradient(
110
110
  270deg,
111
- var(--color-ai-green) 0%,
112
- var(--color-ai-blue) 55.62%,
111
+ var(--color-ai-solid-green-strong) 0%,
112
+ var(--color-ai-solid-blue-strong) 55.62%,
113
113
  #5751ea 75.7%,
114
- var(--color-ai-purple) 100%
114
+ var(--color-ai-solid-purple-strong) 100%
115
115
  );
116
- --color-ai-gradient-violet: linear-gradient(
116
+ --color-ai-gradient-purple-strong: linear-gradient(
117
117
  270deg,
118
- var(--color-ai-purple) 0%,
119
- var(--color-ai-red) 100%
118
+ var(--color-ai-solid-purple-strong) 0%,
119
+ var(--color-ai-solid-red-strong) 100%
120
+ );
121
+ --color-ai-gradient-purple-subtle: linear-gradient(
122
+ 270deg,
123
+ var(--color-ai-solid-purple-subtle) 0%,
124
+ var(--color-ai-solid-red-subtle) 100%
125
+ );
126
+ --color-ai-gradient-blue-subtle: linear-gradient(
127
+ 270deg,
128
+ var(--color-ai-solid-green-subtle) -36%,
129
+ var(--color-ai-solid-blue-subtle) -46.87%,
130
+ var(--color-ai-solid-purple-subtle) 113%
131
+ );
132
+ --color-ai-gradient-green-subtle: linear-gradient(
133
+ 270deg,
134
+ var(--color-ai-solid-green-subtle) 0%,
135
+ var(--color-ai-solid-blue-subtle) 154.5%
120
136
  );
121
137
  }
package/dist/section-notice/section-notice.css CHANGED
@@ -112,7 +112,7 @@ p.section-notice__cta {
112
112
  [dir="rtl"] .section-notice__main {
113
113
  padding-right: 0;
114
114
  }
115
- [dir="rtl"] p.page-notice__cta {
115
+ [dir="rtl"] p.section-notice__cta {
116
116
  margin-left: 16px;
117
117
  padding-left: 16px;
118
118
  }
package/dist/tokens/evo-core.css CHANGED
@@ -69,11 +69,19 @@
69
69
  --color-lime-5: #86b300;
70
70
  --color-lime-6: #4b7d06;
71
71
  --color-lime-7: #364f03;
72
- --color-ai-green: #4ee04b;
73
- --color-ai-blue: #0968f6;
74
- --color-ai-purple: #993ee0;
75
- --color-ai-red: #ff4242;
76
- --color-ai-yellow: #ffd80e;
72
+ --color-ai-solid-green-strong: #4ee04b;
73
+ --color-ai-solid-green-subtle: #f1fdf1;
74
+ --color-ai-solid-green-subtle-dark: #112611;
75
+ --color-ai-solid-blue-strong: #0968f6;
76
+ --color-ai-solid-blue-subtle: #f0f6fe;
77
+ --color-ai-solid-blue-subtle-dark: #112c31;
78
+ --color-ai-solid-purple-strong: #993ee0;
79
+ --color-ai-solid-purple-subtle: #f9f3fd;
80
+ --color-ai-solid-purple-subtle-dark: #20172f;
81
+ --color-ai-solid-red-strong: #ff4242;
82
+ --color-ai-solid-red-subtle: #fff4f4;
83
+ --color-ai-solid-red-subtle-dark: #321919;
84
+ --color-ai-solid-yellow-strong: #ffd80e;
77
85
  --opacity-50: 0.04;
78
86
  --opacity-100: 0.08;
79
87
  --opacity-150: 0.12;
package/dist/tokens/evo-dark.css CHANGED
@@ -90,31 +90,51 @@
90
90
  var(--color-neutral-0-rgb),
91
91
  var(--opacity-150)
92
92
  );
93
- --color-ai-gradient-full-color-diagonal: linear-gradient(
93
+ --color-ai-solid-green-subtle: #112611;
94
+ --color-ai-solid-blue-subtle: #112c31;
95
+ --color-ai-solid-purple-subtle: #20172f;
96
+ --color-ai-solid-red-subtle: #321919;
97
+ --color-ai-gradient-full-spectrum: linear-gradient(
94
98
  223deg,
95
- var(--color-ai-yellow) 9.79%,
96
- var(--color-ai-red) 26.69%,
97
- var(--color-ai-purple) 41.82%,
98
- var(--color-ai-blue) 56.17%,
99
- var(--color-ai-green) 78.48%
99
+ var(--color-ai-solid-yellow-strong) 9.79%,
100
+ var(--color-ai-solid-red-strong) 26.69%,
101
+ var(--color-ai-solid-purple-strong) 41.82%,
102
+ var(--color-ai-solid-blue-strong) 56.17%,
103
+ var(--color-ai-solid-green-strong) 78.48%
100
104
  );
101
- --color-ai-gradient-green: linear-gradient(
105
+ --color-ai-gradient-green-strong: linear-gradient(
102
106
  270deg,
103
- var(--color-ai-green) 0%,
107
+ var(--color-ai-solid-green-strong) 0%,
104
108
  #44cf63 25%,
105
- var(--color-ai-blue) 100%
109
+ var(--color-ai-solid-blue-strong) 100%
106
110
  );
107
- --color-ai-gradient-blue: linear-gradient(
111
+ --color-ai-gradient-blue-strong: linear-gradient(
108
112
  270deg,
109
- var(--color-ai-green) 0%,
110
- var(--color-ai-blue) 55.62%,
113
+ var(--color-ai-solid-green-strong) 0%,
114
+ var(--color-ai-solid-blue-strong) 55.62%,
111
115
  #5751ea 75.7%,
112
- var(--color-ai-purple) 100%
116
+ var(--color-ai-solid-purple-strong) 100%
113
117
  );
114
- --color-ai-gradient-violet: linear-gradient(
118
+ --color-ai-gradient-purple-strong: linear-gradient(
115
119
  270deg,
116
- var(--color-ai-purple) 0%,
117
- var(--color-ai-red) 100%
120
+ var(--color-ai-solid-purple-strong) 0%,
121
+ var(--color-ai-solid-red-strong) 100%
122
+ );
123
+ --color-ai-gradient-purple-subtle: linear-gradient(
124
+ 270deg,
125
+ var(--color-ai-solid-purple-subtle) 0%,
126
+ var(--color-ai-solid-red-subtle) 100%
127
+ );
128
+ --color-ai-gradient-blue-subtle: linear-gradient(
129
+ 270deg,
130
+ var(--color-ai-solid-green-subtle) -36%,
131
+ var(--color-ai-solid-blue-subtle) -46.87%,
132
+ var(--color-ai-solid-purple-subtle) 113%
133
+ );
134
+ --color-ai-gradient-green-subtle: linear-gradient(
135
+ 270deg,
136
+ var(--color-ai-solid-green-subtle) 0%,
137
+ var(--color-ai-solid-blue-subtle) 154.5%
118
138
  );
119
139
  }
120
140
  }
package/dist/tokens/evo-light.css CHANGED
@@ -92,30 +92,46 @@
92
92
  --state-layer-hover: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
93
93
  --state-layer-pressed: rgba(var(--color-neutral-8-rgb), var(--opacity-150));
94
94
  --state-layer-drag: rgba(var(--color-neutral-8-rgb), var(--opacity-200));
95
- --color-ai-gradient-full-color-diagonal: linear-gradient(
95
+ --color-ai-gradient-full-spectrum: linear-gradient(
96
96
  223deg,
97
- var(--color-ai-yellow) 9.79%,
98
- var(--color-ai-red) 26.69%,
99
- var(--color-ai-purple) 41.82%,
100
- var(--color-ai-blue) 56.17%,
101
- var(--color-ai-green) 78.48%
97
+ var(--color-ai-solid-yellow-strong) 9.79%,
98
+ var(--color-ai-solid-red-strong) 26.69%,
99
+ var(--color-ai-solid-purple-strong) 41.82%,
100
+ var(--color-ai-solid-blue-strong) 56.17%,
101
+ var(--color-ai-solid-green-strong) 78.48%
102
102
  );
103
- --color-ai-gradient-green: linear-gradient(
103
+ --color-ai-gradient-green-strong: linear-gradient(
104
104
  270deg,
105
- var(--color-ai-green) 0%,
105
+ var(--color-ai-solid-green-strong) 0%,
106
106
  #44cf63 25%,
107
- var(--color-ai-blue) 100%
107
+ var(--color-ai-solid-blue-strong) 100%
108
108
  );
109
- --color-ai-gradient-blue: linear-gradient(
109
+ --color-ai-gradient-blue-strong: linear-gradient(
110
110
  270deg,
111
- var(--color-ai-green) 0%,
112
- var(--color-ai-blue) 55.62%,
111
+ var(--color-ai-solid-green-strong) 0%,
112
+ var(--color-ai-solid-blue-strong) 55.62%,
113
113
  #5751ea 75.7%,
114
- var(--color-ai-purple) 100%
114
+ var(--color-ai-solid-purple-strong) 100%
115
115
  );
116
- --color-ai-gradient-violet: linear-gradient(
116
+ --color-ai-gradient-purple-strong: linear-gradient(
117
117
  270deg,
118
- var(--color-ai-purple) 0%,
119
- var(--color-ai-red) 100%
118
+ var(--color-ai-solid-purple-strong) 0%,
119
+ var(--color-ai-solid-red-strong) 100%
120
+ );
121
+ --color-ai-gradient-purple-subtle: linear-gradient(
122
+ 270deg,
123
+ var(--color-ai-solid-purple-subtle) 0%,
124
+ var(--color-ai-solid-red-subtle) 100%
125
+ );
126
+ --color-ai-gradient-blue-subtle: linear-gradient(
127
+ 270deg,
128
+ var(--color-ai-solid-green-subtle) -36%,
129
+ var(--color-ai-solid-blue-subtle) -46.87%,
130
+ var(--color-ai-solid-purple-subtle) 113%
131
+ );
132
+ --color-ai-gradient-green-subtle: linear-gradient(
133
+ 270deg,
134
+ var(--color-ai-solid-green-subtle) 0%,
135
+ var(--color-ai-solid-blue-subtle) 154.5%
120
136
  );
121
137
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
3
  "description": "Skin - CSS modules that represent the brand eBay",
4
- "version": "16.7.0-0",
4
+ "version": "16.7.1",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [
package/src/less/alert-dialog/alert-dialog.less CHANGED
@@ -84,6 +84,8 @@
84
84
 
85
85
  @media (min-width: @_screen-size-MD) {
86
86
  .alert-dialog__window {
87
+ .lightbox-dialog-window-large();
88
+
87
89
  max-width: calc(88% - @spacing-400;);
88
90
  }
89
91
  }
package/src/less/confirm-dialog/confirm-dialog.less CHANGED
@@ -89,6 +89,8 @@ button.confirm-dialog__confirm {
89
89
 
90
90
  @media (min-width: @_screen-size-MD) {
91
91
  .confirm-dialog__window {
92
+ .lightbox-dialog-window-large();
93
+
92
94
  max-width: calc(88% - @spacing-400);
93
95
  }
94
96
  }
package/src/less/section-notice/section-notice.less CHANGED
@@ -147,7 +147,7 @@ p.section-notice__cta {
147
147
  padding-right: 0;
148
148
  }
149
149
 
150
- p.page-notice__cta {
150
+ p.section-notice__cta {
151
151
  margin-left: 16px;
152
152
  padding-left: 16px;
153
153
  }
package/src/tokens/evo-core.css CHANGED
@@ -69,11 +69,19 @@
69
69
  --color-lime-5: #86b300;
70
70
  --color-lime-6: #4b7d06;
71
71
  --color-lime-7: #364f03;
72
- --color-ai-green: #4ee04b;
73
- --color-ai-blue: #0968f6;
74
- --color-ai-purple: #993ee0;
75
- --color-ai-red: #ff4242;
76
- --color-ai-yellow: #ffd80e;
72
+ --color-ai-solid-green-strong: #4ee04b;
73
+ --color-ai-solid-green-subtle: #f1fdf1;
74
+ --color-ai-solid-green-subtle-dark: #112611;
75
+ --color-ai-solid-blue-strong: #0968f6;
76
+ --color-ai-solid-blue-subtle: #f0f6fe;
77
+ --color-ai-solid-blue-subtle-dark: #112c31;
78
+ --color-ai-solid-purple-strong: #993ee0;
79
+ --color-ai-solid-purple-subtle: #f9f3fd;
80
+ --color-ai-solid-purple-subtle-dark: #20172f;
81
+ --color-ai-solid-red-strong: #ff4242;
82
+ --color-ai-solid-red-subtle: #fff4f4;
83
+ --color-ai-solid-red-subtle-dark: #321919;
84
+ --color-ai-solid-yellow-strong: #ffd80e;
77
85
  --opacity-50: 0.04;
78
86
  --opacity-100: 0.08;
79
87
  --opacity-150: 0.12;
package/src/tokens/evo-dark.css CHANGED
@@ -90,31 +90,51 @@
90
90
  var(--color-neutral-0-rgb),
91
91
  var(--opacity-150)
92
92
  );
93
- --color-ai-gradient-full-color-diagonal: linear-gradient(
93
+ --color-ai-solid-green-subtle: #112611;
94
+ --color-ai-solid-blue-subtle: #112c31;
95
+ --color-ai-solid-purple-subtle: #20172f;
96
+ --color-ai-solid-red-subtle: #321919;
97
+ --color-ai-gradient-full-spectrum: linear-gradient(
94
98
  223deg,
95
- var(--color-ai-yellow) 9.79%,
96
- var(--color-ai-red) 26.69%,
97
- var(--color-ai-purple) 41.82%,
98
- var(--color-ai-blue) 56.17%,
99
- var(--color-ai-green) 78.48%
99
+ var(--color-ai-solid-yellow-strong) 9.79%,
100
+ var(--color-ai-solid-red-strong) 26.69%,
101
+ var(--color-ai-solid-purple-strong) 41.82%,
102
+ var(--color-ai-solid-blue-strong) 56.17%,
103
+ var(--color-ai-solid-green-strong) 78.48%
100
104
  );
101
- --color-ai-gradient-green: linear-gradient(
105
+ --color-ai-gradient-green-strong: linear-gradient(
102
106
  270deg,
103
- var(--color-ai-green) 0%,
107
+ var(--color-ai-solid-green-strong) 0%,
104
108
  #44cf63 25%,
105
- var(--color-ai-blue) 100%
109
+ var(--color-ai-solid-blue-strong) 100%
106
110
  );
107
- --color-ai-gradient-blue: linear-gradient(
111
+ --color-ai-gradient-blue-strong: linear-gradient(
108
112
  270deg,
109
- var(--color-ai-green) 0%,
110
- var(--color-ai-blue) 55.62%,
113
+ var(--color-ai-solid-green-strong) 0%,
114
+ var(--color-ai-solid-blue-strong) 55.62%,
111
115
  #5751ea 75.7%,
112
- var(--color-ai-purple) 100%
116
+ var(--color-ai-solid-purple-strong) 100%
113
117
  );
114
- --color-ai-gradient-violet: linear-gradient(
118
+ --color-ai-gradient-purple-strong: linear-gradient(
115
119
  270deg,
116
- var(--color-ai-purple) 0%,
117
- var(--color-ai-red) 100%
120
+ var(--color-ai-solid-purple-strong) 0%,
121
+ var(--color-ai-solid-red-strong) 100%
122
+ );
123
+ --color-ai-gradient-purple-subtle: linear-gradient(
124
+ 270deg,
125
+ var(--color-ai-solid-purple-subtle) 0%,
126
+ var(--color-ai-solid-red-subtle) 100%
127
+ );
128
+ --color-ai-gradient-blue-subtle: linear-gradient(
129
+ 270deg,
130
+ var(--color-ai-solid-green-subtle) -36%,
131
+ var(--color-ai-solid-blue-subtle) -46.87%,
132
+ var(--color-ai-solid-purple-subtle) 113%
133
+ );
134
+ --color-ai-gradient-green-subtle: linear-gradient(
135
+ 270deg,
136
+ var(--color-ai-solid-green-subtle) 0%,
137
+ var(--color-ai-solid-blue-subtle) 154.5%
118
138
  );
119
139
  }
120
140
  }
package/src/tokens/evo-light.css CHANGED
@@ -92,30 +92,46 @@
92
92
  --state-layer-hover: rgba(var(--color-neutral-8-rgb), var(--opacity-100));
93
93
  --state-layer-pressed: rgba(var(--color-neutral-8-rgb), var(--opacity-150));
94
94
  --state-layer-drag: rgba(var(--color-neutral-8-rgb), var(--opacity-200));
95
- --color-ai-gradient-full-color-diagonal: linear-gradient(
95
+ --color-ai-gradient-full-spectrum: linear-gradient(
96
96
  223deg,
97
- var(--color-ai-yellow) 9.79%,
98
- var(--color-ai-red) 26.69%,
99
- var(--color-ai-purple) 41.82%,
100
- var(--color-ai-blue) 56.17%,
101
- var(--color-ai-green) 78.48%
97
+ var(--color-ai-solid-yellow-strong) 9.79%,
98
+ var(--color-ai-solid-red-strong) 26.69%,
99
+ var(--color-ai-solid-purple-strong) 41.82%,
100
+ var(--color-ai-solid-blue-strong) 56.17%,
101
+ var(--color-ai-solid-green-strong) 78.48%
102
102
  );
103
- --color-ai-gradient-green: linear-gradient(
103
+ --color-ai-gradient-green-strong: linear-gradient(
104
104
  270deg,
105
- var(--color-ai-green) 0%,
105
+ var(--color-ai-solid-green-strong) 0%,
106
106
  #44cf63 25%,
107
- var(--color-ai-blue) 100%
107
+ var(--color-ai-solid-blue-strong) 100%
108
108
  );
109
- --color-ai-gradient-blue: linear-gradient(
109
+ --color-ai-gradient-blue-strong: linear-gradient(
110
110
  270deg,
111
- var(--color-ai-green) 0%,
112
- var(--color-ai-blue) 55.62%,
111
+ var(--color-ai-solid-green-strong) 0%,
112
+ var(--color-ai-solid-blue-strong) 55.62%,
113
113
  #5751ea 75.7%,
114
- var(--color-ai-purple) 100%
114
+ var(--color-ai-solid-purple-strong) 100%
115
115
  );
116
- --color-ai-gradient-violet: linear-gradient(
116
+ --color-ai-gradient-purple-strong: linear-gradient(
117
117
  270deg,
118
- var(--color-ai-purple) 0%,
119
- var(--color-ai-red) 100%
118
+ var(--color-ai-solid-purple-strong) 0%,
119
+ var(--color-ai-solid-red-strong) 100%
120
+ );
121
+ --color-ai-gradient-purple-subtle: linear-gradient(
122
+ 270deg,
123
+ var(--color-ai-solid-purple-subtle) 0%,
124
+ var(--color-ai-solid-red-subtle) 100%
125
+ );
126
+ --color-ai-gradient-blue-subtle: linear-gradient(
127
+ 270deg,
128
+ var(--color-ai-solid-green-subtle) -36%,
129
+ var(--color-ai-solid-blue-subtle) -46.87%,
130
+ var(--color-ai-solid-purple-subtle) 113%
131
+ );
132
+ --color-ai-gradient-green-subtle: linear-gradient(
133
+ 270deg,
134
+ var(--color-ai-solid-green-subtle) 0%,
135
+ var(--color-ai-solid-blue-subtle) 154.5%
120
136
  );
121
137
  }