@telefonica/mistica 14.10.0 → 14.11.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 (170) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +1 -1
  3. package/dist/badge.css-mistica.js +1 -1
  4. package/dist/button-group.css-mistica.js +1 -1
  5. package/dist/button-layout.css-mistica.js +6 -6
  6. package/dist/button.css-mistica.js +18 -18
  7. package/dist/callout.css-mistica.js +1 -1
  8. package/dist/card.css-mistica.js +6 -6
  9. package/dist/carousel.css-mistica.js +16 -16
  10. package/dist/checkbox.css-mistica.js +9 -8
  11. package/dist/checkbox.css.d.ts +1 -0
  12. package/dist/checkbox.js +27 -26
  13. package/dist/chip.css-mistica.js +4 -4
  14. package/dist/circle.css-mistica.js +1 -1
  15. package/dist/credit-card-number-field.css-mistica.js +3 -3
  16. package/dist/cvv-field.css-mistica.js +1 -1
  17. package/dist/dialog.css-mistica.js +6 -6
  18. package/dist/double-field.css-mistica.js +2 -2
  19. package/dist/empty-state-card.css-mistica.js +3 -3
  20. package/dist/empty-state.css-mistica.js +2 -2
  21. package/dist/feedback.css-mistica.js +3 -3
  22. package/dist/fixed-footer-layout.css-mistica.js +5 -5
  23. package/dist/form-context.d.ts +2 -2
  24. package/dist/grid.css-mistica.js +161 -0
  25. package/dist/grid.css.d.ts +26 -0
  26. package/dist/grid.css.ts.vanilla.js +9 -0
  27. package/dist/grid.d.ts +44 -0
  28. package/dist/grid.js +118 -0
  29. package/dist/hero.css-mistica.js +3 -3
  30. package/dist/highlighted-card.css-mistica.js +6 -6
  31. package/dist/horizontal-scroll.css-mistica.js +1 -1
  32. package/dist/icon-button.css-mistica.js +1 -1
  33. package/dist/image.css-mistica.js +1 -1
  34. package/dist/image.d.ts +2 -0
  35. package/dist/image.js +38 -31
  36. package/dist/index.d.ts +2 -0
  37. package/dist/index.js +5 -0
  38. package/dist/list.css-mistica.js +7 -7
  39. package/dist/loading-bar.css-mistica.js +7 -7
  40. package/dist/maybe-dismissable.css-mistica.js +3 -3
  41. package/dist/menu.css-mistica.js +1 -1
  42. package/dist/navigation-bar.css-mistica.js +17 -17
  43. package/dist/navigation-breadcrumbs.css-mistica.js +2 -2
  44. package/dist/package-version.js +1 -1
  45. package/dist/password-field.css-mistica.js +1 -1
  46. package/dist/popover.css-mistica.js +5 -5
  47. package/dist/progress-bar.css-mistica.js +1 -1
  48. package/dist/radio-button.css-mistica.js +14 -13
  49. package/dist/radio-button.css.d.ts +1 -0
  50. package/dist/radio-button.js +21 -20
  51. package/dist/responsive-layout.css-mistica.js +5 -5
  52. package/dist/screen-reader-only.css-mistica.js +1 -1
  53. package/dist/select.css-mistica.js +10 -10
  54. package/dist/skeletons.css-mistica.js +3 -3
  55. package/dist/skins/blau.d.ts +37 -37
  56. package/dist/skins/blau.js +100 -31
  57. package/dist/skins/constants.d.ts +1 -0
  58. package/dist/skins/constants.js +7 -6
  59. package/dist/skins/movistar-legacy.d.ts +40 -41
  60. package/dist/skins/movistar-legacy.js +87 -43
  61. package/dist/skins/movistar.d.ts +41 -47
  62. package/dist/skins/movistar.js +86 -50
  63. package/dist/skins/o2-classic.js +16 -4
  64. package/dist/skins/o2.d.ts +41 -39
  65. package/dist/skins/o2.js +104 -40
  66. package/dist/skins/skin-contract.css-mistica.js +217 -203
  67. package/dist/skins/skin-contract.css.d.ts +78 -64
  68. package/dist/skins/telefonica.d.ts +35 -35
  69. package/dist/skins/telefonica.js +96 -43
  70. package/dist/skins/types/colors.d.ts +39 -32
  71. package/dist/skins/vivo.d.ts +35 -33
  72. package/dist/skins/vivo.js +111 -48
  73. package/dist/snackbar.css-mistica.js +2 -2
  74. package/dist/spinner.css-mistica.js +1 -1
  75. package/dist/sprinkles.css-mistica.js +364 -322
  76. package/dist/stacking-group.css-mistica.js +11 -0
  77. package/dist/stacking-group.css.d.ts +1 -0
  78. package/dist/stacking-group.css.ts.vanilla.js +9 -0
  79. package/dist/stacking-group.d.ts +12 -0
  80. package/dist/stacking-group.js +84 -0
  81. package/dist/stepper.css-mistica.js +8 -8
  82. package/dist/switch-component.css-mistica.js +26 -25
  83. package/dist/switch-component.css.d.ts +1 -0
  84. package/dist/switch-component.js +19 -18
  85. package/dist/tabs.css-mistica.js +11 -11
  86. package/dist/tag.css-mistica.js +2 -2
  87. package/dist/text-field-base.css-mistica.js +6 -6
  88. package/dist/text-field-base.d.ts +5 -5
  89. package/dist/text-field-components.css-mistica.js +10 -10
  90. package/dist/text-field.d.ts +1 -1
  91. package/dist/text-link.css-mistica.js +3 -3
  92. package/dist/tooltip.css-mistica.js +7 -7
  93. package/dist/touchable.css-mistica.js +3 -3
  94. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  95. package/dist/video.css-mistica.js +2 -2
  96. package/dist-es/avatar.css-mistica.js +1 -1
  97. package/dist-es/badge.css-mistica.js +1 -1
  98. package/dist-es/button-group.css-mistica.js +1 -1
  99. package/dist-es/button-layout.css-mistica.js +6 -6
  100. package/dist-es/button.css-mistica.js +9 -9
  101. package/dist-es/callout.css-mistica.js +1 -1
  102. package/dist-es/card.css-mistica.js +2 -2
  103. package/dist-es/carousel.css-mistica.js +2 -2
  104. package/dist-es/checkbox.css-mistica.js +6 -6
  105. package/dist-es/checkbox.js +39 -38
  106. package/dist-es/chip.css-mistica.js +4 -4
  107. package/dist-es/circle.css-mistica.js +1 -1
  108. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  109. package/dist-es/cvv-field.css-mistica.js +1 -1
  110. package/dist-es/dialog.css-mistica.js +5 -5
  111. package/dist-es/double-field.css-mistica.js +2 -2
  112. package/dist-es/empty-state-card.css-mistica.js +2 -2
  113. package/dist-es/empty-state.css-mistica.js +2 -2
  114. package/dist-es/feedback.css-mistica.js +2 -2
  115. package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
  116. package/dist-es/grid.css-mistica.js +131 -0
  117. package/dist-es/grid.css.ts.vanilla.js +2 -0
  118. package/dist-es/grid.js +61 -0
  119. package/dist-es/hero.css-mistica.js +2 -2
  120. package/dist-es/highlighted-card.css-mistica.js +5 -5
  121. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  122. package/dist-es/icon-button.css-mistica.js +1 -1
  123. package/dist-es/image.css-mistica.js +1 -1
  124. package/dist-es/image.js +50 -43
  125. package/dist-es/index.js +1691 -1689
  126. package/dist-es/list.css-mistica.js +2 -2
  127. package/dist-es/loading-bar.css-mistica.js +2 -2
  128. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  129. package/dist-es/menu.css-mistica.js +1 -1
  130. package/dist-es/navigation-bar.css-mistica.js +11 -11
  131. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  132. package/dist-es/package-version.js +1 -1
  133. package/dist-es/password-field.css-mistica.js +1 -1
  134. package/dist-es/popover.css-mistica.js +2 -2
  135. package/dist-es/progress-bar.css-mistica.js +1 -1
  136. package/dist-es/radio-button.css-mistica.js +8 -8
  137. package/dist-es/radio-button.js +30 -29
  138. package/dist-es/responsive-layout.css-mistica.js +4 -4
  139. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  140. package/dist-es/select.css-mistica.js +9 -9
  141. package/dist-es/skeletons.css-mistica.js +2 -2
  142. package/dist-es/skins/blau.js +100 -31
  143. package/dist-es/skins/constants.js +2 -2
  144. package/dist-es/skins/movistar-legacy.js +87 -43
  145. package/dist-es/skins/movistar.js +87 -51
  146. package/dist-es/skins/o2-classic.js +16 -4
  147. package/dist-es/skins/o2.js +104 -40
  148. package/dist-es/skins/skin-contract.css-mistica.js +217 -203
  149. package/dist-es/skins/telefonica.js +96 -43
  150. package/dist-es/skins/vivo.js +111 -48
  151. package/dist-es/snackbar.css-mistica.js +2 -2
  152. package/dist-es/spinner.css-mistica.js +1 -1
  153. package/dist-es/sprinkles.css-mistica.js +364 -322
  154. package/dist-es/stacking-group.css-mistica.js +4 -0
  155. package/dist-es/stacking-group.css.ts.vanilla.js +2 -0
  156. package/dist-es/stacking-group.js +33 -0
  157. package/dist-es/stepper.css-mistica.js +2 -2
  158. package/dist-es/style.css +1 -1
  159. package/dist-es/switch-component.css-mistica.js +19 -19
  160. package/dist-es/switch-component.js +34 -33
  161. package/dist-es/tabs.css-mistica.js +9 -9
  162. package/dist-es/tag.css-mistica.js +2 -2
  163. package/dist-es/text-field-base.css-mistica.js +2 -2
  164. package/dist-es/text-field-components.css-mistica.js +2 -2
  165. package/dist-es/text-link.css-mistica.js +3 -3
  166. package/dist-es/tooltip.css-mistica.js +3 -3
  167. package/dist-es/touchable.css-mistica.js +2 -2
  168. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  169. package/dist-es/video.css-mistica.js +2 -2
  170. package/package.json +1 -1
@@ -12,8 +12,8 @@ _export(exports, {
12
12
  getMovistarLegacySkin: ()=>d,
13
13
  palette: ()=>e
14
14
  });
15
- const _colorJs = require("../utils/color.js");
16
15
  const _constantsJs = require("./constants.js");
16
+ const _colorJs = require("../utils/color.js");
17
17
  const e = {
18
18
  movistarBlue: "#019DF4",
19
19
  movistarBlue10: "#E6F5FD",
@@ -29,7 +29,6 @@ const e = {
29
29
  movistarGreen70: "#407F0F",
30
30
  pepper: "#FF374A",
31
31
  pepper10: "#FFEBED",
32
- pepper20: "#FFC3C8",
33
32
  pepper40: "#FF7380",
34
33
  pepper55: "#D73241",
35
34
  pepper70: "#B22634",
@@ -56,29 +55,35 @@ const e = {
56
55
  movistarProminentBlueLight70: "#546874",
57
56
  darkModeBlack: "#191919",
58
57
  darkModeGrey: "#242424"
59
- }, d = (o)=>{
60
- const t = {
61
- name: _constantsJs.MOVISTAR_SKIN,
58
+ }, d = (t)=>{
59
+ const o = {
60
+ name: _constantsJs.MOVISTAR_LEGACY_SKIN,
62
61
  colors: {
63
- appBarBackground: e.white,
64
62
  background: e.white,
63
+ backgroundAlternative: e.grey1,
64
+ backgroundBrand: e.movistarBlue,
65
+ backgroundBrandSecondary: e.movistarBlue,
65
66
  backgroundContainer: e.white,
67
+ backgroundContainerHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.03),
68
+ backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.05),
66
69
  backgroundContainerBrand: e.movistarBlue,
70
+ backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.1),
71
+ backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.2),
67
72
  backgroundContainerBrandOverInverse: e.movistarBlue55,
68
73
  backgroundContainerAlternative: e.grey1,
69
- backgroundBrand: e.movistarBlue,
70
- backgroundBrandSecondary: e.movistarBlue,
71
74
  backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
72
75
  backgroundSkeleton: e.grey2,
73
76
  backgroundSkeletonInverse: e.movistarBlue55,
74
- navigationBarBackground: e.movistarBlue,
75
- backgroundAlternative: e.grey1,
76
77
  backgroundFeedbackBottom: e.movistarBlue,
78
+ appBarBackground: e.white,
79
+ navigationBarBackground: e.movistarBlue,
77
80
  skeletonWave: e.grey2,
78
81
  borderLow: e.grey1,
79
82
  border: e.grey3,
80
83
  borderHigh: e.grey5,
81
84
  borderSelected: e.movistarBlue,
85
+ coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
86
+ coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
82
87
  buttonDangerBackground: e.pepper,
83
88
  buttonDangerBackgroundSelected: e.pepper55,
84
89
  buttonDangerBackgroundHover: e.pepper55,
@@ -91,10 +96,10 @@ const e = {
91
96
  buttonPrimaryBackgroundInverseSelected: e.movistarBlue30,
92
97
  buttonSecondaryBorder: e.movistarBlue,
93
98
  buttonSecondaryBorderSelected: e.movistarBlue55,
94
- buttonSecondaryBorderInverse: e.white,
95
- buttonSecondaryBorderInverseSelected: e.white,
96
99
  buttonSecondaryBackgroundHover: e.movistarBlue10,
97
100
  buttonSecondaryBackgroundSelected: e.movistarBlue10,
101
+ buttonSecondaryBorderInverse: e.white,
102
+ buttonSecondaryBorderInverseSelected: e.white,
98
103
  buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.2),
99
104
  buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.2),
100
105
  textButtonPrimary: e.white,
@@ -127,23 +132,18 @@ const e = {
127
132
  inverse: e.white,
128
133
  neutralHigh: e.grey6,
129
134
  neutralMedium: e.grey5,
135
+ neutralMediumInverse: e.grey5,
130
136
  neutralLow: e.grey1,
131
137
  neutralLowAlternative: e.grey2,
132
- promo: e.purple,
133
- highlight: e.pink,
134
138
  textPrimary: e.grey6,
135
139
  textPrimaryInverse: e.white,
136
140
  textSecondary: e.grey5,
137
- textSecondaryInverse: e.white,
138
- error: e.pepper,
141
+ textSecondaryInverse: e.movistarBlue10,
139
142
  success: e.movistarGreen,
140
143
  warning: e.egg,
141
- textNavigationBarPrimary: e.white,
142
- textNavigationBarSecondary: e.movistarBlue20,
143
- textNavigationSearchBarHint: e.movistarBlue20,
144
- textNavigationSearchBarText: e.white,
145
- textAppBar: e.grey4,
146
- textAppBarSelected: e.movistarBlue,
144
+ error: e.pepper,
145
+ promo: e.purple,
146
+ highlight: e.pink,
147
147
  successLow: e.movistarGreen10,
148
148
  warningLow: e.egg10,
149
149
  errorLow: e.pepper10,
@@ -157,40 +157,56 @@ const e = {
157
157
  warningHighInverse: e.egg80,
158
158
  errorHighInverse: e.pepper70,
159
159
  promoHighInverse: e.purple70,
160
- neutralMediumInverse: e.grey5
160
+ textNavigationBarPrimary: e.white,
161
+ textNavigationBarSecondary: e.movistarBlue20,
162
+ textNavigationSearchBarHint: e.movistarBlue20,
163
+ textNavigationSearchBarText: e.white,
164
+ textAppBar: e.grey4,
165
+ textAppBarSelected: e.movistarBlue,
166
+ customTabsBackground: e.white
161
167
  },
162
168
  darkModeColors: {
163
- brand: e.movistarBlue,
164
- appBarBackground: e.darkModeGrey,
165
169
  background: e.darkModeBlack,
170
+ backgroundAlternative: e.darkModeBlack,
171
+ backgroundBrand: e.darkModeBlack,
172
+ backgroundBrandSecondary: e.darkModeBlack,
166
173
  backgroundContainer: e.darkModeGrey,
174
+ backgroundContainerHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
175
+ backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
167
176
  backgroundContainerBrand: e.darkModeGrey,
177
+ backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
178
+ backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
168
179
  backgroundContainerBrandOverInverse: e.darkModeGrey,
169
180
  backgroundContainerAlternative: e.darkModeGrey,
170
- backgroundBrand: e.darkModeBlack,
171
- backgroundBrandSecondary: e.darkModeBlack,
172
181
  backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
173
182
  backgroundSkeleton: e.grey6,
174
183
  backgroundSkeletonInverse: e.grey6,
175
- navigationBarBackground: e.darkModeBlack,
176
- backgroundAlternative: e.darkModeBlack,
177
184
  backgroundFeedbackBottom: e.darkModeBlack,
185
+ appBarBackground: e.darkModeGrey,
186
+ navigationBarBackground: e.darkModeBlack,
178
187
  skeletonWave: e.grey5,
179
188
  borderLow: e.darkModeBlack,
180
189
  border: e.darkModeGrey,
181
- buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
182
- buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
190
+ borderHigh: e.grey5,
191
+ borderSelected: e.movistarBlue,
192
+ coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
193
+ coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
194
+ buttonDangerBackground: e.pepper,
195
+ buttonDangerBackgroundSelected: e.pepper55,
196
+ buttonDangerBackgroundHover: e.pepper55,
197
+ buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
198
+ buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
183
199
  buttonPrimaryBackground: e.movistarBlue,
184
200
  buttonPrimaryBackgroundInverse: e.movistarBlue,
185
201
  buttonPrimaryBackgroundSelected: e.movistarBlue55,
186
202
  buttonPrimaryBackgroundHover: e.movistarBlue55,
187
203
  buttonPrimaryBackgroundInverseSelected: e.movistarBlue55,
204
+ buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
205
+ buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
188
206
  buttonSecondaryBorder: e.white,
189
207
  buttonSecondaryBorderSelected: e.white,
190
208
  buttonSecondaryBorderInverse: e.white,
191
209
  buttonSecondaryBorderInverseSelected: e.white,
192
- buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
193
- buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
194
210
  buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
195
211
  buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
196
212
  textButtonPrimary: e.grey2,
@@ -202,32 +218,39 @@ const e = {
202
218
  textButtonSecondaryInverseSelected: e.grey2,
203
219
  textLink: e.movistarBlue,
204
220
  textLinkInverse: e.movistarBlue,
221
+ textLinkDanger: e.pepper,
222
+ textLinkSnackbar: e.movistarBlue30,
205
223
  control: e.grey6,
206
224
  controlActivated: e.movistarBlue,
225
+ controlError: e.pepper,
207
226
  loadingBar: e.movistarBlue,
208
- loadingBarBackground: (0, _colorJs.applyAlpha)(e.white, 0.05),
227
+ loadingBarBackground: e.darkModeGrey,
209
228
  toggleAndroidInactive: e.grey4,
210
229
  toggleAndroidBackgroundActive: e.movistarBlue20,
211
230
  iosControlKnob: e.grey2,
212
231
  divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
213
232
  dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
214
233
  navigationBarDivider: e.darkModeBlack,
215
- brandHigh: e.grey6,
234
+ badge: e.pepper55,
235
+ feedbackErrorBackground: e.pepper,
236
+ feedbackInfoBackground: e.grey6,
237
+ brand: e.movistarBlue,
238
+ brandHigh: (0, _colorJs.applyAlpha)(e.white, 0.05),
216
239
  inverse: e.grey2,
217
240
  neutralHigh: e.grey2,
218
241
  neutralMedium: e.grey5,
242
+ neutralMediumInverse: e.grey5,
219
243
  neutralLow: e.grey6,
220
244
  neutralLowAlternative: e.grey6,
221
245
  textPrimary: e.grey2,
222
246
  textPrimaryInverse: e.grey2,
223
247
  textSecondary: e.grey4,
224
248
  textSecondaryInverse: e.grey4,
225
- textNavigationBarPrimary: e.grey2,
226
- textNavigationBarSecondary: e.grey4,
227
- textNavigationSearchBarHint: e.grey4,
228
- textNavigationSearchBarText: e.grey2,
229
- textAppBar: e.grey5,
230
- textAppBarSelected: e.grey2,
249
+ success: e.movistarGreen,
250
+ warning: e.egg,
251
+ error: e.pepper,
252
+ promo: e.purple,
253
+ highlight: e.pink,
231
254
  successLow: e.grey6,
232
255
  warningLow: e.grey6,
233
256
  errorLow: e.grey6,
@@ -241,9 +264,30 @@ const e = {
241
264
  warningHighInverse: e.egg80,
242
265
  errorHighInverse: e.pepper70,
243
266
  promoHighInverse: e.purple70,
244
- neutralMediumInverse: e.grey5
267
+ textNavigationBarPrimary: e.grey2,
268
+ textNavigationBarSecondary: e.grey4,
269
+ textNavigationSearchBarHint: e.grey4,
270
+ textNavigationSearchBarText: e.grey2,
271
+ textAppBar: e.grey5,
272
+ textAppBarSelected: e.grey2,
273
+ customTabsBackground: e.darkModeBlack
274
+ },
275
+ borderRadii: {
276
+ avatar: "50%",
277
+ bar: "999px",
278
+ button: "4px",
279
+ checkbox: "2px",
280
+ container: "8px",
281
+ indicator: "999px",
282
+ input: "8px",
283
+ legacyDisplay: "16px",
284
+ popup: "8px",
285
+ sheet: "8px"
245
286
  },
246
287
  textPresets: {
288
+ cardTitle: {
289
+ weight: "bold"
290
+ },
247
291
  text5: {
248
292
  weight: "bold"
249
293
  },
@@ -264,5 +308,5 @@ const e = {
264
308
  }
265
309
  }
266
310
  };
267
- return o === "prominent" && (t.colors.brand = e.movistarProminentBlue, t.colors.brandHigh = e.movistarProminentBlueDark, t.colors.backgroundBrand = e.movistarProminentBlue, t.colors.navigationBarBackground = e.movistarProminentBlue, t.colors.backgroundFeedbackBottom = e.movistarProminentBlue, t.colors.controlActivated = e.movistarProminentBlue, t.colors.dividerInverse = e.movistarProminentBlueDark), t;
311
+ return t === "prominent" && (o.colors.brand = e.movistarProminentBlue, o.colors.brandHigh = e.movistarProminentBlueDark, o.colors.backgroundBrand = e.movistarProminentBlue, o.colors.navigationBarBackground = e.movistarProminentBlue, o.colors.backgroundFeedbackBottom = e.movistarProminentBlue, o.colors.controlActivated = e.movistarProminentBlue, o.colors.dividerInverse = e.movistarProminentBlueDark), o;
268
312
  };
@@ -1,51 +1,45 @@
1
1
  import type { GetKnownSkin } from './types';
2
2
  export declare const palette: {
3
- readonly movistarBlue: "#019DF4";
4
- readonly movistarBlue10: "#E6F5FD";
5
- readonly movistarBlue20: "#B3E1FB";
6
- readonly movistarBlue30: "#80CEF9";
7
- readonly movistarBlue40: "#4DBAF7";
8
- readonly movistarBlue55: "#008EDD";
9
- readonly movistarBlueDark: "#0B2739";
10
- readonly movistarGreen: "#5CB615";
11
- readonly movistarGreen10: "#EFF8E8";
12
- readonly movistarGreen30: "#ADDA8A";
13
- readonly movistarGreen40: "#8DCC5B";
14
- readonly movistarGreen60: "#499110";
15
- readonly movistarGreen70: "#407F0F";
16
- readonly pepper: "#FF374A";
17
- readonly pepper10: "#FFEBED";
18
- readonly pepper20: "#FFC3C8";
19
- readonly pepper40: "#FF7380";
20
- readonly pepper55: "#D73241";
21
- readonly pepper70: "#B22634";
22
- readonly egg: "#F28D15";
23
- readonly egg10: "#FEF4E8";
24
- readonly egg40: "#F6AF5B";
25
- readonly egg80: "#6D3F09";
26
- readonly pink: "#E63780";
27
- readonly purple: "#A13EA1";
28
- readonly purple10: "#F6ECF6";
29
- readonly purple40: "#BD78BD";
30
- readonly purple70: "#712B71";
31
- readonly grey1: "#F6F6F6";
32
- readonly grey2: "#EEEEEE";
33
- readonly grey3: "#DDDDDD";
34
- readonly grey4: "#999999";
35
- readonly grey5: "#86888C";
36
- readonly grey6: "#313235";
37
- readonly white: "#FFFFFF";
38
- readonly movistarProminentBlue: "#0B2739";
39
- readonly movistarProminentBlueDark: "#081F2D";
40
- readonly movistarProminentBlueLight20: "#CED3D7";
41
- readonly movistarProminentBlueLight50: "#85939C";
42
- readonly movistarProminentBlueLight70: "#546874";
43
- readonly darkModeBlack: "#061824";
44
- readonly darkModeGrey: "#081F2E";
45
- readonly darkModeGrey2: "#EAEBEE";
46
- readonly darkModeGrey3: "#CED4D7";
47
- readonly darkModeGrey4: "#85939C";
48
- readonly darkModeGrey5: "#6D7D88";
49
- readonly darkModeGrey6: "#3C5261";
3
+ movistarBlue: string;
4
+ movistarBlue10: string;
5
+ movistarBlue20: string;
6
+ movistarBlue30: string;
7
+ movistarBlue40: string;
8
+ movistarBlue55: string;
9
+ movistarGreen: string;
10
+ movistarGreen10: string;
11
+ movistarGreen30: string;
12
+ movistarGreen40: string;
13
+ movistarGreen60: string;
14
+ movistarGreen70: string;
15
+ pepper: string;
16
+ pepper10: string;
17
+ pepper40: string;
18
+ pepper55: string;
19
+ pepper70: string;
20
+ egg: string;
21
+ egg10: string;
22
+ egg40: string;
23
+ egg80: string;
24
+ pink: string;
25
+ purple: string;
26
+ purple10: string;
27
+ purple40: string;
28
+ purple70: string;
29
+ grey1: string;
30
+ grey2: string;
31
+ grey3: string;
32
+ grey4: string;
33
+ grey5: string;
34
+ grey6: string;
35
+ white: string;
36
+ movistarBlueDark: string;
37
+ darkModeBlack: string;
38
+ darkModeGrey: string;
39
+ darkModeGrey2: string;
40
+ darkModeGrey3: string;
41
+ darkModeGrey4: string;
42
+ darkModeGrey5: string;
43
+ darkModeGrey6: string;
50
44
  };
51
45
  export declare const getMovistarSkin: GetKnownSkin;
@@ -12,8 +12,8 @@ _export(exports, {
12
12
  getMovistarSkin: ()=>d,
13
13
  palette: ()=>e
14
14
  });
15
- const _colorJs = require("../utils/color.js");
16
15
  const _constantsJs = require("./constants.js");
16
+ const _colorJs = require("../utils/color.js");
17
17
  const e = {
18
18
  movistarBlue: "#019DF4",
19
19
  movistarBlue10: "#E6F5FD",
@@ -21,7 +21,6 @@ const e = {
21
21
  movistarBlue30: "#80CEF9",
22
22
  movistarBlue40: "#4DBAF7",
23
23
  movistarBlue55: "#008EDD",
24
- movistarBlueDark: "#0B2739",
25
24
  movistarGreen: "#5CB615",
26
25
  movistarGreen10: "#EFF8E8",
27
26
  movistarGreen30: "#ADDA8A",
@@ -30,7 +29,6 @@ const e = {
30
29
  movistarGreen70: "#407F0F",
31
30
  pepper: "#FF374A",
32
31
  pepper10: "#FFEBED",
33
- pepper20: "#FFC3C8",
34
32
  pepper40: "#FF7380",
35
33
  pepper55: "#D73241",
36
34
  pepper70: "#B22634",
@@ -50,11 +48,7 @@ const e = {
50
48
  grey5: "#86888C",
51
49
  grey6: "#313235",
52
50
  white: "#FFFFFF",
53
- movistarProminentBlue: "#0B2739",
54
- movistarProminentBlueDark: "#081F2D",
55
- movistarProminentBlueLight20: "#CED3D7",
56
- movistarProminentBlueLight50: "#85939C",
57
- movistarProminentBlueLight70: "#546874",
51
+ movistarBlueDark: "#0B2739",
58
52
  darkModeBlack: "#061824",
59
53
  darkModeGrey: "#081F2E",
60
54
  darkModeGrey2: "#EAEBEE",
@@ -65,25 +59,31 @@ const e = {
65
59
  }, d = ()=>({
66
60
  name: _constantsJs.MOVISTAR_SKIN,
67
61
  colors: {
68
- appBarBackground: e.white,
69
62
  background: e.white,
63
+ backgroundAlternative: e.grey1,
64
+ backgroundBrand: e.movistarBlue,
65
+ backgroundBrandSecondary: e.movistarBlueDark,
70
66
  backgroundContainer: e.white,
67
+ backgroundContainerHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.03),
68
+ backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.05),
71
69
  backgroundContainerBrand: e.movistarBlue,
70
+ backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.1),
71
+ backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.2),
72
72
  backgroundContainerBrandOverInverse: e.movistarBlue55,
73
73
  backgroundContainerAlternative: e.grey1,
74
- backgroundBrand: e.movistarBlue,
75
- backgroundBrandSecondary: e.movistarBlueDark,
76
74
  backgroundOverlay: (0, _colorJs.applyAlpha)(e.movistarBlueDark, 0.6),
77
75
  backgroundSkeleton: e.grey2,
78
76
  backgroundSkeletonInverse: e.movistarBlue55,
79
- navigationBarBackground: e.movistarBlue,
80
- backgroundAlternative: e.grey1,
81
77
  backgroundFeedbackBottom: e.movistarBlue,
78
+ appBarBackground: e.white,
79
+ navigationBarBackground: e.movistarBlue,
82
80
  skeletonWave: e.grey2,
83
81
  borderLow: e.grey1,
84
82
  border: e.grey3,
85
83
  borderHigh: e.grey5,
86
84
  borderSelected: e.movistarBlue,
85
+ coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
86
+ coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
87
87
  buttonDangerBackground: e.pepper,
88
88
  buttonDangerBackgroundSelected: e.pepper55,
89
89
  buttonDangerBackgroundHover: e.pepper55,
@@ -96,10 +96,10 @@ const e = {
96
96
  buttonPrimaryBackgroundInverseSelected: e.movistarBlue30,
97
97
  buttonSecondaryBorder: e.movistarBlue,
98
98
  buttonSecondaryBorderSelected: e.movistarBlue55,
99
- buttonSecondaryBorderInverse: e.white,
100
- buttonSecondaryBorderInverseSelected: e.white,
101
99
  buttonSecondaryBackgroundHover: e.movistarBlue10,
102
100
  buttonSecondaryBackgroundSelected: e.movistarBlue10,
101
+ buttonSecondaryBorderInverse: e.white,
102
+ buttonSecondaryBorderInverseSelected: e.white,
103
103
  buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.2),
104
104
  buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.2),
105
105
  textButtonPrimary: e.white,
@@ -122,7 +122,7 @@ const e = {
122
122
  toggleAndroidBackgroundActive: e.movistarBlue20,
123
123
  iosControlKnob: e.white,
124
124
  divider: e.grey2,
125
- dividerInverse: e.movistarBlue55,
125
+ dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.2),
126
126
  navigationBarDivider: e.movistarBlue,
127
127
  badge: e.pepper55,
128
128
  feedbackErrorBackground: e.pepper,
@@ -132,23 +132,18 @@ const e = {
132
132
  inverse: e.white,
133
133
  neutralHigh: e.movistarBlueDark,
134
134
  neutralMedium: e.grey5,
135
+ neutralMediumInverse: e.grey5,
135
136
  neutralLow: e.grey1,
136
137
  neutralLowAlternative: e.grey2,
137
- promo: e.purple,
138
- highlight: e.pink,
139
138
  textPrimary: e.movistarBlueDark,
140
139
  textPrimaryInverse: e.white,
141
140
  textSecondary: e.grey5,
142
141
  textSecondaryInverse: e.movistarBlue10,
143
- error: e.pepper,
144
142
  success: e.movistarGreen,
145
143
  warning: e.egg,
146
- textNavigationBarPrimary: e.white,
147
- textNavigationBarSecondary: e.movistarBlue20,
148
- textNavigationSearchBarHint: e.movistarBlue20,
149
- textNavigationSearchBarText: e.white,
150
- textAppBar: e.grey4,
151
- textAppBarSelected: e.movistarBlue,
144
+ error: e.pepper,
145
+ promo: e.purple,
146
+ highlight: e.pink,
152
147
  successLow: e.movistarGreen10,
153
148
  warningLow: e.egg10,
154
149
  errorLow: e.pepper10,
@@ -162,77 +157,100 @@ const e = {
162
157
  warningHighInverse: e.egg80,
163
158
  errorHighInverse: e.pepper70,
164
159
  promoHighInverse: e.purple70,
165
- neutralMediumInverse: e.grey5
160
+ textNavigationBarPrimary: e.white,
161
+ textNavigationBarSecondary: e.movistarBlue20,
162
+ textNavigationSearchBarHint: e.movistarBlue20,
163
+ textNavigationSearchBarText: e.white,
164
+ textAppBar: e.grey4,
165
+ textAppBarSelected: e.movistarBlue,
166
+ customTabsBackground: e.movistarBlue
166
167
  },
167
168
  darkModeColors: {
168
- appBarBackground: e.darkModeGrey,
169
169
  background: e.darkModeBlack,
170
+ backgroundAlternative: e.darkModeBlack,
171
+ backgroundBrand: e.darkModeBlack,
172
+ backgroundBrandSecondary: e.darkModeBlack,
170
173
  backgroundContainer: e.darkModeGrey,
174
+ backgroundContainerHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
175
+ backgroundContainerPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
171
176
  backgroundContainerBrand: e.darkModeGrey,
177
+ backgroundContainerBrandHover: (0, _colorJs.applyAlpha)(e.white, 0.03),
178
+ backgroundContainerBrandPressed: (0, _colorJs.applyAlpha)(e.white, 0.05),
172
179
  backgroundContainerBrandOverInverse: e.darkModeGrey,
173
180
  backgroundContainerAlternative: e.darkModeGrey,
174
- backgroundBrand: e.darkModeBlack,
175
- backgroundBrandSecondary: e.darkModeBlack,
176
181
  backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
177
182
  backgroundSkeleton: e.movistarBlueDark,
178
183
  backgroundSkeletonInverse: e.movistarBlueDark,
179
- navigationBarBackground: e.darkModeBlack,
180
- backgroundAlternative: e.darkModeBlack,
181
184
  backgroundFeedbackBottom: e.darkModeBlack,
185
+ appBarBackground: e.darkModeGrey,
186
+ navigationBarBackground: e.darkModeBlack,
182
187
  skeletonWave: e.darkModeGrey6,
183
- borderHigh: e.darkModeGrey4,
184
188
  borderLow: e.darkModeBlack,
185
189
  border: e.darkModeGrey,
186
- buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
187
- buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
190
+ borderHigh: e.darkModeGrey4,
191
+ borderSelected: e.movistarBlue,
192
+ coverBackgroundHover: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.25),
193
+ coverBackgroundPressed: (0, _colorJs.applyAlpha)(e.darkModeBlack, 0.35),
194
+ buttonDangerBackground: e.pepper,
195
+ buttonDangerBackgroundSelected: e.pepper55,
196
+ buttonDangerBackgroundHover: e.pepper55,
197
+ buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
198
+ buttonLinkBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.08),
188
199
  buttonPrimaryBackground: e.movistarBlue,
189
200
  buttonPrimaryBackgroundInverse: e.movistarBlue,
190
201
  buttonPrimaryBackgroundSelected: e.movistarBlue55,
191
202
  buttonPrimaryBackgroundHover: e.movistarBlue55,
192
203
  buttonPrimaryBackgroundInverseSelected: e.movistarBlue55,
204
+ buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
205
+ buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
193
206
  buttonSecondaryBorder: e.white,
194
207
  buttonSecondaryBorderSelected: e.white,
195
208
  buttonSecondaryBorderInverse: e.white,
196
209
  buttonSecondaryBorderInverseSelected: e.white,
197
- buttonSecondaryBackgroundHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
198
- buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
199
210
  buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
200
211
  buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
201
212
  textButtonPrimary: e.darkModeGrey2,
202
213
  textButtonPrimaryInverse: e.darkModeGrey2,
203
214
  textButtonPrimaryInverseSelected: e.darkModeGrey2,
204
215
  textButtonSecondary: e.darkModeGrey2,
205
- textButtonSecondarySelected: e.darkModeGrey2,
216
+ textButtonSecondarySelected: e.darkModeGrey4,
206
217
  textButtonSecondaryInverse: e.darkModeGrey2,
207
- textButtonSecondaryInverseSelected: e.darkModeGrey2,
218
+ textButtonSecondaryInverseSelected: e.darkModeGrey4,
208
219
  textLink: e.movistarBlue,
209
220
  textLinkInverse: e.movistarBlue,
221
+ textLinkDanger: e.pepper,
222
+ textLinkSnackbar: e.movistarBlue30,
210
223
  control: e.darkModeGrey6,
211
224
  controlActivated: e.movistarBlue,
225
+ controlError: e.pepper,
212
226
  loadingBar: e.movistarBlue,
213
- loadingBarBackground: (0, _colorJs.applyAlpha)(e.white, 0.05),
227
+ loadingBarBackground: e.darkModeGrey6,
214
228
  toggleAndroidInactive: e.darkModeGrey4,
215
229
  toggleAndroidBackgroundActive: e.movistarBlue20,
216
230
  iosControlKnob: e.darkModeGrey2,
217
231
  divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
218
232
  dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
219
233
  navigationBarDivider: e.darkModeBlack,
220
- brandHigh: e.darkModeGrey6,
234
+ badge: e.pepper55,
235
+ feedbackErrorBackground: e.pepper,
236
+ feedbackInfoBackground: e.movistarBlueDark,
237
+ brand: e.movistarBlue,
238
+ brandHigh: e.darkModeGrey,
221
239
  inverse: e.darkModeGrey2,
222
240
  neutralHigh: e.darkModeGrey2,
223
241
  neutralMedium: e.darkModeGrey5,
242
+ neutralMediumInverse: e.grey5,
224
243
  neutralLow: e.movistarBlueDark,
225
244
  neutralLowAlternative: e.movistarBlueDark,
226
245
  textPrimary: e.darkModeGrey2,
227
246
  textPrimaryInverse: e.darkModeGrey2,
228
247
  textSecondary: e.darkModeGrey4,
229
248
  textSecondaryInverse: e.darkModeGrey4,
230
- textNavigationBarPrimary: e.darkModeGrey2,
231
- textNavigationBarSecondary: e.darkModeGrey4,
232
- textNavigationSearchBarHint: e.darkModeGrey4,
233
- textNavigationSearchBarText: e.darkModeGrey2,
234
- textAppBar: e.darkModeGrey5,
235
- textAppBarSelected: e.darkModeGrey2,
249
+ success: e.movistarGreen,
250
+ warning: e.egg,
251
+ error: e.pepper,
252
+ promo: e.purple,
253
+ highlight: e.pink,
236
254
  successLow: e.movistarBlueDark,
237
255
  warningLow: e.movistarBlueDark,
238
256
  errorLow: e.movistarBlueDark,
@@ -246,9 +264,30 @@ const e = {
246
264
  warningHighInverse: e.egg80,
247
265
  errorHighInverse: e.pepper70,
248
266
  promoHighInverse: e.purple70,
249
- neutralMediumInverse: e.grey5
267
+ textNavigationBarPrimary: e.darkModeGrey2,
268
+ textNavigationBarSecondary: e.darkModeGrey4,
269
+ textNavigationSearchBarHint: e.darkModeGrey4,
270
+ textNavigationSearchBarText: e.darkModeGrey2,
271
+ textAppBar: e.darkModeGrey5,
272
+ textAppBarSelected: e.darkModeGrey2,
273
+ customTabsBackground: e.darkModeBlack
274
+ },
275
+ borderRadii: {
276
+ avatar: "50%",
277
+ bar: "999px",
278
+ button: "4px",
279
+ checkbox: "2px",
280
+ container: "8px",
281
+ indicator: "999px",
282
+ input: "8px",
283
+ legacyDisplay: "16px",
284
+ popup: "8px",
285
+ sheet: "8px"
250
286
  },
251
287
  textPresets: {
288
+ cardTitle: {
289
+ weight: "bold"
290
+ },
252
291
  text5: {
253
292
  weight: "bold"
254
293
  },
@@ -266,9 +305,6 @@ const e = {
266
305
  },
267
306
  text10: {
268
307
  weight: "bold"
269
- },
270
- cardTitle: {
271
- weight: "bold"
272
308
  }
273
309
  }
274
310
  });