@ebay/skin 19.21.0 → 19.21.2

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.
@@ -1,36 +1,17 @@
1
- @keyframes chevron-bounce-open {
2
- 0% {
3
- transform: translateY(0);
4
- }
5
- 50% {
6
- transform: translateY(-7px);
7
- }
8
- to {
9
- transform: translateY(0);
10
- }
11
- }
12
- @keyframes chevron-bounce-close {
13
- 0% {
14
- transform: translateY(0);
15
- }
16
- 50% {
17
- transform: translateY(7px);
18
- }
19
- to {
20
- transform: translateY(0);
21
- }
22
- }
23
1
  ul.accordion {
24
2
  margin: 0;
25
3
  padding: 0;
26
4
  width: 100%;
27
5
  }
6
+
28
7
  ul.accordion ::marker {
29
8
  font-size: 0;
30
9
  }
10
+
31
11
  ul.accordion > li:not(:last-child) {
32
12
  border-bottom: 1px solid var(--color-border-subtle);
33
13
  }
14
+
34
15
  ul.accordion summary.details__summary {
35
16
  border-radius: 0;
36
17
  display: flex;
@@ -39,37 +20,57 @@ ul.accordion summary.details__summary {
39
20
  min-height: 48px;
40
21
  padding: 12px 16px;
41
22
  }
23
+
42
24
  ul.accordion details {
43
25
  overflow: hidden;
44
26
  }
27
+
45
28
  ul.accordion details .details__content {
46
29
  margin: 0 16px 6px;
47
30
  overflow: hidden;
48
31
  }
49
- ul.accordion summary.details__summary span.details__icon svg {
32
+
33
+ ul.accordion
34
+ details:not([open])
35
+ summary.details__summary
36
+ span.details__icon
37
+ svg {
38
+ fill: var(--color-foreground-secondary);
39
+ }
40
+
41
+ ul.accordion--animated
42
+ details:not([open])
43
+ summary.details__summary
44
+ span.details__icon
45
+ svg {
50
46
  animation: chevron-bounce-close var(--motion-duration-medium-1)
51
47
  var(--motion-easing-standard);
52
- fill: var(
53
- --details-secondary-foreground-color,
54
- var(--color-foreground-secondary)
55
- );
56
48
  }
57
- ul.accordion details[open] summary.details__summary span.details__icon svg {
49
+
50
+ ul.accordion--animated
51
+ details[open]
52
+ summary.details__summary
53
+ span.details__icon
54
+ svg {
58
55
  animation: chevron-bounce-open var(--motion-duration-medium-1)
59
56
  var(--motion-easing-standard) var(--motion-duration-short-1);
60
57
  }
58
+
61
59
  ul.accordion details svg.details__expand,
62
60
  ul.accordion details[open] svg.details__collapse {
63
61
  display: inline-block;
64
62
  }
63
+
65
64
  ul.accordion details svg.details__collapse,
66
65
  ul.accordion details[open] svg.details__expand {
67
66
  display: none;
68
67
  }
68
+
69
69
  ul.accordion--large summary.details__summary {
70
70
  font-size: var(--font-size-large-1);
71
71
  min-height: 52px;
72
72
  }
73
+
73
74
  @supports selector(::details-content) and (interpolate-size: allow-keywords) and
74
75
  (transition: allow-discrete) {
75
76
  :root {
@@ -41,6 +41,11 @@ svg.icon--32-fit {
41
41
  height: 32px;
42
42
  width: 32px;
43
43
  }
44
+ svg.icon--40,
45
+ svg.icon--40-fit {
46
+ height: 40px;
47
+ width: 40px;
48
+ }
44
49
  svg.icon--48,
45
50
  svg.icon--48-fit {
46
51
  height: 48px;
@@ -53,30 +58,39 @@ svg.icon--64-fit {
53
58
  }
54
59
  svg.icon--12-colored {
55
60
  height: 12px;
61
+ width: fit-content;
56
62
  }
57
63
  svg.icon--16-colored {
58
64
  height: 16px;
65
+ width: fit-content;
59
66
  }
60
67
  svg.icon--18-colored {
61
68
  height: 18px;
69
+ width: fit-content;
62
70
  }
63
71
  svg.icon--20-colored {
64
72
  height: 20px;
73
+ width: fit-content;
65
74
  }
66
75
  svg.icon--24-colored {
67
76
  height: 24px;
77
+ width: fit-content;
68
78
  }
69
79
  svg.icon--30-colored {
70
80
  height: 30px;
81
+ width: fit-content;
71
82
  }
72
83
  svg.icon--32-colored {
73
84
  height: 32px;
85
+ width: fit-content;
74
86
  }
75
87
  svg.icon--48-colored {
76
88
  height: 48px;
89
+ width: fit-content;
77
90
  }
78
91
  svg.icon--64-colored {
79
92
  height: 64px;
93
+ width: fit-content;
80
94
  }
81
95
  svg.icon--disabled {
82
96
  filter: var(--color-media-disabled-filter);
@@ -315,8 +315,8 @@
315
315
  --font-text-case-uppercase: uppercase;
316
316
  --font-text-decoration-none: none;
317
317
  --font-text-decoration-underline: underline;
318
- --font-weight-400: Regular;
319
- --font-weight-600: Bold;
318
+ --font-weight-400: 400;
319
+ --font-weight-600: 600;
320
320
  --motion-duration-instant: 17ms;
321
321
  --motion-duration-long-1: 667ms;
322
322
  --motion-duration-long-2: 833ms;
@@ -365,20 +365,20 @@
365
365
  --spacing-75: 6px;
366
366
  --spacing-page-grid-gutter: 8px;
367
367
  --spacing-page-grid-margin: 16px;
368
- --typography-body-bold: Bold 0.875rem/20px "Market Sans";
369
- --typography-body: Regular 0.875rem/20px "Market Sans";
370
- --typography-caption-bold: Bold 0.75rem/16px "Market Sans";
371
- --typography-caption: Regular 0.75rem/16px "Market Sans";
372
- --typography-display-1: Bold 2.875rem/56px "Market Sans";
373
- --typography-display-2: Bold 2.25rem/46px "Market Sans";
374
- --typography-display-3: Bold 1.875rem/40px "Market Sans";
375
- --typography-signal-1: Regular 0.875rem/20px "Market Sans";
376
- --typography-signal-2: Bold 0.625rem/12px "Market Sans";
377
- --typography-subtitle-1: Regular 1.25rem/28px "Market Sans";
378
- --typography-subtitle-2: Regular 1rem/24px "Market Sans";
379
- --typography-title-1: Bold 1.5rem/32px "Market Sans";
380
- --typography-title-2: Bold 1.25rem/28px "Market Sans";
381
- --typography-title-3: Bold 1rem/24px "Market Sans";
368
+ --typography-body-bold: 600 0.875rem/20px "Market Sans";
369
+ --typography-body: 400 0.875rem/20px "Market Sans";
370
+ --typography-caption-bold: 600 0.75rem/16px "Market Sans";
371
+ --typography-caption: 400 0.75rem/16px "Market Sans";
372
+ --typography-display-1: 600 2.875rem/56px "Market Sans";
373
+ --typography-display-2: 600 2.25rem/46px "Market Sans";
374
+ --typography-display-3: 600 1.875rem/40px "Market Sans";
375
+ --typography-signal-1: 400 0.875rem/20px "Market Sans";
376
+ --typography-signal-2: 600 0.625rem/12px "Market Sans";
377
+ --typography-subtitle-1: 400 1.25rem/28px "Market Sans";
378
+ --typography-subtitle-2: 400 1rem/24px "Market Sans";
379
+ --typography-title-1: 600 1.5rem/32px "Market Sans";
380
+ --typography-title-2: 600 1.25rem/28px "Market Sans";
381
+ --typography-title-3: 600 1rem/24px "Market Sans";
382
382
  --border-radius-50: 8px;
383
383
  --border-radius-100: 16px;
384
384
  --border-radius-150: 24px;
@@ -57,16 +57,19 @@
57
57
  --color-foreground-secondary: var(--color-neutral-500);
58
58
  --color-foreground-success: var(--color-kiwi-400);
59
59
  --color-gradient-ai-blue-strong: linear-gradient(
60
+ to right,
60
61
  var(--color-ai-solid-purple-strong),
61
62
  var(--color-ai-solid-blue-strong) 50%,
62
63
  var(--color-ai-solid-green-strong) 100%
63
64
  );
64
65
  --color-gradient-ai-blue-subtle: linear-gradient(
66
+ to right,
65
67
  var(--color-ai-solid-purple-subtle),
66
68
  var(--color-ai-solid-blue-subtle) 50%,
67
69
  var(--color-ai-solid-green-subtle) 100%
68
70
  );
69
71
  --color-gradient-ai-full-color-diagonal: linear-gradient(
72
+ 135deg,
70
73
  var(--color-ai-solid-green-strong) 10%,
71
74
  var(--color-ai-solid-blue-strong) 27%,
72
75
  var(--color-ai-solid-purple-strong) 42%,
@@ -74,26 +77,32 @@
74
77
  var(--color-ai-solid-yellow-strong) 78%
75
78
  );
76
79
  --color-gradient-ai-green-strong: linear-gradient(
80
+ to right,
77
81
  var(--color-ai-solid-blue-strong),
78
82
  var(--color-ai-solid-green-strong) 100%
79
83
  );
80
84
  --color-gradient-ai-green-subtle: linear-gradient(
85
+ to right,
81
86
  var(--color-ai-solid-blue-subtle),
82
87
  var(--color-ai-solid-green-subtle) 100%
83
88
  );
84
89
  --color-gradient-ai-purple-strong: linear-gradient(
90
+ to right,
85
91
  var(--color-ai-solid-red-strong),
86
92
  var(--color-ai-solid-purple-strong) 100%
87
93
  );
88
94
  --color-gradient-ai-purple-subtle: linear-gradient(
95
+ to right,
89
96
  var(--color-ai-solid-red-subtle),
90
97
  var(--color-ai-solid-purple-subtle) 100%
91
98
  );
92
99
  --color-gradient-image-scrim: linear-gradient(
100
+ 90deg,
93
101
  rgba(248, 248, 248, 0) 52%,
94
102
  rgba(248, 248, 248, 0.03)
95
103
  );
96
104
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
105
+ 90deg,
97
106
  rgba(35, 35, 35, 0),
98
107
  rgba(35, 35, 35, 0.6) 25%,
99
108
  rgba(35, 35, 35, 0.85) 37%,
@@ -104,6 +113,7 @@
104
113
  rgba(35, 35, 35, 0)
105
114
  );
106
115
  --color-gradient-loading-shimmer: linear-gradient(
116
+ 90deg,
107
117
  rgba(27, 27, 27, 0),
108
118
  rgba(27, 27, 27, 0.6) 25%,
109
119
  rgba(27, 27, 27, 0.85) 37%,
@@ -57,16 +57,19 @@
57
57
  --color-foreground-secondary: var(--color-neutral-500);
58
58
  --color-foreground-success: var(--color-kiwi-400);
59
59
  --color-gradient-ai-blue-strong: linear-gradient(
60
+ to right,
60
61
  var(--color-ai-solid-purple-strong),
61
62
  var(--color-ai-solid-blue-strong) 50%,
62
63
  var(--color-ai-solid-green-strong) 100%
63
64
  );
64
65
  --color-gradient-ai-blue-subtle: linear-gradient(
66
+ to right,
65
67
  var(--color-ai-solid-purple-subtle),
66
68
  var(--color-ai-solid-blue-subtle) 50%,
67
69
  var(--color-ai-solid-green-subtle) 100%
68
70
  );
69
71
  --color-gradient-ai-full-color-diagonal: linear-gradient(
72
+ 135deg,
70
73
  var(--color-ai-solid-green-strong) 10%,
71
74
  var(--color-ai-solid-blue-strong) 27%,
72
75
  var(--color-ai-solid-purple-strong) 42%,
@@ -74,26 +77,32 @@
74
77
  var(--color-ai-solid-yellow-strong) 78%
75
78
  );
76
79
  --color-gradient-ai-green-strong: linear-gradient(
80
+ to right,
77
81
  var(--color-ai-solid-blue-strong),
78
82
  var(--color-ai-solid-green-strong) 100%
79
83
  );
80
84
  --color-gradient-ai-green-subtle: linear-gradient(
85
+ to right,
81
86
  var(--color-ai-solid-blue-subtle),
82
87
  var(--color-ai-solid-green-subtle) 100%
83
88
  );
84
89
  --color-gradient-ai-purple-strong: linear-gradient(
90
+ to right,
85
91
  var(--color-ai-solid-red-strong),
86
92
  var(--color-ai-solid-purple-strong) 100%
87
93
  );
88
94
  --color-gradient-ai-purple-subtle: linear-gradient(
95
+ to right,
89
96
  var(--color-ai-solid-red-subtle),
90
97
  var(--color-ai-solid-purple-subtle) 100%
91
98
  );
92
99
  --color-gradient-image-scrim: linear-gradient(
100
+ 90deg,
93
101
  rgba(248, 248, 248, 0) 52%,
94
102
  rgba(248, 248, 248, 0.03)
95
103
  );
96
104
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
105
+ 90deg,
97
106
  rgba(35, 35, 35, 0),
98
107
  rgba(35, 35, 35, 0.6) 25%,
99
108
  rgba(35, 35, 35, 0.85) 37%,
@@ -104,6 +113,7 @@
104
113
  rgba(35, 35, 35, 0)
105
114
  );
106
115
  --color-gradient-loading-shimmer: linear-gradient(
116
+ 90deg,
107
117
  rgba(27, 27, 27, 0),
108
118
  rgba(27, 27, 27, 0.6) 25%,
109
119
  rgba(27, 27, 27, 0.85) 37%,
@@ -56,16 +56,19 @@
56
56
  --color-foreground-secondary: var(--color-neutral-600);
57
57
  --color-foreground-success: var(--color-kiwi-600);
58
58
  --color-gradient-ai-blue-strong: linear-gradient(
59
+ to right,
59
60
  var(--color-ai-solid-purple-strong),
60
61
  var(--color-ai-solid-blue-strong) 50%,
61
62
  var(--color-ai-solid-green-strong) 100%
62
63
  );
63
64
  --color-gradient-ai-blue-subtle: linear-gradient(
65
+ to right,
64
66
  var(--color-ai-solid-purple-subtle),
65
67
  var(--color-ai-solid-blue-subtle) 50%,
66
68
  var(--color-ai-solid-green-subtle) 100%
67
69
  );
68
70
  --color-gradient-ai-full-color-diagonal: linear-gradient(
71
+ 135deg,
69
72
  var(--color-ai-solid-green-strong) 10%,
70
73
  var(--color-ai-solid-blue-strong) 27%,
71
74
  var(--color-ai-solid-purple-strong) 42%,
@@ -73,26 +76,32 @@
73
76
  var(--color-ai-solid-yellow-strong) 78%
74
77
  );
75
78
  --color-gradient-ai-green-strong: linear-gradient(
79
+ to right,
76
80
  var(--color-ai-solid-blue-strong),
77
81
  var(--color-ai-solid-green-strong) 100%
78
82
  );
79
83
  --color-gradient-ai-green-subtle: linear-gradient(
84
+ to right,
80
85
  var(--color-ai-solid-blue-subtle),
81
86
  var(--color-ai-solid-green-subtle) 100%
82
87
  );
83
88
  --color-gradient-ai-purple-strong: linear-gradient(
89
+ to right,
84
90
  var(--color-ai-solid-red-strong),
85
91
  var(--color-ai-solid-purple-strong) 100%
86
92
  );
87
93
  --color-gradient-ai-purple-subtle: linear-gradient(
94
+ to right,
88
95
  var(--color-ai-solid-red-subtle),
89
96
  var(--color-ai-solid-purple-subtle) 100%
90
97
  );
91
98
  --color-gradient-image-scrim: linear-gradient(
99
+ 90deg,
92
100
  rgba(248, 248, 248, 0) 52%,
93
101
  rgba(248, 248, 248, 0.03)
94
102
  );
95
103
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
104
+ 90deg,
96
105
  rgba(237, 237, 237, 0),
97
106
  rgba(237, 237, 237, 0.6) 25%,
98
107
  rgba(237, 237, 237, 0.85) 37%,
@@ -103,6 +112,7 @@
103
112
  rgba(237, 237, 237, 0)
104
113
  );
105
114
  --color-gradient-loading-shimmer: linear-gradient(
115
+ 90deg,
106
116
  rgba(248, 248, 248, 0),
107
117
  rgba(248, 248, 248, 0.6) 25%,
108
118
  rgba(248, 248, 248, 0.85) 37%,
@@ -56,16 +56,19 @@
56
56
  --color-foreground-secondary: var(--color-neutral-600);
57
57
  --color-foreground-success: var(--color-kiwi-600);
58
58
  --color-gradient-ai-blue-strong: linear-gradient(
59
+ to right,
59
60
  var(--color-ai-solid-purple-strong),
60
61
  var(--color-ai-solid-blue-strong) 50%,
61
62
  var(--color-ai-solid-green-strong) 100%
62
63
  );
63
64
  --color-gradient-ai-blue-subtle: linear-gradient(
65
+ to right,
64
66
  var(--color-ai-solid-purple-subtle),
65
67
  var(--color-ai-solid-blue-subtle) 50%,
66
68
  var(--color-ai-solid-green-subtle) 100%
67
69
  );
68
70
  --color-gradient-ai-full-color-diagonal: linear-gradient(
71
+ 135deg,
69
72
  var(--color-ai-solid-green-strong) 10%,
70
73
  var(--color-ai-solid-blue-strong) 27%,
71
74
  var(--color-ai-solid-purple-strong) 42%,
@@ -73,26 +76,32 @@
73
76
  var(--color-ai-solid-yellow-strong) 78%
74
77
  );
75
78
  --color-gradient-ai-green-strong: linear-gradient(
79
+ to right,
76
80
  var(--color-ai-solid-blue-strong),
77
81
  var(--color-ai-solid-green-strong) 100%
78
82
  );
79
83
  --color-gradient-ai-green-subtle: linear-gradient(
84
+ to right,
80
85
  var(--color-ai-solid-blue-subtle),
81
86
  var(--color-ai-solid-green-subtle) 100%
82
87
  );
83
88
  --color-gradient-ai-purple-strong: linear-gradient(
89
+ to right,
84
90
  var(--color-ai-solid-red-strong),
85
91
  var(--color-ai-solid-purple-strong) 100%
86
92
  );
87
93
  --color-gradient-ai-purple-subtle: linear-gradient(
94
+ to right,
88
95
  var(--color-ai-solid-red-subtle),
89
96
  var(--color-ai-solid-purple-subtle) 100%
90
97
  );
91
98
  --color-gradient-image-scrim: linear-gradient(
99
+ 90deg,
92
100
  rgba(248, 248, 248, 0) 52%,
93
101
  rgba(248, 248, 248, 0.03)
94
102
  );
95
103
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
104
+ 90deg,
96
105
  rgba(237, 237, 237, 0),
97
106
  rgba(237, 237, 237, 0.6) 25%,
98
107
  rgba(237, 237, 237, 0.85) 37%,
@@ -103,6 +112,7 @@
103
112
  rgba(237, 237, 237, 0)
104
113
  );
105
114
  --color-gradient-loading-shimmer: linear-gradient(
115
+ 90deg,
106
116
  rgba(248, 248, 248, 0),
107
117
  rgba(248, 248, 248, 0.6) 25%,
108
118
  rgba(248, 248, 248, 0.85) 37%,
@@ -56,16 +56,19 @@
56
56
  --color-foreground-secondary: var(--color-neutral-500);
57
57
  --color-foreground-success: var(--color-kiwi-400);
58
58
  --color-gradient-ai-blue-strong: linear-gradient(
59
+ to right,
59
60
  var(--color-ai-solid-purple-strong),
60
61
  var(--color-ai-solid-blue-strong) 50%,
61
62
  var(--color-ai-solid-green-strong) 100%
62
63
  );
63
64
  --color-gradient-ai-blue-subtle: linear-gradient(
65
+ to right,
64
66
  var(--color-ai-solid-purple-subtle),
65
67
  var(--color-ai-solid-blue-subtle) 50%,
66
68
  var(--color-ai-solid-green-subtle) 100%
67
69
  );
68
70
  --color-gradient-ai-full-color-diagonal: linear-gradient(
71
+ 135deg,
69
72
  var(--color-ai-solid-green-strong) 10%,
70
73
  var(--color-ai-solid-blue-strong) 27%,
71
74
  var(--color-ai-solid-purple-strong) 42%,
@@ -73,26 +76,32 @@
73
76
  var(--color-ai-solid-yellow-strong) 78%
74
77
  );
75
78
  --color-gradient-ai-green-strong: linear-gradient(
79
+ to right,
76
80
  var(--color-ai-solid-blue-strong),
77
81
  var(--color-ai-solid-green-strong) 100%
78
82
  );
79
83
  --color-gradient-ai-green-subtle: linear-gradient(
84
+ to right,
80
85
  var(--color-ai-solid-blue-subtle),
81
86
  var(--color-ai-solid-green-subtle) 100%
82
87
  );
83
88
  --color-gradient-ai-purple-strong: linear-gradient(
89
+ to right,
84
90
  var(--color-ai-solid-red-strong),
85
91
  var(--color-ai-solid-purple-strong) 100%
86
92
  );
87
93
  --color-gradient-ai-purple-subtle: linear-gradient(
94
+ to right,
88
95
  var(--color-ai-solid-red-subtle),
89
96
  var(--color-ai-solid-purple-subtle) 100%
90
97
  );
91
98
  --color-gradient-image-scrim: linear-gradient(
99
+ 90deg,
92
100
  rgba(248, 248, 248, 0) 52%,
93
101
  rgba(248, 248, 248, 0.03)
94
102
  );
95
103
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
104
+ 90deg,
96
105
  rgba(35, 35, 35, 0),
97
106
  rgba(35, 35, 35, 0.6) 25%,
98
107
  rgba(35, 35, 35, 0.85) 37%,
@@ -103,6 +112,7 @@
103
112
  rgba(35, 35, 35, 0)
104
113
  );
105
114
  --color-gradient-loading-shimmer: linear-gradient(
115
+ 90deg,
106
116
  rgba(27, 27, 27, 0),
107
117
  rgba(27, 27, 27, 0.6) 25%,
108
118
  rgba(27, 27, 27, 0.85) 37%,
@@ -56,16 +56,19 @@
56
56
  --color-foreground-secondary: var(--color-neutral-500);
57
57
  --color-foreground-success: var(--color-kiwi-400);
58
58
  --color-gradient-ai-blue-strong: linear-gradient(
59
+ to right,
59
60
  var(--color-ai-solid-purple-strong),
60
61
  var(--color-ai-solid-blue-strong) 50%,
61
62
  var(--color-ai-solid-green-strong) 100%
62
63
  );
63
64
  --color-gradient-ai-blue-subtle: linear-gradient(
65
+ to right,
64
66
  var(--color-ai-solid-purple-subtle),
65
67
  var(--color-ai-solid-blue-subtle) 50%,
66
68
  var(--color-ai-solid-green-subtle) 100%
67
69
  );
68
70
  --color-gradient-ai-full-color-diagonal: linear-gradient(
71
+ 135deg,
69
72
  var(--color-ai-solid-green-strong) 10%,
70
73
  var(--color-ai-solid-blue-strong) 27%,
71
74
  var(--color-ai-solid-purple-strong) 42%,
@@ -73,26 +76,32 @@
73
76
  var(--color-ai-solid-yellow-strong) 78%
74
77
  );
75
78
  --color-gradient-ai-green-strong: linear-gradient(
79
+ to right,
76
80
  var(--color-ai-solid-blue-strong),
77
81
  var(--color-ai-solid-green-strong) 100%
78
82
  );
79
83
  --color-gradient-ai-green-subtle: linear-gradient(
84
+ to right,
80
85
  var(--color-ai-solid-blue-subtle),
81
86
  var(--color-ai-solid-green-subtle) 100%
82
87
  );
83
88
  --color-gradient-ai-purple-strong: linear-gradient(
89
+ to right,
84
90
  var(--color-ai-solid-red-strong),
85
91
  var(--color-ai-solid-purple-strong) 100%
86
92
  );
87
93
  --color-gradient-ai-purple-subtle: linear-gradient(
94
+ to right,
88
95
  var(--color-ai-solid-red-subtle),
89
96
  var(--color-ai-solid-purple-subtle) 100%
90
97
  );
91
98
  --color-gradient-image-scrim: linear-gradient(
99
+ 90deg,
92
100
  rgba(248, 248, 248, 0) 52%,
93
101
  rgba(248, 248, 248, 0.03)
94
102
  );
95
103
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
104
+ 90deg,
96
105
  rgba(35, 35, 35, 0),
97
106
  rgba(35, 35, 35, 0.6) 25%,
98
107
  rgba(35, 35, 35, 0.85) 37%,
@@ -103,6 +112,7 @@
103
112
  rgba(35, 35, 35, 0)
104
113
  );
105
114
  --color-gradient-loading-shimmer: linear-gradient(
115
+ 90deg,
106
116
  rgba(27, 27, 27, 0),
107
117
  rgba(27, 27, 27, 0.6) 25%,
108
118
  rgba(27, 27, 27, 0.85) 37%,
@@ -57,16 +57,19 @@
57
57
  --color-foreground-secondary: var(--color-neutral-500);
58
58
  --color-foreground-success: var(--color-kiwi-400);
59
59
  --color-gradient-ai-blue-strong: linear-gradient(
60
+ to right,
60
61
  var(--color-ai-solid-purple-strong),
61
62
  var(--color-ai-solid-blue-strong) 50%,
62
63
  var(--color-ai-solid-green-strong) 100%
63
64
  );
64
65
  --color-gradient-ai-blue-subtle: linear-gradient(
66
+ to right,
65
67
  var(--color-ai-solid-purple-subtle),
66
68
  var(--color-ai-solid-blue-subtle) 50%,
67
69
  var(--color-ai-solid-green-subtle) 100%
68
70
  );
69
71
  --color-gradient-ai-full-color-diagonal: linear-gradient(
72
+ 135deg,
70
73
  var(--color-ai-solid-green-strong) 10%,
71
74
  var(--color-ai-solid-blue-strong) 27%,
72
75
  var(--color-ai-solid-purple-strong) 42%,
@@ -74,26 +77,32 @@
74
77
  var(--color-ai-solid-yellow-strong) 78%
75
78
  );
76
79
  --color-gradient-ai-green-strong: linear-gradient(
80
+ to right,
77
81
  var(--color-ai-solid-blue-strong),
78
82
  var(--color-ai-solid-green-strong) 100%
79
83
  );
80
84
  --color-gradient-ai-green-subtle: linear-gradient(
85
+ to right,
81
86
  var(--color-ai-solid-blue-subtle),
82
87
  var(--color-ai-solid-green-subtle) 100%
83
88
  );
84
89
  --color-gradient-ai-purple-strong: linear-gradient(
90
+ to right,
85
91
  var(--color-ai-solid-red-strong),
86
92
  var(--color-ai-solid-purple-strong) 100%
87
93
  );
88
94
  --color-gradient-ai-purple-subtle: linear-gradient(
95
+ to right,
89
96
  var(--color-ai-solid-red-subtle),
90
97
  var(--color-ai-solid-purple-subtle) 100%
91
98
  );
92
99
  --color-gradient-image-scrim: linear-gradient(
100
+ 90deg,
93
101
  rgba(248, 248, 248, 0) 52%,
94
102
  rgba(248, 248, 248, 0.03)
95
103
  );
96
104
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
105
+ 90deg,
97
106
  rgba(35, 35, 35, 0),
98
107
  rgba(35, 35, 35, 0.6) 25%,
99
108
  rgba(35, 35, 35, 0.85) 37%,
@@ -104,6 +113,7 @@
104
113
  rgba(35, 35, 35, 0)
105
114
  );
106
115
  --color-gradient-loading-shimmer: linear-gradient(
116
+ 90deg,
107
117
  rgba(27, 27, 27, 0),
108
118
  rgba(27, 27, 27, 0.6) 25%,
109
119
  rgba(27, 27, 27, 0.85) 37%,
@@ -57,16 +57,19 @@
57
57
  --color-foreground-secondary: var(--color-neutral-500);
58
58
  --color-foreground-success: var(--color-kiwi-400);
59
59
  --color-gradient-ai-blue-strong: linear-gradient(
60
+ to right,
60
61
  var(--color-ai-solid-purple-strong),
61
62
  var(--color-ai-solid-blue-strong) 50%,
62
63
  var(--color-ai-solid-green-strong) 100%
63
64
  );
64
65
  --color-gradient-ai-blue-subtle: linear-gradient(
66
+ to right,
65
67
  var(--color-ai-solid-purple-subtle),
66
68
  var(--color-ai-solid-blue-subtle) 50%,
67
69
  var(--color-ai-solid-green-subtle) 100%
68
70
  );
69
71
  --color-gradient-ai-full-color-diagonal: linear-gradient(
72
+ 135deg,
70
73
  var(--color-ai-solid-green-strong) 10%,
71
74
  var(--color-ai-solid-blue-strong) 27%,
72
75
  var(--color-ai-solid-purple-strong) 42%,
@@ -74,26 +77,32 @@
74
77
  var(--color-ai-solid-yellow-strong) 78%
75
78
  );
76
79
  --color-gradient-ai-green-strong: linear-gradient(
80
+ to right,
77
81
  var(--color-ai-solid-blue-strong),
78
82
  var(--color-ai-solid-green-strong) 100%
79
83
  );
80
84
  --color-gradient-ai-green-subtle: linear-gradient(
85
+ to right,
81
86
  var(--color-ai-solid-blue-subtle),
82
87
  var(--color-ai-solid-green-subtle) 100%
83
88
  );
84
89
  --color-gradient-ai-purple-strong: linear-gradient(
90
+ to right,
85
91
  var(--color-ai-solid-red-strong),
86
92
  var(--color-ai-solid-purple-strong) 100%
87
93
  );
88
94
  --color-gradient-ai-purple-subtle: linear-gradient(
95
+ to right,
89
96
  var(--color-ai-solid-red-subtle),
90
97
  var(--color-ai-solid-purple-subtle) 100%
91
98
  );
92
99
  --color-gradient-image-scrim: linear-gradient(
100
+ 90deg,
93
101
  rgba(248, 248, 248, 0) 52%,
94
102
  rgba(248, 248, 248, 0.03)
95
103
  );
96
104
  --color-gradient-loading-shimmer-on-secondary: linear-gradient(
105
+ 90deg,
97
106
  rgba(35, 35, 35, 0),
98
107
  rgba(35, 35, 35, 0.6) 25%,
99
108
  rgba(35, 35, 35, 0.85) 37%,
@@ -104,6 +113,7 @@
104
113
  rgba(35, 35, 35, 0)
105
114
  );
106
115
  --color-gradient-loading-shimmer: linear-gradient(
116
+ 90deg,
107
117
  rgba(27, 27, 27, 0),
108
118
  rgba(27, 27, 27, 0.6) 25%,
109
119
  rgba(27, 27, 27, 0.85) 37%,