@ebay/skin 19.15.0 → 19.17.0

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 (134) hide show
  1. package/dist/accordion/accordion.css +1 -10
  2. package/dist/alert-dialog/alert-dialog.css +1 -11
  3. package/dist/avatar/avatar.css +1 -19
  4. package/dist/badge/badge.css +1 -1
  5. package/dist/breadcrumbs/breadcrumbs.css +1 -14
  6. package/dist/bundles/skin-default.css +1257 -2125
  7. package/dist/bundles/skin-full.css +1370 -2227
  8. package/dist/bundles/skin-headless.css +796 -1874
  9. package/dist/button/button.css +70 -107
  10. package/dist/calendar/calendar.css +42 -39
  11. package/dist/card/card.css +3 -3
  12. package/dist/carousel/carousel.css +31 -28
  13. package/dist/ccd/ccd.css +2 -5
  14. package/dist/checkbox/checkbox.css +0 -14
  15. package/dist/chip/chip.css +1 -5
  16. package/dist/chips-combobox/chips-combobox.css +4 -21
  17. package/dist/combobox/combobox.css +49 -35
  18. package/dist/confirm-dialog/confirm-dialog.css +1 -11
  19. package/dist/cta-button/cta-button.css +2 -12
  20. package/dist/date-textbox/date-textbox.css +0 -4
  21. package/dist/details/details.css +34 -17
  22. package/dist/donut-chart/donut-chart.css +2 -10
  23. package/dist/drawer-dialog/drawer-dialog.css +1 -11
  24. package/dist/education-notice/education-notice.css +4 -16
  25. package/dist/eek/eek.css +2 -28
  26. package/dist/field/field.css +2 -25
  27. package/dist/file-input/file-input.css +4 -14
  28. package/dist/file-preview-card/file-preview-card.css +46 -43
  29. package/dist/file-preview-card-group/file-preview-card-group.css +0 -3
  30. package/dist/filter-button/filter-button.css +39 -53
  31. package/dist/filter-chip/filter-chip.css +41 -18
  32. package/dist/filter-menu/filter-menu.css +108 -82
  33. package/dist/filter-menu-button/filter-menu-button.css +107 -89
  34. package/dist/flag/flag.css +0 -253
  35. package/dist/floating-label/floating-label.css +4 -20
  36. package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -10
  37. package/dist/global/global.css +2 -6
  38. package/dist/icon/icon.css +2 -2
  39. package/dist/icon-button/icon-button.css +71 -89
  40. package/dist/infotip/infotip.css +0 -24
  41. package/dist/inline-notice/inline-notice.css +0 -5
  42. package/dist/item-tile/item-tile.css +1 -0
  43. package/dist/layout-grid/layout-grid.css +0 -7
  44. package/dist/lightbox-dialog/lightbox-dialog.css +2 -24
  45. package/dist/link/link.css +0 -2
  46. package/dist/list/list.css +34 -32
  47. package/dist/listbox/listbox.css +45 -16
  48. package/dist/listbox-button/listbox-button.css +50 -35
  49. package/dist/menu/menu.css +70 -10
  50. package/dist/menu-button/menu-button.css +90 -39
  51. package/dist/mixins/_title.scss +1 -1
  52. package/dist/mixins/_typography.scss +9 -9
  53. package/dist/mixins/_utility.scss +1 -1
  54. package/dist/mixins/typography-mixins.less +10 -10
  55. package/dist/number-input/number-input.css +0 -16
  56. package/dist/page-grid/page-grid.css +0 -1
  57. package/dist/page-notice/page-notice.css +12 -33
  58. package/dist/pagination/pagination.css +39 -22
  59. package/dist/panel-dialog/panel-dialog.css +0 -14
  60. package/dist/phone-input/phone-input.css +5 -25
  61. package/dist/progress-bar/progress-bar.css +1 -6
  62. package/dist/progress-bar-expressive/progress-bar-expressive.css +4 -28
  63. package/dist/progress-spinner/progress-spinner.css +0 -2
  64. package/dist/progress-stepper/progress-stepper.css +7 -47
  65. package/dist/radio/radio.css +0 -14
  66. package/dist/section-notice/section-notice.css +5 -21
  67. package/dist/section-title/section-title.css +4 -16
  68. package/dist/segmented-buttons/segmented-buttons.css +37 -17
  69. package/dist/select/select.css +5 -17
  70. package/dist/selection-chip/selection-chip.css +30 -14
  71. package/dist/signal/signal.css +1 -1
  72. package/dist/skeleton/skeleton.css +3 -26
  73. package/dist/snackbar-dialog/snackbar-dialog.css +0 -11
  74. package/dist/star-rating/star-rating.css +0 -2
  75. package/dist/star-rating-select/star-rating-select.css +0 -7
  76. package/dist/svg/icon/icon-stepper-confirmation-24.svg +1 -1
  77. package/dist/svg/icon/icon-stepper-current-24.svg +1 -1
  78. package/dist/svg/icon/icon-stepper-upcoming-24.svg +1 -1
  79. package/dist/svg/icons.svg +3 -3
  80. package/dist/switch/switch.css +34 -19
  81. package/dist/table/table.css +4 -51
  82. package/dist/tabs/tabs.css +6 -1
  83. package/dist/textbox/textbox.css +18 -10
  84. package/dist/toast-dialog/toast-dialog.css +80 -49
  85. package/dist/toggle-button/toggle-button.css +7 -39
  86. package/dist/toggle-button-group/toggle-button-group.css +0 -16
  87. package/dist/tokens/evo-core.css +351 -165
  88. package/dist/tokens/evo-dark-class.css +128 -0
  89. package/dist/tokens/evo-dark.css +156 -100
  90. package/dist/tokens/evo-light-class.css +126 -0
  91. package/dist/tokens/evo-light.css +157 -97
  92. package/dist/tokens/evo-live-dark-class.css +126 -0
  93. package/dist/tokens/evo-live-dark.css +126 -0
  94. package/dist/tokens/evo-live-light-class.css +128 -0
  95. package/dist/tokens/evo-live-light.css +128 -0
  96. package/dist/tooltip/tooltip.css +0 -23
  97. package/dist/tourtip/tourtip.css +0 -27
  98. package/dist/typography/typography.css +8 -28
  99. package/dist/utility/utility.css +1 -8
  100. package/dist/video/video.css +56 -15
  101. package/evo-class.css +2 -0
  102. package/evo-class.js +2 -0
  103. package/evo-class.mjs +2 -0
  104. package/evo-live-class.css +2 -0
  105. package/evo-live-class.js +2 -0
  106. package/evo-live-class.mjs +2 -0
  107. package/evo-live.css +2 -0
  108. package/evo-live.js +2 -0
  109. package/evo-live.mjs +2 -0
  110. package/package.json +4 -8
  111. package/tokens/evo-dark-class.browser.json +1 -0
  112. package/tokens/evo-dark-class.css +1 -0
  113. package/tokens/evo-dark-class.js +1 -0
  114. package/tokens/evo-dark-class.mjs +1 -0
  115. package/tokens/evo-light-class.browser.json +1 -0
  116. package/tokens/evo-light-class.css +1 -0
  117. package/tokens/evo-light-class.js +1 -0
  118. package/tokens/evo-light-class.mjs +1 -0
  119. package/tokens/evo-live-dark-class.browser.json +1 -0
  120. package/tokens/evo-live-dark-class.css +1 -0
  121. package/tokens/evo-live-dark-class.js +1 -0
  122. package/tokens/evo-live-dark-class.mjs +1 -0
  123. package/tokens/evo-live-dark.browser.json +1 -0
  124. package/tokens/evo-live-dark.css +1 -0
  125. package/tokens/evo-live-dark.js +1 -0
  126. package/tokens/evo-live-dark.mjs +1 -0
  127. package/tokens/evo-live-light-class.browser.json +1 -0
  128. package/tokens/evo-live-light-class.css +1 -0
  129. package/tokens/evo-live-light-class.js +1 -0
  130. package/tokens/evo-live-light-class.mjs +1 -0
  131. package/tokens/evo-live-light.browser.json +1 -0
  132. package/tokens/evo-live-light.css +1 -0
  133. package/tokens/evo-live-light.js +1 -0
  134. package/tokens/evo-live-light.mjs +1 -0
package/dist/tokens/evo-light.css CHANGED
@@ -1,52 +1,153 @@
1
1
  :root {
2
- --color-background-primary: var(--color-neutral-100);
3
- --color-background-secondary: var(--color-neutral-200);
4
- --color-background-tertiary: var(--color-neutral-300);
5
- --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
6
- --color-background-disabled: var(--color-neutral-400);
7
- --color-background-inverse: var(--color-neutral-700);
2
+ --color-ai-solid-blue-strong: #0968f6;
3
+ --color-ai-solid-blue-subtle: #f0f6fe;
4
+ --color-ai-solid-green-strong: #4ee04b;
5
+ --color-ai-solid-green-subtle: #f1fdf1;
6
+ --color-ai-solid-purple-strong: #993ee0;
7
+ --color-ai-solid-purple-subtle: #f9f3fd;
8
+ --color-ai-solid-red-strong: #ff4242;
9
+ --color-ai-solid-red-subtle: #fff4f4;
10
+ --color-ai-solid-yellow-strong: #ffd80e;
11
+ --color-background-accent: var(--color-blue-500);
8
12
  --color-background-attention: var(--color-red-600);
9
- --color-background-confirmation: var(--color-kiwi-600);
10
- --color-background-information: var(--color-blue-500);
13
+ --color-background-disabled: var(--color-neutral-400);
11
14
  --color-background-education: var(--color-blue-100);
12
- --color-background-accent: var(--color-blue-500);
13
- --color-background-invalid: var(--color-red-200);
14
15
  --color-background-elevated: var(--color-neutral-100);
16
+ --color-background-inverse: var(--color-neutral-700);
17
+ --color-background-on-image: rgba(255, 255, 255, 0.9);
18
+ --color-background-on-secondary: var(--color-neutral-100);
19
+ --color-background-primary: var(--color-neutral-100);
20
+ --color-background-secondary-on-elevated: var(--color-neutral-200);
21
+ --color-background-secondary: var(--color-neutral-200);
15
22
  --color-background-strong: var(--color-neutral-800);
16
- --color-background-strong-rgb: var(--color-neutral-800-rgb);
17
- --color-foreground-primary: var(--color-neutral-800);
18
- --color-foreground-secondary: var(--color-neutral-600);
19
- --color-foreground-disabled: var(--color-neutral-400);
20
- --color-foreground-attention: var(--color-red-600);
21
- --color-foreground-confirmation: var(--color-kiwi-600);
22
- --color-foreground-information: var(--color-blue-500);
23
+ --color-background-success: var(--color-kiwi-600);
24
+ --color-background-tertiary: var(--color-neutral-300);
25
+ --color-background-transparent: var(--color-clear);
26
+ --color-border-accent: var(--color-blue-500);
27
+ --color-border-attention: var(--color-red-600);
28
+ --color-border-disabled: var(--color-neutral-400);
29
+ --color-border-inverse: var(--color-neutral-100);
30
+ --color-border-medium: var(--color-neutral-500);
31
+ --color-border-on-accent: var(--color-neutral-100);
32
+ --color-border-on-attention: var(--color-neutral-100);
33
+ --color-border-on-disabled: var(--color-neutral-100);
34
+ --color-border-on-inverse: var(--color-neutral-100);
35
+ --color-border-on-success: var(--color-neutral-100);
36
+ --color-border-strong: var(--color-neutral-700);
37
+ --color-border-subtle: var(--color-neutral-300);
38
+ --color-border-success: var(--color-kiwi-600);
39
+ --color-brand-1: var(--color-red-500);
40
+ --color-brand-2: var(--color-blue-500);
41
+ --color-brand-3: var(--color-yellow-400);
42
+ --color-brand-4: var(--color-green-500);
23
43
  --color-foreground-accent: var(--color-blue-500);
24
- --color-foreground-visited: var(--color-pink-600);
25
- --color-foreground-on-primary: var(--color-neutral-800);
26
- --color-foreground-on-secondary: var(--color-neutral-800);
27
- --color-foreground-on-disabled: var(--color-neutral-300);
28
- --color-foreground-on-inverse: var(--color-neutral-100);
44
+ --color-foreground-attention: var(--color-red-600);
45
+ --color-foreground-disabled: var(--color-neutral-400);
46
+ --color-foreground-link-legal: var(--color-blue-650);
47
+ --color-foreground-link-primary: var(--color-foreground-primary);
48
+ --color-foreground-link-visited: var(--color-pink-600);
29
49
  --color-foreground-on-accent: var(--color-neutral-100);
30
50
  --color-foreground-on-attention: var(--color-neutral-100);
31
- --color-foreground-on-confirmation: var(--color-neutral-100);
32
- --color-foreground-on-information: var(--color-neutral-100);
51
+ --color-foreground-on-disabled: var(--color-neutral-100);
52
+ --color-foreground-on-inverse: var(--color-neutral-100);
33
53
  --color-foreground-on-strong: var(--color-neutral-100);
34
- --color-foreground-link-visited: var(--color-pink-600);
35
- --color-foreground-link-legal: var(--color-blue-650);
36
- --color-foreground-link-primary: var(--color-foreground-primary);
37
- --color-stroke-default: var(--color-neutral-500);
38
- --color-stroke-accent: var(--color-blue-500);
39
- --color-stroke-on-accent: var(--color-neutral-100);
40
- --color-stroke-attention: var(--color-red-600);
41
- --color-stroke-on-attention: var(--color-neutral-100);
42
- --color-stroke-confirmation: var(--color-kiwi-600);
43
- --color-stroke-on-confirmation: var(--color-neutral-100);
44
- --color-stroke-information: var(--color-blue-500);
45
- --color-stroke-disabled: var(--color-neutral-400);
46
- --color-stroke-on-disabled: var(--color-neutral-100);
47
- --color-stroke-strong: var(--color-neutral-800);
48
- --color-stroke-inverse: var(--color-neutral-100);
49
- --color-stroke-subtle: var(--color-neutral-300);
54
+ --color-foreground-on-success: var(--color-neutral-100);
55
+ --color-foreground-primary: var(--color-neutral-800);
56
+ --color-foreground-secondary: var(--color-neutral-600);
57
+ --color-foreground-success: var(--color-kiwi-600);
58
+ --color-gradient-ai-blue-strong: linear-gradient(
59
+ var(--color-ai-solid-purple-strong),
60
+ var(--color-ai-solid-blue-strong) 50%,
61
+ var(--color-ai-solid-green-strong) 100%
62
+ );
63
+ --color-gradient-ai-blue-subtle: linear-gradient(
64
+ var(--color-ai-solid-purple-subtle),
65
+ var(--color-ai-solid-blue-subtle) 50%,
66
+ var(--color-ai-solid-green-subtle) 100%
67
+ );
68
+ --color-gradient-ai-full-color-diagonal: linear-gradient(
69
+ var(--color-ai-solid-green-strong) 10%,
70
+ var(--color-ai-solid-blue-strong) 27%,
71
+ var(--color-ai-solid-purple-strong) 42%,
72
+ var(--color-ai-solid-red-strong) 56%,
73
+ var(--color-ai-solid-yellow-strong) 78%
74
+ );
75
+ --color-gradient-ai-green-strong: linear-gradient(
76
+ var(--color-ai-solid-blue-strong),
77
+ var(--color-ai-solid-green-strong) 100%
78
+ );
79
+ --color-gradient-ai-green-subtle: linear-gradient(
80
+ var(--color-ai-solid-blue-subtle),
81
+ var(--color-ai-solid-green-subtle) 100%
82
+ );
83
+ --color-gradient-ai-purple-strong: linear-gradient(
84
+ var(--color-ai-solid-red-strong),
85
+ var(--color-ai-solid-purple-strong) 100%
86
+ );
87
+ --color-gradient-ai-purple-subtle: linear-gradient(
88
+ var(--color-ai-solid-red-subtle),
89
+ var(--color-ai-solid-purple-subtle) 100%
90
+ );
91
+ --color-gradient-image-scrim: linear-gradient(
92
+ rgba(248, 248, 248, 0) 52%,
93
+ rgba(248, 248, 248, 0.03)
94
+ );
95
+ --color-gradient-loading-shimmer-on-secondary: linear-gradient(
96
+ rgba(237, 237, 237, 0),
97
+ rgba(237, 237, 237, 0.6) 25%,
98
+ rgba(237, 237, 237, 0.85) 37%,
99
+ rgba(237, 237, 237, 0.95) 48%,
100
+ rgba(237, 237, 237, 0.95) 51%,
101
+ rgba(237, 237, 237, 0.85) 61%,
102
+ rgba(237, 237, 237, 0.6) 74%,
103
+ rgba(237, 237, 237, 0)
104
+ );
105
+ --color-gradient-loading-shimmer: linear-gradient(
106
+ rgba(248, 248, 248, 0),
107
+ rgba(248, 248, 248, 0.6) 25%,
108
+ rgba(248, 248, 248, 0.85) 37%,
109
+ rgba(248, 248, 248, 0.95) 48%,
110
+ rgba(248, 248, 248, 0.95) 51%,
111
+ rgba(248, 248, 248, 0.85) 61%,
112
+ rgba(248, 248, 248, 0.6) 74%,
113
+ rgba(248, 248, 248, 0)
114
+ );
115
+ --color-loading-fill-on-secondary: #e4e4e4;
116
+ --color-loading-fill: #ededed;
117
+ --color-scrim-background: rgba(0, 0, 0, 0.3);
118
+ --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
119
+ --color-state-layer-focus: rgba(0, 0, 0, 0.04);
120
+ --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);
121
+ --color-state-layer-hover: rgba(0, 0, 0, 0.04);
122
+ --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);
123
+ --color-state-layer-pressed: rgba(0, 0, 0, 0.08);
124
+ --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);
125
+ --color-state-layer-selected: rgba(0, 0, 0, 0.12);
126
+ --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
127
+ --color-background-confirmation: var(--color-background-success);
128
+ --color-background-information: var(--color-background-accent);
129
+ --color-background-invalid: var(--color-red-200);
130
+ --color-background-strong-rgb: var(--color-neutral-800-rgb);
131
+ --color-foreground-confirmation: var(--color-foreground-success);
132
+ --color-foreground-information: var(--color-foreground-accent);
133
+ --color-foreground-visited: var(--color-foreground-link-visited);
134
+ --color-foreground-on-primary: var(--color-foreground-primary);
135
+ --color-foreground-on-secondary: var(--color-foreground-secondary);
136
+ --color-foreground-on-confirmation: var(--color-foreground-on-success);
137
+ --color-foreground-on-information: var(--color-foreground-on-success);
138
+ --color-stroke-default: var(--color-border-medium);
139
+ --color-stroke-accent: var(--color-border-accent);
140
+ --color-stroke-on-accent: var(--color-border-on-accent);
141
+ --color-stroke-attention: var(--color-border-attention);
142
+ --color-stroke-on-attention: var(--color-border-on-attention);
143
+ --color-stroke-confirmation: var(--color-border-success);
144
+ --color-stroke-on-confirmation: var(--color-border-on-success);
145
+ --color-stroke-information: var(--color-border-accent);
146
+ --color-stroke-disabled: var(--color-border-disabled);
147
+ --color-stroke-on-disabled: var(--color-border-on-disabled);
148
+ --color-stroke-strong: var(--color-border-strong);
149
+ --color-stroke-subtle: var(--color-border-subtle);
150
+ --color-stroke-inverse: var(--color-border-on-inverse);
50
151
  --color-state-visited: var(--color-pink-600);
51
152
  --color-state-focus-stroke: #005fcc;
52
153
  --color-state-primary-hover: #f5f5f5;
@@ -88,7 +189,6 @@
88
189
  --color-data-viz-tooltip-shadow-primary: #00000026;
89
190
  --color-data-viz-tooltip-shadow-secondary: #0000002b;
90
191
  --color-scrim-image: rgba(0, 0, 0, 0.04);
91
- --color-scrim-background: rgba(0, 0, 0, 0.32);
92
192
  --color-marketing-lime-foreground-4: var(--color-green-700);
93
193
  --color-marketing-lime-background-4: var(--color-avocado-500);
94
194
  --color-marketing-green-foreground-3: var(--color-kiwi-700);
@@ -105,70 +205,33 @@
105
205
  --color-marketing-magenta-background-4: var(--color-pink-400);
106
206
  --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
107
207
  --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);
108
- --state-layer-focus: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
109
- --state-layer-hover: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
110
- --state-layer-pressed: rgb(
111
- var(--color-neutral-900-rgb),
112
- var(--opacity-100)
113
- );
114
- --state-layer-focus-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
115
- --state-layer-hover-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
208
+ --state-layer-focus-on-strong: rgb(
209
+ var(--color-neutral-100-rgb),
210
+ var(--opacity-150)
211
+ );
212
+ --state-layer-hover-on-strong: rgb(
213
+ var(--color-neutral-100-rgb),
214
+ var(--opacity-150)
215
+ );
116
216
  --state-layer-pressed-on-strong: rgb(
117
217
  var(--color-neutral-100-rgb),
118
218
  var(--opacity-200)
119
219
  );
120
-
121
220
  --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));
122
- --color-ai-gradient-full-spectrum: linear-gradient(
123
- 223deg,
124
- var(--color-ai-solid-yellow-strong) 9.79%,
125
- var(--color-ai-solid-red-strong) 26.69%,
126
- var(--color-ai-solid-purple-strong) 41.82%,
127
- var(--color-ai-solid-blue-strong) 56.17%,
128
- var(--color-ai-solid-green-strong) 78.48%
129
- );
130
- --color-ai-gradient-green-strong: linear-gradient(
131
- 270deg,
132
- var(--color-ai-solid-green-strong) 0%,
133
- #44cf63 25%,
134
- var(--color-ai-solid-blue-strong) 100%
135
- );
136
- --color-ai-gradient-blue-strong: linear-gradient(
137
- 270deg,
138
- var(--color-ai-solid-green-strong) 0%,
139
- var(--color-ai-solid-blue-strong) 55.62%,
140
- #5751ea 75.7%,
141
- var(--color-ai-solid-purple-strong) 100%
142
- );
143
- --color-ai-gradient-purple-strong: linear-gradient(
144
- 270deg,
145
- var(--color-ai-solid-purple-strong) 0%,
146
- var(--color-ai-solid-red-strong) 100%
147
- );
148
- --color-ai-gradient-purple-subtle: linear-gradient(
149
- 270deg,
150
- var(--color-ai-solid-purple-subtle) 0%,
151
- var(--color-ai-solid-red-subtle) 100%
152
- );
153
- --color-ai-gradient-blue-subtle: linear-gradient(
154
- 270deg,
155
- var(--color-ai-solid-green-subtle) -36%,
156
- var(--color-ai-solid-blue-subtle) 38.5%,
157
- var(--color-ai-solid-purple-subtle) 113%
158
- );
159
- --color-ai-gradient-green-subtle: linear-gradient(
160
- 270deg,
161
- var(--color-ai-solid-green-subtle) 0%,
162
- var(--color-ai-solid-blue-subtle) 154.5%
221
+ --color-ai-gradient-full-spectrum: var(
222
+ --color-gradient-ai-full-color-diagonal
163
223
  );
224
+ --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);
225
+ --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);
226
+ --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);
227
+ --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);
228
+ --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);
229
+ --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);
164
230
  --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;
165
231
  --color-loading-first: var(--color-neutral-200);
166
232
  --color-loading-second: var(--color-neutral-300);
167
233
  --color-loading-on-secondary-first: var(--color-neutral-300);
168
234
  --color-loading-on-secondary-second: var(--color-neutral-400);
169
- /* Deprecated */
170
- --color-loading-fill: #ededed;
171
- /* Deprecated */
172
235
  --color-loading-shimmer: linear-gradient(
173
236
  270deg,
174
237
  var(--color-loading-fill) 0%,
@@ -177,9 +240,6 @@
177
240
  var(--color-loading-fill) 66%,
178
241
  var(--color-loading-fill) 100%
179
242
  );
180
- /* Deprecated */
181
- --color-loading-fill-on-secondary: #e4e4e4;
182
- /* Deprecated */
183
243
  --color-loading-shimmer-on-secondary: linear-gradient(
184
244
  270deg,
185
245
  var(--color-loading-fill-on-secondary) 0%,
package/dist/tokens/evo-live-dark-class.css ADDED
@@ -0,0 +1,126 @@
1
+ .evo-theme-live {
2
+ --color-ai-solid-blue-strong: #0968f6;
3
+ --color-ai-solid-blue-subtle: #112c31;
4
+ --color-ai-solid-green-strong: #4ee04b;
5
+ --color-ai-solid-green-subtle: #112611;
6
+ --color-ai-solid-purple-strong: #993ee0;
7
+ --color-ai-solid-purple-subtle: #20172f;
8
+ --color-ai-solid-red-strong: #ff4242;
9
+ --color-ai-solid-red-subtle: #321919;
10
+ --color-ai-solid-yellow-strong: #ffd80e;
11
+ --color-background-accent: var(--color-kiwi-400);
12
+ --color-background-attention: var(--color-red-400);
13
+ --color-background-disabled: var(--color-neutral-600);
14
+ --color-background-education: var(--color-indigo-800);
15
+ --color-background-elevated: var(--color-neutral-800);
16
+ --color-background-inverse: var(--color-neutral-300);
17
+ --color-background-on-image: rgba(0, 0, 0, 0.9);
18
+ --color-background-on-secondary: var(--color-neutral-900);
19
+ --color-background-primary: var(--color-neutral-900);
20
+ --color-background-secondary-on-elevated: var(--color-neutral-900);
21
+ --color-background-secondary: var(--color-neutral-800);
22
+ --color-background-strong: var(--color-neutral-200);
23
+ --color-background-success: var(--color-kiwi-500);
24
+ --color-background-tertiary: var(--color-neutral-700);
25
+ --color-background-transparent: var(--color-clear);
26
+ --color-border-accent: var(--color-kiwi-400);
27
+ --color-border-attention: var(--color-red-400);
28
+ --color-border-disabled: var(--color-neutral-700);
29
+ --color-border-inverse: var(--color-neutral-900);
30
+ --color-border-medium: var(--color-neutral-600);
31
+ --color-border-on-accent: var(--color-kiwi-800);
32
+ --color-border-on-attention: var(--color-neutral-800);
33
+ --color-border-on-disabled: var(--color-neutral-800);
34
+ --color-border-on-inverse: var(--color-neutral-800);
35
+ --color-border-on-success: var(--color-neutral-800);
36
+ --color-border-strong: var(--color-neutral-100);
37
+ --color-border-subtle: var(--color-neutral-700);
38
+ --color-border-success: var(--color-kiwi-500);
39
+ --color-brand-1: var(--color-red-500);
40
+ --color-brand-2: var(--color-blue-500);
41
+ --color-brand-3: var(--color-yellow-400);
42
+ --color-brand-4: var(--color-green-500);
43
+ --color-foreground-accent: var(--color-kiwi-400);
44
+ --color-foreground-attention: var(--color-red-400);
45
+ --color-foreground-disabled: var(--color-neutral-600);
46
+ --color-foreground-link-legal: var(--color-blue-400);
47
+ --color-foreground-link-primary: var(--color-foreground-primary);
48
+ --color-foreground-link-visited: var(--color-pink-400);
49
+ --color-foreground-on-accent: var(--color-kiwi-800);
50
+ --color-foreground-on-attention: var(--color-neutral-800);
51
+ --color-foreground-on-disabled: var(--color-neutral-800);
52
+ --color-foreground-on-inverse: var(--color-neutral-800);
53
+ --color-foreground-on-strong: var(--color-neutral-800);
54
+ --color-foreground-on-success: var(--color-neutral-800);
55
+ --color-foreground-primary: var(--color-neutral-200);
56
+ --color-foreground-secondary: var(--color-neutral-500);
57
+ --color-foreground-success: var(--color-kiwi-400);
58
+ --color-gradient-ai-blue-strong: linear-gradient(
59
+ var(--color-ai-solid-purple-strong),
60
+ var(--color-ai-solid-blue-strong) 50%,
61
+ var(--color-ai-solid-green-strong) 100%
62
+ );
63
+ --color-gradient-ai-blue-subtle: linear-gradient(
64
+ var(--color-ai-solid-purple-subtle),
65
+ var(--color-ai-solid-blue-subtle) 50%,
66
+ var(--color-ai-solid-green-subtle) 100%
67
+ );
68
+ --color-gradient-ai-full-color-diagonal: linear-gradient(
69
+ var(--color-ai-solid-green-strong) 10%,
70
+ var(--color-ai-solid-blue-strong) 27%,
71
+ var(--color-ai-solid-purple-strong) 42%,
72
+ var(--color-ai-solid-red-strong) 56%,
73
+ var(--color-ai-solid-yellow-strong) 78%
74
+ );
75
+ --color-gradient-ai-green-strong: linear-gradient(
76
+ var(--color-ai-solid-blue-strong),
77
+ var(--color-ai-solid-green-strong) 100%
78
+ );
79
+ --color-gradient-ai-green-subtle: linear-gradient(
80
+ var(--color-ai-solid-blue-subtle),
81
+ var(--color-ai-solid-green-subtle) 100%
82
+ );
83
+ --color-gradient-ai-purple-strong: linear-gradient(
84
+ var(--color-ai-solid-red-strong),
85
+ var(--color-ai-solid-purple-strong) 100%
86
+ );
87
+ --color-gradient-ai-purple-subtle: linear-gradient(
88
+ var(--color-ai-solid-red-subtle),
89
+ var(--color-ai-solid-purple-subtle) 100%
90
+ );
91
+ --color-gradient-image-scrim: linear-gradient(
92
+ rgba(248, 248, 248, 0) 52%,
93
+ rgba(248, 248, 248, 0.03)
94
+ );
95
+ --color-gradient-loading-shimmer-on-secondary: linear-gradient(
96
+ rgba(35, 35, 35, 0),
97
+ rgba(35, 35, 35, 0.6) 25%,
98
+ rgba(35, 35, 35, 0.85) 37%,
99
+ rgba(35, 35, 35, 0.95) 48%,
100
+ rgba(35, 35, 35, 0.95) 51%,
101
+ rgba(35, 35, 35, 0.85) 61%,
102
+ rgba(35, 35, 35, 0.6) 74%,
103
+ rgba(35, 35, 35, 0)
104
+ );
105
+ --color-gradient-loading-shimmer: linear-gradient(
106
+ rgba(27, 27, 27, 0),
107
+ rgba(27, 27, 27, 0.6) 25%,
108
+ rgba(27, 27, 27, 0.85) 37%,
109
+ rgba(27, 27, 27, 0.95) 48%,
110
+ rgba(27, 27, 27, 0.95) 51%,
111
+ rgba(27, 27, 27, 0.85) 61%,
112
+ rgba(27, 27, 27, 0.6) 74%,
113
+ rgba(27, 27, 27, 0)
114
+ );
115
+ --color-loading-fill-on-secondary: #353535;
116
+ --color-loading-fill: #2d2d2d;
117
+ --color-scrim-background: rgba(0, 0, 0, 0.64);
118
+ --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
119
+ --color-state-layer-focus: rgba(255, 255, 255, 0.08);
120
+ --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08);
121
+ --color-state-layer-hover: rgba(255, 255, 255, 0.08);
122
+ --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12);
123
+ --color-state-layer-pressed: rgba(255, 255, 255, 0.12);
124
+ --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16);
125
+ --color-state-layer-selected: rgba(255, 255, 255, 0.16);
126
+ }
package/dist/tokens/evo-live-dark.css ADDED
@@ -0,0 +1,126 @@
1
+ :root {
2
+ --color-ai-solid-blue-strong: #0968f6;
3
+ --color-ai-solid-blue-subtle: #112c31;
4
+ --color-ai-solid-green-strong: #4ee04b;
5
+ --color-ai-solid-green-subtle: #112611;
6
+ --color-ai-solid-purple-strong: #993ee0;
7
+ --color-ai-solid-purple-subtle: #20172f;
8
+ --color-ai-solid-red-strong: #ff4242;
9
+ --color-ai-solid-red-subtle: #321919;
10
+ --color-ai-solid-yellow-strong: #ffd80e;
11
+ --color-background-accent: var(--color-kiwi-400);
12
+ --color-background-attention: var(--color-red-400);
13
+ --color-background-disabled: var(--color-neutral-600);
14
+ --color-background-education: var(--color-indigo-800);
15
+ --color-background-elevated: var(--color-neutral-800);
16
+ --color-background-inverse: var(--color-neutral-300);
17
+ --color-background-on-image: rgba(0, 0, 0, 0.9);
18
+ --color-background-on-secondary: var(--color-neutral-900);
19
+ --color-background-primary: var(--color-neutral-900);
20
+ --color-background-secondary-on-elevated: var(--color-neutral-900);
21
+ --color-background-secondary: var(--color-neutral-800);
22
+ --color-background-strong: var(--color-neutral-200);
23
+ --color-background-success: var(--color-kiwi-500);
24
+ --color-background-tertiary: var(--color-neutral-700);
25
+ --color-background-transparent: var(--color-clear);
26
+ --color-border-accent: var(--color-kiwi-400);
27
+ --color-border-attention: var(--color-red-400);
28
+ --color-border-disabled: var(--color-neutral-700);
29
+ --color-border-inverse: var(--color-neutral-900);
30
+ --color-border-medium: var(--color-neutral-600);
31
+ --color-border-on-accent: var(--color-kiwi-800);
32
+ --color-border-on-attention: var(--color-neutral-800);
33
+ --color-border-on-disabled: var(--color-neutral-800);
34
+ --color-border-on-inverse: var(--color-neutral-800);
35
+ --color-border-on-success: var(--color-neutral-800);
36
+ --color-border-strong: var(--color-neutral-100);
37
+ --color-border-subtle: var(--color-neutral-700);
38
+ --color-border-success: var(--color-kiwi-500);
39
+ --color-brand-1: var(--color-red-500);
40
+ --color-brand-2: var(--color-blue-500);
41
+ --color-brand-3: var(--color-yellow-400);
42
+ --color-brand-4: var(--color-green-500);
43
+ --color-foreground-accent: var(--color-kiwi-400);
44
+ --color-foreground-attention: var(--color-red-400);
45
+ --color-foreground-disabled: var(--color-neutral-600);
46
+ --color-foreground-link-legal: var(--color-blue-400);
47
+ --color-foreground-link-primary: var(--color-foreground-primary);
48
+ --color-foreground-link-visited: var(--color-pink-400);
49
+ --color-foreground-on-accent: var(--color-kiwi-800);
50
+ --color-foreground-on-attention: var(--color-neutral-800);
51
+ --color-foreground-on-disabled: var(--color-neutral-800);
52
+ --color-foreground-on-inverse: var(--color-neutral-800);
53
+ --color-foreground-on-strong: var(--color-neutral-800);
54
+ --color-foreground-on-success: var(--color-neutral-800);
55
+ --color-foreground-primary: var(--color-neutral-200);
56
+ --color-foreground-secondary: var(--color-neutral-500);
57
+ --color-foreground-success: var(--color-kiwi-400);
58
+ --color-gradient-ai-blue-strong: linear-gradient(
59
+ var(--color-ai-solid-purple-strong),
60
+ var(--color-ai-solid-blue-strong) 50%,
61
+ var(--color-ai-solid-green-strong) 100%
62
+ );
63
+ --color-gradient-ai-blue-subtle: linear-gradient(
64
+ var(--color-ai-solid-purple-subtle),
65
+ var(--color-ai-solid-blue-subtle) 50%,
66
+ var(--color-ai-solid-green-subtle) 100%
67
+ );
68
+ --color-gradient-ai-full-color-diagonal: linear-gradient(
69
+ var(--color-ai-solid-green-strong) 10%,
70
+ var(--color-ai-solid-blue-strong) 27%,
71
+ var(--color-ai-solid-purple-strong) 42%,
72
+ var(--color-ai-solid-red-strong) 56%,
73
+ var(--color-ai-solid-yellow-strong) 78%
74
+ );
75
+ --color-gradient-ai-green-strong: linear-gradient(
76
+ var(--color-ai-solid-blue-strong),
77
+ var(--color-ai-solid-green-strong) 100%
78
+ );
79
+ --color-gradient-ai-green-subtle: linear-gradient(
80
+ var(--color-ai-solid-blue-subtle),
81
+ var(--color-ai-solid-green-subtle) 100%
82
+ );
83
+ --color-gradient-ai-purple-strong: linear-gradient(
84
+ var(--color-ai-solid-red-strong),
85
+ var(--color-ai-solid-purple-strong) 100%
86
+ );
87
+ --color-gradient-ai-purple-subtle: linear-gradient(
88
+ var(--color-ai-solid-red-subtle),
89
+ var(--color-ai-solid-purple-subtle) 100%
90
+ );
91
+ --color-gradient-image-scrim: linear-gradient(
92
+ rgba(248, 248, 248, 0) 52%,
93
+ rgba(248, 248, 248, 0.03)
94
+ );
95
+ --color-gradient-loading-shimmer-on-secondary: linear-gradient(
96
+ rgba(35, 35, 35, 0),
97
+ rgba(35, 35, 35, 0.6) 25%,
98
+ rgba(35, 35, 35, 0.85) 37%,
99
+ rgba(35, 35, 35, 0.95) 48%,
100
+ rgba(35, 35, 35, 0.95) 51%,
101
+ rgba(35, 35, 35, 0.85) 61%,
102
+ rgba(35, 35, 35, 0.6) 74%,
103
+ rgba(35, 35, 35, 0)
104
+ );
105
+ --color-gradient-loading-shimmer: linear-gradient(
106
+ rgba(27, 27, 27, 0),
107
+ rgba(27, 27, 27, 0.6) 25%,
108
+ rgba(27, 27, 27, 0.85) 37%,
109
+ rgba(27, 27, 27, 0.95) 48%,
110
+ rgba(27, 27, 27, 0.95) 51%,
111
+ rgba(27, 27, 27, 0.85) 61%,
112
+ rgba(27, 27, 27, 0.6) 74%,
113
+ rgba(27, 27, 27, 0)
114
+ );
115
+ --color-loading-fill-on-secondary: #353535;
116
+ --color-loading-fill: #2d2d2d;
117
+ --color-scrim-background: rgba(0, 0, 0, 0.64);
118
+ --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
119
+ --color-state-layer-focus: rgba(255, 255, 255, 0.08);
120
+ --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08);
121
+ --color-state-layer-hover: rgba(255, 255, 255, 0.08);
122
+ --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12);
123
+ --color-state-layer-pressed: rgba(255, 255, 255, 0.12);
124
+ --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16);
125
+ --color-state-layer-selected: rgba(255, 255, 255, 0.16);
126
+ }