@telefonica/mistica 17.3.0 → 17.4.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 (334) hide show
  1. package/css/blau.css +24 -16
  2. package/css/esimflag.css +35 -18
  3. package/css/mistica.css +1 -1
  4. package/css/movistar.css +29 -18
  5. package/css/o2.css +26 -18
  6. package/css/telefonica.css +38 -18
  7. package/css/vivo-evolution.css +66 -20
  8. package/css/vivo.css +26 -18
  9. package/dist/accordion.css-mistica.js +10 -10
  10. package/dist/align.css-mistica.js +1 -1
  11. package/dist/autocomplete.css-mistica.js +4 -4
  12. package/dist/avatar.css-mistica.js +1 -1
  13. package/dist/badge.css-mistica.js +1 -1
  14. package/dist/box.css-mistica.js +13 -13
  15. package/dist/boxed.css-mistica.js +24 -24
  16. package/dist/boxed.d.ts +9 -0
  17. package/dist/boxed.js +18 -15
  18. package/dist/button-group.css-mistica.js +1 -1
  19. package/dist/button-layout.css-mistica.js +19 -19
  20. package/dist/button.css-mistica.js +50 -50
  21. package/dist/callout.css-mistica.js +13 -13
  22. package/dist/card-internal.css-mistica.js +22 -22
  23. package/dist/carousel.css-mistica.js +30 -30
  24. package/dist/checkbox.css-mistica.js +15 -15
  25. package/dist/chip.css-mistica.js +18 -18
  26. package/dist/circle.css-mistica.js +2 -2
  27. package/dist/community/advanced-data-card.css-mistica.js +19 -19
  28. package/dist/community/ai-card.css-mistica.js +12 -12
  29. package/dist/community/blocks.css-mistica.js +1 -1
  30. package/dist/community/cyber/example-component.css-mistica.js +1 -1
  31. package/dist/community/example-component.css-mistica.js +2 -2
  32. package/dist/community/skins/cyber-skin.js +19 -17
  33. package/dist/counter.css-mistica.js +6 -6
  34. package/dist/cover-hero.css-mistica.js +7 -7
  35. package/dist/credit-card-number-field.css-mistica.js +3 -3
  36. package/dist/date-field.css-mistica.js +1 -1
  37. package/dist/date-time-picker.css-mistica.js +1 -1
  38. package/dist/dialog.css-mistica.js +10 -10
  39. package/dist/divider.css-mistica.js +5 -5
  40. package/dist/double-field.css-mistica.js +2 -2
  41. package/dist/drawer.css-mistica.js +4 -4
  42. package/dist/empty-state-card.css-mistica.js +1 -1
  43. package/dist/empty-state.css-mistica.js +8 -8
  44. package/dist/fade-in.css-mistica.js +1 -1
  45. package/dist/feedback.css-mistica.js +5 -5
  46. package/dist/file-upload.css-mistica.js +10 -10
  47. package/dist/fixed-footer-layout.css-mistica.js +6 -6
  48. package/dist/form.css-mistica.js +1 -1
  49. package/dist/generated/mistica-icons/icon-panel-collapse-regular.js +165 -0
  50. package/dist/generated/mistica-icons/icon-panel-expand-regular.js +159 -0
  51. package/dist/grid-layout.css-mistica.js +3 -3
  52. package/dist/grid.css-mistica.js +120 -120
  53. package/dist/header.css-mistica.js +1 -1
  54. package/dist/hero.css-mistica.js +4 -4
  55. package/dist/horizontal-scroll.css-mistica.js +1 -1
  56. package/dist/icon-button.css-mistica.js +53 -53
  57. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  58. package/dist/icons/icon-error.css-mistica.js +1 -1
  59. package/dist/image.css-mistica.js +8 -8
  60. package/dist/index.d.ts +5 -0
  61. package/dist/index.js +10 -1
  62. package/dist/inline.css-mistica.js +11 -11
  63. package/dist/list.css-mistica.js +40 -28
  64. package/dist/list.css.d.ts +2 -0
  65. package/dist/list.d.ts +3 -1
  66. package/dist/list.js +176 -165
  67. package/dist/loading-bar.css-mistica.js +1 -1
  68. package/dist/loading-screen.css-mistica.js +12 -12
  69. package/dist/logo.css-mistica.js +5 -5
  70. package/dist/menu.css-mistica.js +13 -13
  71. package/dist/mobile-navigation-menu.d.ts +26 -0
  72. package/dist/mobile-navigation-menu.js +145 -0
  73. package/dist/mosaic.css-mistica.js +1 -1
  74. package/dist/navigation-bar.css-mistica.js +31 -97
  75. package/dist/navigation-bar.css.d.ts +0 -24
  76. package/dist/navigation-bar.d.ts +3 -38
  77. package/dist/navigation-bar.js +399 -586
  78. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  79. package/dist/navigation-shared.css-mistica.js +79 -0
  80. package/dist/navigation-shared.css.d.ts +26 -0
  81. package/dist/navigation-shared.d.ts +66 -0
  82. package/dist/navigation-shared.js +264 -0
  83. package/dist/package-version.js +1 -1
  84. package/dist/pagination.css-mistica.js +22 -22
  85. package/dist/pin-field.css-mistica.js +4 -4
  86. package/dist/popover.css-mistica.js +1 -1
  87. package/dist/portal.d.ts +1 -1
  88. package/dist/progress-bar.css-mistica.js +7 -7
  89. package/dist/radio-button.css-mistica.js +27 -27
  90. package/dist/rating.css-mistica.js +4 -4
  91. package/dist/responsive-layout.css-mistica.js +6 -6
  92. package/dist/screen-reader-only.css-mistica.js +1 -1
  93. package/dist/select.css-mistica.js +21 -21
  94. package/dist/sheet-action-row.css-mistica.js +1 -1
  95. package/dist/sheet-common.css-mistica.js +7 -7
  96. package/dist/sheet-info.css-mistica.js +1 -1
  97. package/dist/sidenav-bar-context.d.ts +25 -0
  98. package/dist/sidenav-bar-context.js +72 -0
  99. package/dist/sidenav-bar-data.d.ts +15 -0
  100. package/dist/sidenav-bar-data.js +38 -0
  101. package/dist/sidenav-bar-first-level-item.d.ts +42 -0
  102. package/dist/sidenav-bar-first-level-item.js +174 -0
  103. package/dist/sidenav-bar-keyboard.d.ts +13 -0
  104. package/dist/sidenav-bar-keyboard.js +314 -0
  105. package/dist/sidenav-bar-layout.css-mistica.js +28 -0
  106. package/dist/sidenav-bar-layout.css.d.ts +5 -0
  107. package/dist/sidenav-bar-layout.d.ts +22 -0
  108. package/dist/sidenav-bar-layout.js +103 -0
  109. package/dist/sidenav-bar-mobile.d.ts +24 -0
  110. package/dist/sidenav-bar-mobile.js +332 -0
  111. package/dist/sidenav-bar-motion.d.ts +32 -0
  112. package/dist/sidenav-bar-motion.js +84 -0
  113. package/dist/sidenav-bar-panel.d.ts +31 -0
  114. package/dist/sidenav-bar-panel.js +208 -0
  115. package/dist/sidenav-bar-row.d.ts +82 -0
  116. package/dist/sidenav-bar-row.js +230 -0
  117. package/dist/sidenav-bar-second-level-item.d.ts +43 -0
  118. package/dist/sidenav-bar-second-level-item.js +89 -0
  119. package/dist/sidenav-bar-section.d.ts +23 -0
  120. package/dist/sidenav-bar-section.js +167 -0
  121. package/dist/sidenav-bar-types.d.ts +192 -0
  122. package/dist/sidenav-bar-types.js +11 -0
  123. package/dist/sidenav-bar.css-mistica.js +325 -0
  124. package/dist/sidenav-bar.css.d.ts +93 -0
  125. package/dist/sidenav-bar.d.ts +102 -0
  126. package/dist/sidenav-bar.js +492 -0
  127. package/dist/skeletons.css-mistica.js +8 -8
  128. package/dist/skins/blau.js +12 -8
  129. package/dist/skins/esimflag.js +13 -9
  130. package/dist/skins/movistar.js +13 -9
  131. package/dist/skins/o2.js +13 -9
  132. package/dist/skins/skin-contract.css-mistica.js +735 -731
  133. package/dist/skins/skin-contract.css.d.ts +4 -0
  134. package/dist/skins/telefonica.js +13 -9
  135. package/dist/skins/types/colors.d.ts +2 -0
  136. package/dist/skins/vivo-evolution.js +14 -10
  137. package/dist/skins/vivo.js +13 -9
  138. package/dist/skip-link.css-mistica.js +2 -2
  139. package/dist/slider.css-mistica.js +24 -24
  140. package/dist/snackbar.css-mistica.js +14 -14
  141. package/dist/spinner.css-mistica.js +1 -1
  142. package/dist/square.css-mistica.js +1 -1
  143. package/dist/stack.css-mistica.js +5 -5
  144. package/dist/stacking-group.css-mistica.js +1 -1
  145. package/dist/stepper.css-mistica.js +9 -9
  146. package/dist/switch-component.css-mistica.js +48 -42
  147. package/dist/switch-component.css.d.ts +2 -0
  148. package/dist/switch-component.js +18 -18
  149. package/dist/table.css-mistica.js +9 -9
  150. package/dist/tabs.css-mistica.js +22 -22
  151. package/dist/tag.css-mistica.js +3 -3
  152. package/dist/text-field-base.css-mistica.js +19 -19
  153. package/dist/text-field-components.css-mistica.js +10 -10
  154. package/dist/text-link.css-mistica.js +6 -6
  155. package/dist/text-tokens.d.ts +6 -0
  156. package/dist/text-tokens.js +157 -133
  157. package/dist/text.css-mistica.js +6 -6
  158. package/dist/timeline.css-mistica.js +11 -11
  159. package/dist/timer.css-mistica.js +6 -6
  160. package/dist/tooltip.css-mistica.js +2 -2
  161. package/dist/touchable.css-mistica.js +4 -4
  162. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  163. package/dist/video.css-mistica.js +1 -1
  164. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  165. package/dist-es/accordion.css-mistica.js +7 -7
  166. package/dist-es/align.css-mistica.js +1 -1
  167. package/dist-es/autocomplete.css-mistica.js +2 -2
  168. package/dist-es/avatar.css-mistica.js +1 -1
  169. package/dist-es/badge.css-mistica.js +1 -1
  170. package/dist-es/box.css-mistica.js +13 -13
  171. package/dist-es/boxed.css-mistica.js +23 -23
  172. package/dist-es/boxed.js +25 -25
  173. package/dist-es/button-group.css-mistica.js +1 -1
  174. package/dist-es/button-layout.css-mistica.js +16 -16
  175. package/dist-es/button.css-mistica.js +38 -38
  176. package/dist-es/callout.css-mistica.js +12 -12
  177. package/dist-es/card-internal.css-mistica.js +17 -17
  178. package/dist-es/carousel.css-mistica.js +10 -10
  179. package/dist-es/checkbox.css-mistica.js +13 -13
  180. package/dist-es/chip.css-mistica.js +17 -17
  181. package/dist-es/circle.css-mistica.js +2 -2
  182. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  183. package/dist-es/community/ai-card.css-mistica.js +4 -4
  184. package/dist-es/community/blocks.css-mistica.js +1 -1
  185. package/dist-es/community/cyber/example-component.css-mistica.js +1 -1
  186. package/dist-es/community/example-component.css-mistica.js +2 -2
  187. package/dist-es/community/skins/cyber-skin.js +19 -17
  188. package/dist-es/counter.css-mistica.js +2 -2
  189. package/dist-es/cover-hero.css-mistica.js +4 -4
  190. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  191. package/dist-es/date-field.css-mistica.js +1 -1
  192. package/dist-es/date-time-picker.css-mistica.js +1 -1
  193. package/dist-es/dialog.css-mistica.js +5 -5
  194. package/dist-es/divider.css-mistica.js +5 -5
  195. package/dist-es/double-field.css-mistica.js +2 -2
  196. package/dist-es/drawer.css-mistica.js +2 -2
  197. package/dist-es/empty-state-card.css-mistica.js +1 -1
  198. package/dist-es/empty-state.css-mistica.js +7 -7
  199. package/dist-es/fade-in.css-mistica.js +1 -1
  200. package/dist-es/feedback.css-mistica.js +2 -2
  201. package/dist-es/file-upload.css-mistica.js +8 -8
  202. package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
  203. package/dist-es/form.css-mistica.js +1 -1
  204. package/dist-es/generated/mistica-icons/icon-panel-collapse-regular.js +115 -0
  205. package/dist-es/generated/mistica-icons/icon-panel-expand-regular.js +109 -0
  206. package/dist-es/grid-layout.css-mistica.js +3 -3
  207. package/dist-es/grid.css-mistica.js +120 -120
  208. package/dist-es/header.css-mistica.js +1 -1
  209. package/dist-es/hero.css-mistica.js +3 -3
  210. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  211. package/dist-es/icon-button.css-mistica.js +53 -53
  212. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  213. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  214. package/dist-es/image.css-mistica.js +4 -4
  215. package/dist-es/index.js +2279 -2276
  216. package/dist-es/inline.css-mistica.js +11 -11
  217. package/dist-es/list.css-mistica.js +8 -2
  218. package/dist-es/list.js +275 -264
  219. package/dist-es/loading-bar.css-mistica.js +1 -1
  220. package/dist-es/loading-screen.css-mistica.js +5 -5
  221. package/dist-es/logo.css-mistica.js +5 -5
  222. package/dist-es/menu.css-mistica.js +13 -13
  223. package/dist-es/mobile-navigation-menu.js +90 -0
  224. package/dist-es/mosaic.css-mistica.js +1 -1
  225. package/dist-es/navigation-bar.css-mistica.js +11 -20
  226. package/dist-es/navigation-bar.js +469 -656
  227. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  228. package/dist-es/navigation-shared.css-mistica.js +11 -0
  229. package/dist-es/navigation-shared.js +192 -0
  230. package/dist-es/package-version.js +1 -1
  231. package/dist-es/pagination.css-mistica.js +19 -19
  232. package/dist-es/pin-field.css-mistica.js +2 -2
  233. package/dist-es/popover.css-mistica.js +1 -1
  234. package/dist-es/progress-bar.css-mistica.js +7 -7
  235. package/dist-es/radio-button.css-mistica.js +22 -22
  236. package/dist-es/rating.css-mistica.js +3 -3
  237. package/dist-es/responsive-layout.css-mistica.js +6 -6
  238. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  239. package/dist-es/select.css-mistica.js +18 -18
  240. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  241. package/dist-es/sheet-common.css-mistica.js +2 -2
  242. package/dist-es/sheet-info.css-mistica.js +1 -1
  243. package/dist-es/sidenav-bar-context.js +14 -0
  244. package/dist-es/sidenav-bar-data.js +12 -0
  245. package/dist-es/sidenav-bar-first-level-item.js +124 -0
  246. package/dist-es/sidenav-bar-keyboard.js +253 -0
  247. package/dist-es/sidenav-bar-layout.css-mistica.js +2 -0
  248. package/dist-es/sidenav-bar-layout.js +86 -0
  249. package/dist-es/sidenav-bar-mobile.js +277 -0
  250. package/dist-es/sidenav-bar-motion.js +26 -0
  251. package/dist-es/sidenav-bar-panel.js +146 -0
  252. package/dist-es/sidenav-bar-row.js +208 -0
  253. package/dist-es/sidenav-bar-second-level-item.js +72 -0
  254. package/dist-es/sidenav-bar-section.js +112 -0
  255. package/dist-es/sidenav-bar-types.js +2 -0
  256. package/dist-es/sidenav-bar.css-mistica.js +74 -0
  257. package/dist-es/sidenav-bar.js +429 -0
  258. package/dist-es/skeletons.css-mistica.js +7 -7
  259. package/dist-es/skins/blau.js +12 -8
  260. package/dist-es/skins/esimflag.js +13 -9
  261. package/dist-es/skins/movistar.js +13 -9
  262. package/dist-es/skins/o2.js +13 -9
  263. package/dist-es/skins/skin-contract.css-mistica.js +735 -731
  264. package/dist-es/skins/telefonica.js +13 -9
  265. package/dist-es/skins/vivo-evolution.js +14 -10
  266. package/dist-es/skins/vivo.js +13 -9
  267. package/dist-es/skip-link.css-mistica.js +2 -2
  268. package/dist-es/slider.css-mistica.js +20 -20
  269. package/dist-es/snackbar.css-mistica.js +5 -5
  270. package/dist-es/spinner.css-mistica.js +1 -1
  271. package/dist-es/square.css-mistica.js +1 -1
  272. package/dist-es/stack.css-mistica.js +5 -5
  273. package/dist-es/stacking-group.css-mistica.js +1 -1
  274. package/dist-es/stepper.css-mistica.js +3 -3
  275. package/dist-es/style.css +1 -1
  276. package/dist-es/switch-component.css-mistica.js +37 -37
  277. package/dist-es/switch-component.js +26 -26
  278. package/dist-es/table.css-mistica.js +9 -9
  279. package/dist-es/tabs.css-mistica.js +19 -19
  280. package/dist-es/tag.css-mistica.js +2 -2
  281. package/dist-es/text-field-base.css-mistica.js +17 -17
  282. package/dist-es/text-field-components.css-mistica.js +4 -4
  283. package/dist-es/text-link.css-mistica.js +6 -6
  284. package/dist-es/text-tokens.js +82 -67
  285. package/dist-es/text.css-mistica.js +6 -6
  286. package/dist-es/timeline.css-mistica.js +10 -10
  287. package/dist-es/timer.css-mistica.js +6 -6
  288. package/dist-es/tooltip.css-mistica.js +2 -2
  289. package/dist-es/touchable.css-mistica.js +2 -2
  290. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  291. package/dist-es/video.css-mistica.js +1 -1
  292. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  293. package/package.json +2 -1
  294. package/src/boxed.css.ts +1 -0
  295. package/src/boxed.tsx +18 -5
  296. package/src/callout.css.ts +4 -2
  297. package/src/community/skins/cyber-skin.tsx +19 -16
  298. package/src/index.tsx +14 -0
  299. package/src/list.css.ts +36 -1
  300. package/src/list.tsx +370 -344
  301. package/src/mobile-navigation-menu.tsx +168 -0
  302. package/src/navigation-bar.css.ts +2 -267
  303. package/src/navigation-bar.tsx +77 -370
  304. package/src/navigation-shared.css.ts +289 -0
  305. package/src/navigation-shared.tsx +262 -0
  306. package/src/package-version.tsx +1 -1
  307. package/src/portal.tsx +1 -1
  308. package/src/sidenav-bar-context.tsx +41 -0
  309. package/src/sidenav-bar-data.ts +49 -0
  310. package/src/sidenav-bar-first-level-item.tsx +203 -0
  311. package/src/sidenav-bar-keyboard.tsx +393 -0
  312. package/src/sidenav-bar-layout.css.ts +89 -0
  313. package/src/sidenav-bar-layout.tsx +61 -0
  314. package/src/sidenav-bar-mobile.tsx +302 -0
  315. package/src/sidenav-bar-motion.tsx +70 -0
  316. package/src/sidenav-bar-panel.tsx +269 -0
  317. package/src/sidenav-bar-row.tsx +272 -0
  318. package/src/sidenav-bar-second-level-item.tsx +99 -0
  319. package/src/sidenav-bar-section.tsx +98 -0
  320. package/src/sidenav-bar-types.ts +224 -0
  321. package/src/sidenav-bar.css.ts +1018 -0
  322. package/src/sidenav-bar.tsx +821 -0
  323. package/src/skins/blau.tsx +12 -8
  324. package/src/skins/esimflag.tsx +13 -9
  325. package/src/skins/movistar.tsx +13 -9
  326. package/src/skins/o2.tsx +13 -9
  327. package/src/skins/skin-contract.css.ts +2 -0
  328. package/src/skins/telefonica.tsx +13 -9
  329. package/src/skins/types/colors.tsx +2 -0
  330. package/src/skins/vivo-evolution.tsx +14 -10
  331. package/src/skins/vivo.tsx +13 -9
  332. package/src/switch-component.css.ts +20 -0
  333. package/src/switch-component.tsx +9 -1
  334. package/src/text-tokens.tsx +24 -0
package/src/skins/blau.tsx CHANGED
@@ -80,6 +80,8 @@ export const getBlauSkin: GetKnownSkin = () => {
80
80
  backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
81
81
  backgroundContainerBrandOverBrand: palette.blauBluePrimary30,
82
82
  backgroundContainerAlternative: palette.blauBluePrimary20,
83
+ backgroundContainerAlternativeOverAlternative: palette.white,
84
+ backgroundContainerAlternativeOverBrand: palette.blauBluePrimary30,
83
85
  backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
84
86
  backgroundSkeleton: palette.grey3,
85
87
  backgroundSkeletonInverse: palette.blauBlueSecondary,
@@ -126,12 +128,12 @@ export const getBlauSkin: GetKnownSkin = () => {
126
128
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
127
129
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
128
130
  buttonLinkNeutralBackgroundPressed: palette.grey1,
129
- buttonLinkNeutralBackgroundBrand: palette.white,
130
- buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
131
- buttonLinkNeutralBackgroundNegative: palette.white,
132
- buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
133
- buttonLinkNeutralBackgroundMedia: palette.white,
134
- buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
131
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
132
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.15),
133
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
134
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.15),
135
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
136
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.15),
135
137
  buttonPrimaryBackground: palette.blauBlueSecondary,
136
138
  buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
137
139
  buttonPrimaryBackgroundNegative: palette.white,
@@ -197,9 +199,9 @@ export const getBlauSkin: GetKnownSkin = () => {
197
199
  textLinkSnackbar: palette.blauPurple30,
198
200
  textLinkNeutral: palette.grey6,
199
201
  textLinkNeutralBrand: palette.grey6,
200
- textLinkNeutralNegative: palette.grey6,
202
+ textLinkNeutralNegative: palette.white,
201
203
  textLinkNeutralAlternative: palette.grey6,
202
- textLinkNeutralMedia: palette.grey6,
204
+ textLinkNeutralMedia: palette.white,
203
205
  textActivated: palette.blauBlueSecondary,
204
206
  textBrand: palette.blauBlueSecondary,
205
207
  inputBorder: palette.grey4,
@@ -387,6 +389,8 @@ export const getBlauSkin: GetKnownSkin = () => {
387
389
  backgroundContainerNegative: palette.darkModeGrey,
388
390
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
389
391
  backgroundContainerAlternative: palette.darkModeGrey,
392
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
393
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
390
394
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
391
395
  backgroundSkeleton: palette.darkModeGrey,
392
396
  backgroundSkeletonInverse: palette.darkModeGrey,
package/src/skins/esimflag.tsx CHANGED
@@ -84,6 +84,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
84
84
  backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.6),
85
85
  backgroundContainerBrandOverBrand: palette.blue80,
86
86
  backgroundContainerAlternative: palette.grey1,
87
+ backgroundContainerAlternativeOverAlternative: palette.white,
88
+ backgroundContainerAlternativeOverBrand: palette.blue80,
87
89
  backgroundOverlay: applyAlpha(palette.black, 0.6),
88
90
  backgroundSkeleton: palette.grey2,
89
91
  backgroundSkeletonInverse: palette.blue55,
@@ -126,12 +128,12 @@ export const getEsimflagSkin: GetKnownSkin = () => {
126
128
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
127
129
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
128
130
  buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey3, 0.4),
129
- buttonLinkNeutralBackgroundBrand: palette.white,
130
- buttonLinkNeutralBackgroundBrandPressed: palette.grey2,
131
- buttonLinkNeutralBackgroundNegative: palette.white,
132
- buttonLinkNeutralBackgroundNegativePressed: palette.grey2,
133
- buttonLinkNeutralBackgroundMedia: palette.grey2,
134
- buttonLinkNeutralBackgroundMediaPressed: palette.grey2,
131
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
132
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
133
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
134
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
135
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
136
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
135
137
  buttonPrimaryBackground: palette.blue,
136
138
  buttonPrimaryBackgroundInverse: palette.white,
137
139
  buttonPrimaryBackgroundNegative: palette.white,
@@ -196,10 +198,10 @@ export const getEsimflagSkin: GetKnownSkin = () => {
196
198
  textLinkDangerMedia: palette.tomato60,
197
199
  textLinkSnackbar: palette.blue30,
198
200
  textLinkNeutral: palette.blue85,
199
- textLinkNeutralBrand: palette.blue85,
200
- textLinkNeutralNegative: palette.blue85,
201
+ textLinkNeutralBrand: palette.white,
202
+ textLinkNeutralNegative: palette.white,
201
203
  textLinkNeutralAlternative: palette.blue85,
202
- textLinkNeutralMedia: palette.blue85,
204
+ textLinkNeutralMedia: palette.white,
203
205
  textActivated: palette.blue,
204
206
  textBrand: palette.blue,
205
207
  inputBorder: palette.grey4,
@@ -391,6 +393,8 @@ export const getEsimflagSkin: GetKnownSkin = () => {
391
393
  backgroundContainerNegative: palette.darkModeGrey,
392
394
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
393
395
  backgroundContainerAlternative: palette.darkModeGrey,
396
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
397
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
394
398
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
395
399
  backgroundSkeleton: palette.darkModeGrey6,
396
400
  backgroundSkeletonInverse: palette.darkModeGrey6,
package/src/skins/movistar.tsx CHANGED
@@ -91,6 +91,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
91
91
  backgroundContainerNegative: applyAlpha(palette.movistarBlack, 0.2),
92
92
  backgroundContainerBrandOverBrand: palette.blue800,
93
93
  backgroundContainerAlternative: palette.grey100,
94
+ backgroundContainerAlternativeOverAlternative: palette.white,
95
+ backgroundContainerAlternativeOverBrand: palette.blue800,
94
96
  backgroundOverlay: applyAlpha(palette.movistarBlack, 0.6),
95
97
  backgroundSkeleton: palette.grey200,
96
98
  backgroundSkeletonInverse: palette.blue800,
@@ -133,12 +135,12 @@ export const getMovistarSkin: GetKnownSkin = () => {
133
135
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
134
136
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
135
137
  buttonLinkNeutralBackgroundPressed: palette.grey100,
136
- buttonLinkNeutralBackgroundBrand: palette.white,
137
- buttonLinkNeutralBackgroundBrandPressed: palette.grey100,
138
- buttonLinkNeutralBackgroundNegative: palette.white,
139
- buttonLinkNeutralBackgroundNegativePressed: palette.grey100,
140
- buttonLinkNeutralBackgroundMedia: palette.white,
141
- buttonLinkNeutralBackgroundMediaPressed: palette.grey100,
138
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
139
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.3),
140
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
141
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.3),
142
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
143
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.3),
142
144
  buttonPrimaryBackground: palette.movistarBlue,
143
145
  buttonPrimaryBackgroundInverse: palette.white,
144
146
  buttonPrimaryBackgroundNegative: palette.white,
@@ -203,10 +205,10 @@ export const getMovistarSkin: GetKnownSkin = () => {
203
205
  textLinkDangerMedia: palette.red,
204
206
  textLinkSnackbar: palette.blue300,
205
207
  textLinkNeutral: palette.movistarBlack,
206
- textLinkNeutralBrand: palette.movistarBlack,
207
- textLinkNeutralNegative: palette.movistarBlack,
208
+ textLinkNeutralBrand: palette.white,
209
+ textLinkNeutralNegative: palette.white,
208
210
  textLinkNeutralAlternative: palette.movistarBlack,
209
- textLinkNeutralMedia: palette.movistarBlack,
211
+ textLinkNeutralMedia: palette.white,
210
212
  textActivated: palette.blueHigh,
211
213
  textBrand: palette.blueHigh,
212
214
  inputBorder: palette.grey500,
@@ -398,6 +400,8 @@ export const getMovistarSkin: GetKnownSkin = () => {
398
400
  backgroundContainerNegative: palette.darkModeGrey,
399
401
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
400
402
  backgroundContainerAlternative: palette.darkModeGrey,
403
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
404
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
401
405
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
402
406
  backgroundSkeleton: palette.grey600,
403
407
  backgroundSkeletonInverse: palette.grey600,
package/src/skins/o2.tsx CHANGED
@@ -87,6 +87,8 @@ export const getO2Skin: GetKnownSkin = () => {
87
87
  backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
88
88
  backgroundContainerBrandOverBrand: palette.beyondBlue70,
89
89
  backgroundContainerAlternative: palette.grey20,
90
+ backgroundContainerAlternativeOverAlternative: palette.white,
91
+ backgroundContainerAlternativeOverBrand: palette.beyondBlue70,
90
92
  backgroundOverlay: applyAlpha(palette.black, 0.6),
91
93
  backgroundSkeleton: palette.grey30,
92
94
  backgroundSkeletonInverse: palette.beyondBlue70,
@@ -129,12 +131,12 @@ export const getO2Skin: GetKnownSkin = () => {
129
131
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
130
132
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
131
133
  buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey30, 0.4),
132
- buttonLinkNeutralBackgroundBrand: palette.white,
133
- buttonLinkNeutralBackgroundBrandPressed: palette.grey20,
134
- buttonLinkNeutralBackgroundNegative: palette.white,
135
- buttonLinkNeutralBackgroundNegativePressed: palette.grey20,
136
- buttonLinkNeutralBackgroundMedia: palette.white,
137
- buttonLinkNeutralBackgroundMediaPressed: palette.grey20,
134
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
135
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
136
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
137
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
138
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
139
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
138
140
  buttonPrimaryBackground: palette.beyondBlue,
139
141
  buttonPrimaryBackgroundInverse: palette.white,
140
142
  buttonPrimaryBackgroundNegative: palette.white,
@@ -199,10 +201,10 @@ export const getO2Skin: GetKnownSkin = () => {
199
201
  textLinkDangerMedia: palette.o2Red65,
200
202
  textLinkSnackbar: palette.beyondBlue30,
201
203
  textLinkNeutral: palette.black,
202
- textLinkNeutralBrand: palette.black,
203
- textLinkNeutralNegative: palette.black,
204
+ textLinkNeutralBrand: palette.white,
205
+ textLinkNeutralNegative: palette.white,
204
206
  textLinkNeutralAlternative: palette.black,
205
- textLinkNeutralMedia: palette.black,
207
+ textLinkNeutralMedia: palette.white,
206
208
  textActivated: palette.beyondBlue,
207
209
  textBrand: palette.beyondBlue,
208
210
  inputBorder: palette.grey45,
@@ -394,6 +396,8 @@ export const getO2Skin: GetKnownSkin = () => {
394
396
  backgroundContainerNegative: palette.darkModeGrey,
395
397
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
396
398
  backgroundContainerAlternative: palette.darkModeGrey,
399
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
400
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
397
401
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
398
402
  backgroundSkeleton: palette.darkModeGrey6,
399
403
  backgroundSkeletonInverse: palette.darkModeGrey6,
package/src/skins/skin-contract.css.ts CHANGED
@@ -28,6 +28,8 @@ const colors: Colors = {
28
28
  backgroundContainerNegative: '',
29
29
  backgroundContainerBrandOverBrand: '',
30
30
  backgroundContainerAlternative: '',
31
+ backgroundContainerAlternativeOverAlternative: '',
32
+ backgroundContainerAlternativeOverBrand: '',
31
33
  backgroundOverlay: '',
32
34
  backgroundSkeleton: '',
33
35
  backgroundSkeletonInverse: '',
package/src/skins/telefonica.tsx CHANGED
@@ -76,6 +76,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
76
76
  backgroundContainerNegative: applyAlpha(palette.white, 0.1),
77
77
  backgroundContainerBrandOverBrand: palette.telefonicaBlue70,
78
78
  backgroundContainerAlternative: palette.grey1,
79
+ backgroundContainerAlternativeOverAlternative: palette.white,
80
+ backgroundContainerAlternativeOverBrand: palette.telefonicaBlue70,
79
81
  backgroundBrand: palette.telefonicaBlue,
80
82
  backgroundNegative: palette.grey9,
81
83
  backgroundBrandSecondary: palette.telefonicaBlue,
@@ -130,12 +132,12 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
130
132
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
131
133
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
132
134
  buttonLinkNeutralBackgroundPressed: applyAlpha(palette.grey2, 0.4),
133
- buttonLinkNeutralBackgroundBrand: palette.white,
134
- buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
135
- buttonLinkNeutralBackgroundNegative: palette.white,
136
- buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
137
- buttonLinkNeutralBackgroundMedia: palette.white,
138
- buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
135
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
136
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
137
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
138
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
139
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
140
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
139
141
  buttonPrimaryBackground: palette.telefonicaBlue,
140
142
  buttonPrimaryBackgroundInverse: palette.white,
141
143
  buttonPrimaryBackgroundNegative: palette.white,
@@ -200,10 +202,10 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
200
202
  textLinkDangerMedia: palette.coral60,
201
203
  textLinkSnackbar: palette.telefonicaBlue30,
202
204
  textLinkNeutral: palette.grey9,
203
- textLinkNeutralBrand: palette.grey9,
204
- textLinkNeutralNegative: palette.grey9,
205
+ textLinkNeutralBrand: palette.white,
206
+ textLinkNeutralNegative: palette.white,
205
207
  textLinkNeutralAlternative: palette.grey9,
206
- textLinkNeutralMedia: palette.grey9,
208
+ textLinkNeutralMedia: palette.white,
207
209
  textActivated: palette.telefonicaBlue70,
208
210
  textBrand: palette.telefonicaBlue70,
209
211
  inputBorder: palette.grey5,
@@ -395,6 +397,8 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
395
397
  backgroundContainerNegative: palette.darkModeGrey,
396
398
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
397
399
  backgroundContainerAlternative: palette.darkModeGrey,
400
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
401
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
398
402
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
399
403
  backgroundSkeleton: palette.grey8,
400
404
  backgroundSkeletonInverse: palette.grey8,
package/src/skins/types/colors.tsx CHANGED
@@ -30,6 +30,8 @@ export type Colors = {
30
30
  backgroundContainerNegative: string;
31
31
  backgroundContainerBrandOverBrand: string;
32
32
  backgroundContainerAlternative: string;
33
+ backgroundContainerAlternativeOverAlternative: string;
34
+ backgroundContainerAlternativeOverBrand: string;
33
35
  backgroundOverlay: string;
34
36
  backgroundSkeleton: string;
35
37
  backgroundSkeletonInverse: string;
package/src/skins/vivo-evolution.tsx CHANGED
@@ -121,6 +121,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
121
121
  backgroundContainerNegative: applyAlpha(palette.vivoNeutral950, 0.4),
122
122
  backgroundContainerBrandOverBrand: palette.vivoPurple650,
123
123
  backgroundContainerAlternative: palette.vivoNeutral25,
124
+ backgroundContainerAlternativeOverAlternative: palette.vivoNeutral150,
125
+ backgroundContainerAlternativeOverBrand: palette.vivoPurple800,
124
126
  backgroundOverlay: applyAlpha(palette.vivoNeutral975, 0.6),
125
127
  backgroundSkeleton: palette.vivoNeutral200,
126
128
  backgroundSkeletonInverse: palette.vivoPurple900,
@@ -163,12 +165,12 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
163
165
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.1),
164
166
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
165
167
  buttonLinkNeutralBackgroundPressed: palette.vivoNeutral100,
166
- buttonLinkNeutralBackgroundBrand: palette.vivoNeutral0,
167
- buttonLinkNeutralBackgroundBrandPressed: palette.vivoNeutral25,
168
- buttonLinkNeutralBackgroundNegative: palette.vivoNeutral0,
169
- buttonLinkNeutralBackgroundNegativePressed: palette.vivoNeutral25,
170
- buttonLinkNeutralBackgroundMedia: palette.vivoNeutral0,
171
- buttonLinkNeutralBackgroundMediaPressed: palette.vivoNeutral25,
168
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.vivoNeutral0, 0),
169
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.vivoNeutral0, 0.1),
170
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.vivoNeutral0, 0),
171
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.vivoNeutral0, 0.1),
172
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.vivoNeutral0, 0),
173
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.vivoNeutral0, 0.1),
172
174
  buttonPrimaryBackground: palette.vivoPurple700,
173
175
  buttonPrimaryBackgroundInverse: palette.vivoNeutral0,
174
176
  buttonPrimaryBackgroundNegative: palette.vivoNeutral0,
@@ -233,10 +235,10 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
233
235
  textLinkDangerMedia: palette.vivoPepper600,
234
236
  textLinkSnackbar: palette.vivoPurple100,
235
237
  textLinkNeutral: palette.vivoNeutral975,
236
- textLinkNeutralBrand: palette.vivoNeutral975,
237
- textLinkNeutralNegative: palette.vivoNeutral975,
238
+ textLinkNeutralBrand: palette.vivoNeutral0,
239
+ textLinkNeutralNegative: palette.vivoNeutral0,
238
240
  textLinkNeutralAlternative: palette.vivoNeutral975,
239
- textLinkNeutralMedia: palette.vivoNeutral975,
241
+ textLinkNeutralMedia: palette.vivoNeutral0,
240
242
  textActivated: palette.vivoPurple700,
241
243
  textBrand: palette.vivoPurple700,
242
244
  inputBorder: palette.vivoNeutral500,
@@ -428,6 +430,8 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
428
430
  backgroundContainerNegative: palette.vivoNeutral900,
429
431
  backgroundContainerBrandOverBrand: palette.vivoNeutral900,
430
432
  backgroundContainerAlternative: palette.vivoNeutral900,
433
+ backgroundContainerAlternativeOverAlternative: palette.vivoNeutral150,
434
+ backgroundContainerAlternativeOverBrand: palette.vivoPurple800,
431
435
  backgroundOverlay: applyAlpha(palette.vivoNeutral900, 0.8),
432
436
  backgroundSkeleton: palette.vivoNeutral800,
433
437
  backgroundSkeletonInverse: palette.vivoNeutral800,
@@ -840,7 +844,7 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
840
844
  right: {mobile: 16, desktop: 40},
841
845
  },
842
846
  boxedDefaultPadding: {left: {mobile: 16, desktop: 24}, right: {mobile: 16, desktop: 24}},
843
- responsiveLayoutMargin: {mobile: 8, desktop: 48},
847
+ responsiveLayoutMargin: {mobile: 16, desktop: 48},
844
848
  },
845
849
  };
846
850
  return skin;
package/src/skins/vivo.tsx CHANGED
@@ -77,6 +77,8 @@ export const getVivoSkin: GetKnownSkin = () => {
77
77
  backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4),
78
78
  backgroundContainerBrandOverBrand: palette.vivoPurpleDark,
79
79
  backgroundContainerAlternative: palette.grey1,
80
+ backgroundContainerAlternativeOverAlternative: palette.white,
81
+ backgroundContainerAlternativeOverBrand: palette.vivoPurpleDark,
80
82
  backgroundOverlay: applyAlpha(palette.grey6, 0.6),
81
83
  backgroundSkeleton: palette.grey3,
82
84
  backgroundSkeletonInverse: palette.vivoPurpleDark,
@@ -119,12 +121,12 @@ export const getVivoSkin: GetKnownSkin = () => {
119
121
  buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
120
122
  buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
121
123
  buttonLinkNeutralBackgroundPressed: palette.grey2,
122
- buttonLinkNeutralBackgroundBrand: palette.white,
123
- buttonLinkNeutralBackgroundBrandPressed: palette.grey1,
124
- buttonLinkNeutralBackgroundNegative: palette.white,
125
- buttonLinkNeutralBackgroundNegativePressed: palette.grey1,
126
- buttonLinkNeutralBackgroundMedia: palette.white,
127
- buttonLinkNeutralBackgroundMediaPressed: palette.grey1,
124
+ buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
125
+ buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.1),
126
+ buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
127
+ buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.1),
128
+ buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
129
+ buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.1),
128
130
  buttonPrimaryBackground: palette.vivoPurple,
129
131
  buttonPrimaryBackgroundInverse: palette.white,
130
132
  buttonPrimaryBackgroundNegative: palette.white,
@@ -189,10 +191,10 @@ export const getVivoSkin: GetKnownSkin = () => {
189
191
  textLinkDangerMedia: palette.pepper,
190
192
  textLinkSnackbar: palette.vivoPurpleLight20,
191
193
  textLinkNeutral: palette.grey6,
192
- textLinkNeutralBrand: palette.grey6,
193
- textLinkNeutralNegative: palette.grey6,
194
+ textLinkNeutralBrand: palette.white,
195
+ textLinkNeutralNegative: palette.white,
194
196
  textLinkNeutralAlternative: palette.grey6,
195
- textLinkNeutralMedia: palette.grey6,
197
+ textLinkNeutralMedia: palette.white,
196
198
  textActivated: palette.vivoPurple,
197
199
  textBrand: palette.vivoPurple,
198
200
  inputBorder: palette.grey4,
@@ -384,6 +386,8 @@ export const getVivoSkin: GetKnownSkin = () => {
384
386
  backgroundContainerNegative: palette.darkModeGrey,
385
387
  backgroundContainerBrandOverBrand: palette.darkModeGrey,
386
388
  backgroundContainerAlternative: palette.darkModeGrey,
389
+ backgroundContainerAlternativeOverAlternative: palette.darkModeGrey,
390
+ backgroundContainerAlternativeOverBrand: palette.darkModeGrey,
387
391
  backgroundOverlay: applyAlpha(palette.darkModeGrey, 0.8),
388
392
  backgroundSkeleton: palette.darkModeGrey6,
389
393
  backgroundSkeletonInverse: palette.darkModeGrey6,
package/src/switch-component.css.ts CHANGED
@@ -115,6 +115,15 @@ export const interactiveArea = style({
115
115
  });
116
116
 
117
117
  export const container = style([
118
+ containerBase,
119
+ {
120
+ cursor: 'pointer',
121
+ display: 'inline-flex',
122
+ verticalAlign: 'bottom',
123
+ flexDirection: 'column',
124
+ },
125
+ ]);
126
+ export const containerFullWidth = style([
118
127
  containerBase,
119
128
  {
120
129
  cursor: 'pointer',
@@ -126,6 +135,17 @@ export const containerDisabled = style([
126
135
  containerBase,
127
136
  {
128
137
  cursor: 'default',
138
+ display: 'inline-flex',
139
+ verticalAlign: 'bottom',
140
+ flexDirection: 'column',
141
+ },
142
+ ]);
143
+ export const containerDisabledFullWidth = style([
144
+ containerBase,
145
+ {
146
+ cursor: 'default',
147
+ display: 'flex',
148
+ flexDirection: 'column',
129
149
  },
130
150
  ]);
131
151
 
package/src/switch-component.tsx CHANGED
@@ -155,7 +155,15 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
155
155
  onKeyDown={disabled ? undefined : handleKeyDown}
156
156
  tabIndex={disabled ? undefined : 0}
157
157
  ref={focusableRef}
158
- className={disabled ? styles.containerDisabled : styles.container}
158
+ className={
159
+ props.render
160
+ ? disabled
161
+ ? styles.containerDisabledFullWidth
162
+ : styles.containerFullWidth
163
+ : disabled
164
+ ? styles.containerDisabled
165
+ : styles.container
166
+ }
159
167
  aria-disabled={disabled}
160
168
  aria-label={props['aria-label']}
161
169
  aria-labelledby={props['aria-label'] ? undefined : labelId}
package/src/text-tokens.tsx CHANGED
@@ -37,6 +37,9 @@ export type Dictionary = {
37
37
  mainNavigationBarOpenSectionMenu: string;
38
38
  mainNavigationBarSectionSeeAll: string;
39
39
  backNavigationBar: string;
40
+ sidenavExpand: string;
41
+ sidenavCollapse: string;
42
+ sidenavLandmark: string;
40
43
  clearButton: string;
41
44
  carouselRegion: string;
42
45
  carouselPauseAutoplay: string;
@@ -349,6 +352,27 @@ export const backNavigationBar: TextToken = {
349
352
  pt: 'Voltar',
350
353
  };
351
354
 
355
+ export const sidenavExpand: TextToken = {
356
+ es: 'Expandir navegación',
357
+ en: 'Expand navigation',
358
+ de: 'Navigation ausklappen',
359
+ pt: 'Expandir navegação',
360
+ };
361
+
362
+ export const sidenavCollapse: TextToken = {
363
+ es: 'Contraer navegación',
364
+ en: 'Collapse navigation',
365
+ de: 'Navigation einklappen',
366
+ pt: 'Recolher navegação',
367
+ };
368
+
369
+ export const sidenavLandmark: TextToken = {
370
+ es: 'Navegación principal',
371
+ en: 'Main navigation',
372
+ de: 'Hauptnavigation',
373
+ pt: 'Navegação principal',
374
+ };
375
+
352
376
  export const clearButton: TextToken = {
353
377
  es: 'Borrar',
354
378
  en: 'Clear',