@ebay/skin 19.15.0 → 19.16.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 +1199 -2123
  7. package/dist/bundles/skin-full.css +1307 -2221
  8. package/dist/bundles/skin-headless.css +741 -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 +127 -0
  89. package/dist/tokens/evo-dark.css +155 -100
  90. package/dist/tokens/evo-light-class.css +125 -0
  91. package/dist/tokens/evo-light.css +156 -97
  92. package/dist/tokens/evo-live-dark-class.css +125 -0
  93. package/dist/tokens/evo-live-dark.css +125 -0
  94. package/dist/tokens/evo-live-light-class.css +127 -0
  95. package/dist/tokens/evo-live-light.css +127 -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 +0 -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 +3 -5
  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-dark-class.css ADDED
@@ -0,0 +1,127 @@
1
+ @media (prefers-color-scheme: dark) {
2
+ .evo-theme {
3
+ --color-ai-solid-blue-strong: #0968f6;
4
+ --color-ai-solid-blue-subtle: #112c31;
5
+ --color-ai-solid-green-strong: #4ee04b;
6
+ --color-ai-solid-green-subtle: #112611;
7
+ --color-ai-solid-purple-strong: #993ee0;
8
+ --color-ai-solid-purple-subtle: #20172f;
9
+ --color-ai-solid-red-strong: #ff4242;
10
+ --color-ai-solid-red-subtle: #321919;
11
+ --color-ai-solid-yellow-strong: #ffd80e;
12
+ --color-background-accent: var(--color-blue-400);
13
+ --color-background-attention: var(--color-red-400);
14
+ --color-background-disabled: var(--color-neutral-600);
15
+ --color-background-education: var(--color-indigo-800);
16
+ --color-background-elevated: var(--color-neutral-800);
17
+ --color-background-inverse: var(--color-neutral-300);
18
+ --color-background-on-image: rgba(0, 0, 0, 0.9);
19
+ --color-background-on-secondary: var(--color-neutral-900);
20
+ --color-background-primary: var(--color-neutral-900);
21
+ --color-background-secondary-on-elevated: var(--color-neutral-900);
22
+ --color-background-secondary: var(--color-neutral-800);
23
+ --color-background-strong: var(--color-neutral-200);
24
+ --color-background-success: var(--color-kiwi-500);
25
+ --color-background-tertiary: var(--color-neutral-700);
26
+ --color-background-transparent: var(--color-clear);
27
+ --color-border-accent: var(--color-blue-400);
28
+ --color-border-attention: var(--color-red-400);
29
+ --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-medium: var(--color-neutral-600);
31
+ --color-border-on-accent: var(--color-neutral-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-blue-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-neutral-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
+ }
127
+ }
package/dist/tokens/evo-dark.css CHANGED
@@ -1,53 +1,153 @@
1
1
  @media (prefers-color-scheme: dark) {
2
2
  :root {
3
- --color-background-primary: var(--color-neutral-900);
4
- --color-background-secondary: var(--color-neutral-800);
5
- --color-background-tertiary: var(--color-neutral-700);
6
- --color-background-faint: rgba(var(--color-neutral-100-rgb), 0.05);
7
- --color-background-disabled: var(--color-neutral-600);
8
- --color-background-inverse: var(--color-neutral-300);
3
+ --color-ai-solid-blue-strong: #0968f6;
4
+ --color-ai-solid-blue-subtle: #112c31;
5
+ --color-ai-solid-green-strong: #4ee04b;
6
+ --color-ai-solid-green-subtle: #112611;
7
+ --color-ai-solid-purple-strong: #993ee0;
8
+ --color-ai-solid-purple-subtle: #20172f;
9
+ --color-ai-solid-red-strong: #ff4242;
10
+ --color-ai-solid-red-subtle: #321919;
11
+ --color-ai-solid-yellow-strong: #ffd80e;
12
+ --color-background-accent: var(--color-blue-400);
9
13
  --color-background-attention: var(--color-red-400);
10
- --color-background-confirmation: var(--color-kiwi-500);
11
- --color-background-information: var(--color-blue-500);
14
+ --color-background-disabled: var(--color-neutral-600);
12
15
  --color-background-education: var(--color-indigo-800);
13
- --color-background-accent: var(--color-blue-400);
14
- --color-background-invalid: var(--color-red-200);
15
16
  --color-background-elevated: var(--color-neutral-800);
17
+ --color-background-inverse: var(--color-neutral-300);
18
+ --color-background-on-image: rgba(0, 0, 0, 0.9);
19
+ --color-background-on-secondary: var(--color-neutral-900);
20
+ --color-background-primary: var(--color-neutral-900);
21
+ --color-background-secondary-on-elevated: var(--color-neutral-900);
22
+ --color-background-secondary: var(--color-neutral-800);
16
23
  --color-background-strong: var(--color-neutral-200);
17
- --color-background-strong-rgb: var(--color-neutral-200-rgb);
18
- --color-foreground-primary: var(--color-neutral-200);
19
- --color-foreground-secondary: var(--color-neutral-500);
20
- --color-foreground-disabled: var(--color-neutral-500);
21
- --color-foreground-attention: var(--color-red-400);
22
- --color-foreground-confirmation: var(--color-kiwi-500);
23
- --color-foreground-information: var(--color-blue-400);
24
+ --color-background-success: var(--color-kiwi-500);
25
+ --color-background-tertiary: var(--color-neutral-700);
26
+ --color-background-transparent: var(--color-clear);
27
+ --color-border-accent: var(--color-blue-400);
28
+ --color-border-attention: var(--color-red-400);
29
+ --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-medium: var(--color-neutral-600);
31
+ --color-border-on-accent: var(--color-neutral-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);
24
43
  --color-foreground-accent: var(--color-blue-400);
25
- --color-foreground-visited: var(--color-pink-500);
26
- --color-foreground-on-primary: var(--color-neutral-200);
27
- --color-foreground-on-secondary: var(--color-neutral-200);
28
- --color-foreground-on-disabled: var(--color-neutral-600);
29
- --color-foreground-on-inverse: var(--color-neutral-800);
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);
30
49
  --color-foreground-on-accent: var(--color-neutral-800);
31
50
  --color-foreground-on-attention: var(--color-neutral-800);
32
- --color-foreground-on-confirmation: var(--color-neutral-800);
33
- --color-foreground-on-information: var(--color-neutral-800);
51
+ --color-foreground-on-disabled: var(--color-neutral-800);
52
+ --color-foreground-on-inverse: var(--color-neutral-800);
34
53
  --color-foreground-on-strong: var(--color-neutral-800);
35
- --color-foreground-link-visited: var(--color-pink-400);
36
- --color-foreground-link-legal: var(--color-blue-400);
37
- --color-foreground-link-primary: var(--color-foreground-primary);
38
- --color-stroke-default: var(--color-neutral-600);
39
- --color-stroke-accent: var(--color-blue-400);
40
- --color-stroke-on-accent: var(--color-neutral-800);
41
- --color-stroke-attention: var(--color-red-400);
42
- --color-stroke-on-attention: var(--color-neutral-800);
43
- --color-stroke-confirmation: var(--color-kiwi-600);
44
- --color-stroke-on-confirmation: var(--color-neutral-800);
45
- --color-stroke-information: var(--color-blue-400);
46
- --color-stroke-disabled: var(--color-neutral-500);
47
- --color-stroke-on-disabled: var(--color-neutral-800);
48
- --color-stroke-strong: var(--color-neutral-100);
49
- --color-stroke-subtle: var(--color-neutral-600);
50
- --color-stroke-inverse: 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
+ --color-background-faint: rgba(var(--color-neutral-100-rgb), 0.05);
127
+ --color-background-confirmation: var(--color-background-success);
128
+ --color-background-information: var(--color-blue-500);
129
+ --color-background-invalid: var(--color-red-200);
130
+ --color-background-strong-rgb: var(--color-neutral-200-rgb);
131
+ --color-foreground-confirmation: var(--color-foreground-success);
132
+ --color-foreground-information: var(--color-blue-400);
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);
51
151
  --color-state-visited: var(--color-magenta-3);
52
152
  --color-state-primary-hover: #17212c;
53
153
  --color-state-primary-active: #1e2a38;
@@ -88,23 +188,16 @@
88
188
  --color-data-viz-tooltip-shadow-primary: #ffffff26;
89
189
  --color-data-viz-tooltip-shadow-secondary: #ffffff2b;
90
190
  --color-scrim-image: rgba(255, 255, 255, 0.12);
91
- --color-scrim-background: rgba(0, 0, 0, 0.64);
92
191
  --state-layer-neutral: rgb(var(--color-neutral-100-rgb), 0);
93
192
  --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
94
- --state-layer-focus: rgb(
95
- var(--color-neutral-100-rgb),
96
- var(--opacity-50)
97
- );
98
- --state-layer-hover: rgb(
99
- var(--color-neutral-100-rgb),
100
- var(--opacity-50)
193
+ --state-layer-focus-on-strong: rgb(
194
+ var(--color-neutral-900-rgb),
195
+ var(--opacity-100)
101
196
  );
102
- --state-layer-pressed: rgb(
103
- var(--color-neutral-100-rgb),
197
+ --state-layer-hover-on-strong: rgb(
198
+ var(--color-neutral-900-rgb),
104
199
  var(--opacity-100)
105
200
  );
106
- --state-layer-focus-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
107
- --state-layer-hover-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
108
201
  --state-layer-pressed-on-strong: rgb(
109
202
  var(--color-neutral-900-rgb),
110
203
  var(--opacity-150)
@@ -113,59 +206,24 @@
113
206
  var(--color-neutral-100-rgb),
114
207
  var(--opacity-150)
115
208
  );
116
- --color-ai-solid-green-subtle: #112611;
117
- --color-ai-solid-blue-subtle: #112c31;
118
- --color-ai-solid-purple-subtle: #20172f;
119
- --color-ai-solid-red-subtle: #321919;
120
- --color-ai-gradient-full-spectrum: linear-gradient(
121
- 223deg,
122
- var(--color-ai-solid-yellow-strong) 9.79%,
123
- var(--color-ai-solid-red-strong) 26.69%,
124
- var(--color-ai-solid-purple-strong) 41.82%,
125
- var(--color-ai-solid-blue-strong) 56.17%,
126
- var(--color-ai-solid-green-strong) 78.48%
127
- );
128
- --color-ai-gradient-green-strong: linear-gradient(
129
- 270deg,
130
- var(--color-ai-solid-green-strong) 0%,
131
- #44cf63 25%,
132
- var(--color-ai-solid-blue-strong) 100%
209
+ --color-ai-gradient-full-spectrum: var(
210
+ --color-gradient-ai-full-color-diagonal
133
211
  );
134
- --color-ai-gradient-blue-strong: linear-gradient(
135
- 270deg,
136
- var(--color-ai-solid-green-strong) 0%,
137
- var(--color-ai-solid-blue-strong) 55.62%,
138
- #5751ea 75.7%,
139
- var(--color-ai-solid-purple-strong) 100%
212
+ --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);
213
+ --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);
214
+ --color-ai-gradient-purple-strong: var(
215
+ --color-gradient-ai-purple-strong
140
216
  );
141
- --color-ai-gradient-purple-strong: linear-gradient(
142
- 270deg,
143
- var(--color-ai-solid-purple-strong) 0%,
144
- var(--color-ai-solid-red-strong) 100%
145
- );
146
- --color-ai-gradient-purple-subtle: linear-gradient(
147
- 270deg,
148
- var(--color-ai-solid-purple-subtle) 0%,
149
- var(--color-ai-solid-red-subtle) 100%
150
- );
151
- --color-ai-gradient-blue-subtle: linear-gradient(
152
- 270deg,
153
- var(--color-ai-solid-green-subtle) -36%,
154
- var(--color-ai-solid-blue-subtle) 38.5%,
155
- var(--color-ai-solid-purple-subtle) 113%
156
- );
157
- --color-ai-gradient-green-subtle: linear-gradient(
158
- 270deg,
159
- var(--color-ai-solid-green-subtle) 0%,
160
- var(--color-ai-solid-blue-subtle) 154.5%
217
+ --color-ai-gradient-purple-subtle: var(
218
+ --color-gradient-ai-purple-subtle
161
219
  );
220
+ --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);
221
+ --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);
162
222
  --color-loading-overlay: var(--color-neutral-900-rgb), 0.7;
163
223
  --color-loading-first: var(--color-neutral-800);
164
224
  --color-loading-second: var(--color-neutral-700);
165
225
  --color-loading-on-secondary-first: var(--color-neutral-700);
166
226
  --color-loading-on-secondary-second: var(--color-neutral-600);
167
- --color-loading-fill: #2d2d2d;
168
- /* Deprecated */
169
227
  --color-loading-shimmer: linear-gradient(
170
228
  270deg,
171
229
  var(--color-loading-fill) 0%,
@@ -174,9 +232,6 @@
174
232
  var(--color-loading-fill) 66%,
175
233
  var(--color-loading-fill) 100%
176
234
  );
177
- /* Deprecated */
178
- --color-loading-fill-on-secondary: #353535;
179
- /* Deprecated */
180
235
  --color-loading-shimmer-on-secondary: linear-gradient(
181
236
  270deg,
182
237
  var(--color-loading-fill-on-secondary) 0%,
package/dist/tokens/evo-light-class.css ADDED
@@ -0,0 +1,125 @@
1
+ .evo-theme {
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);
12
+ --color-background-attention: var(--color-red-600);
13
+ --color-background-disabled: var(--color-neutral-400);
14
+ --color-background-education: var(--color-blue-100);
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);
22
+ --color-background-strong: var(--color-neutral-800);
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-medium: var(--color-neutral-500);
30
+ --color-border-on-accent: var(--color-neutral-100);
31
+ --color-border-on-attention: var(--color-neutral-100);
32
+ --color-border-on-disabled: var(--color-neutral-100);
33
+ --color-border-on-inverse: var(--color-neutral-100);
34
+ --color-border-on-success: var(--color-neutral-100);
35
+ --color-border-strong: var(--color-neutral-700);
36
+ --color-border-subtle: var(--color-neutral-300);
37
+ --color-border-success: var(--color-kiwi-600);
38
+ --color-brand-1: var(--color-red-500);
39
+ --color-brand-2: var(--color-blue-500);
40
+ --color-brand-3: var(--color-yellow-400);
41
+ --color-brand-4: var(--color-green-500);
42
+ --color-foreground-accent: var(--color-blue-500);
43
+ --color-foreground-attention: var(--color-red-600);
44
+ --color-foreground-disabled: var(--color-neutral-400);
45
+ --color-foreground-link-legal: var(--color-blue-650);
46
+ --color-foreground-link-primary: var(--color-foreground-primary);
47
+ --color-foreground-link-visited: var(--color-pink-600);
48
+ --color-foreground-on-accent: var(--color-neutral-100);
49
+ --color-foreground-on-attention: var(--color-neutral-100);
50
+ --color-foreground-on-disabled: var(--color-neutral-100);
51
+ --color-foreground-on-inverse: var(--color-neutral-100);
52
+ --color-foreground-on-strong: var(--color-neutral-100);
53
+ --color-foreground-on-success: var(--color-neutral-100);
54
+ --color-foreground-primary: var(--color-neutral-800);
55
+ --color-foreground-secondary: var(--color-neutral-600);
56
+ --color-foreground-success: var(--color-kiwi-600);
57
+ --color-gradient-ai-blue-strong: linear-gradient(
58
+ var(--color-ai-solid-purple-strong),
59
+ var(--color-ai-solid-blue-strong) 50%,
60
+ var(--color-ai-solid-green-strong) 100%
61
+ );
62
+ --color-gradient-ai-blue-subtle: linear-gradient(
63
+ var(--color-ai-solid-purple-subtle),
64
+ var(--color-ai-solid-blue-subtle) 50%,
65
+ var(--color-ai-solid-green-subtle) 100%
66
+ );
67
+ --color-gradient-ai-full-color-diagonal: linear-gradient(
68
+ var(--color-ai-solid-green-strong) 10%,
69
+ var(--color-ai-solid-blue-strong) 27%,
70
+ var(--color-ai-solid-purple-strong) 42%,
71
+ var(--color-ai-solid-red-strong) 56%,
72
+ var(--color-ai-solid-yellow-strong) 78%
73
+ );
74
+ --color-gradient-ai-green-strong: linear-gradient(
75
+ var(--color-ai-solid-blue-strong),
76
+ var(--color-ai-solid-green-strong) 100%
77
+ );
78
+ --color-gradient-ai-green-subtle: linear-gradient(
79
+ var(--color-ai-solid-blue-subtle),
80
+ var(--color-ai-solid-green-subtle) 100%
81
+ );
82
+ --color-gradient-ai-purple-strong: linear-gradient(
83
+ var(--color-ai-solid-red-strong),
84
+ var(--color-ai-solid-purple-strong) 100%
85
+ );
86
+ --color-gradient-ai-purple-subtle: linear-gradient(
87
+ var(--color-ai-solid-red-subtle),
88
+ var(--color-ai-solid-purple-subtle) 100%
89
+ );
90
+ --color-gradient-image-scrim: linear-gradient(
91
+ rgba(248, 248, 248, 0) 52%,
92
+ rgba(248, 248, 248, 0.03)
93
+ );
94
+ --color-gradient-loading-shimmer-on-secondary: linear-gradient(
95
+ rgba(237, 237, 237, 0),
96
+ rgba(237, 237, 237, 0.6) 25%,
97
+ rgba(237, 237, 237, 0.85) 37%,
98
+ rgba(237, 237, 237, 0.95) 48%,
99
+ rgba(237, 237, 237, 0.95) 51%,
100
+ rgba(237, 237, 237, 0.85) 61%,
101
+ rgba(237, 237, 237, 0.6) 74%,
102
+ rgba(237, 237, 237, 0)
103
+ );
104
+ --color-gradient-loading-shimmer: linear-gradient(
105
+ rgba(248, 248, 248, 0),
106
+ rgba(248, 248, 248, 0.6) 25%,
107
+ rgba(248, 248, 248, 0.85) 37%,
108
+ rgba(248, 248, 248, 0.95) 48%,
109
+ rgba(248, 248, 248, 0.95) 51%,
110
+ rgba(248, 248, 248, 0.85) 61%,
111
+ rgba(248, 248, 248, 0.6) 74%,
112
+ rgba(248, 248, 248, 0)
113
+ );
114
+ --color-loading-fill-on-secondary: #e4e4e4;
115
+ --color-loading-fill: #ededed;
116
+ --color-scrim-background: rgba(0, 0, 0, 0.3);
117
+ --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
118
+ --color-state-layer-focus: rgba(0, 0, 0, 0.04);
119
+ --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);
120
+ --color-state-layer-hover: rgba(0, 0, 0, 0.04);
121
+ --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);
122
+ --color-state-layer-pressed: rgba(0, 0, 0, 0.08);
123
+ --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);
124
+ --color-state-layer-selected: rgba(0, 0, 0, 0.12);
125
+ }