@telefonica/mistica 10.17.0 → 10.21.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 (70) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/button-layout.js +28 -17
  3. package/dist/button.js +24 -8
  4. package/dist/card.d.ts +10 -1
  5. package/dist/card.js +29 -29
  6. package/dist/card.js.flow +16 -1
  7. package/dist/header.d.ts +2 -0
  8. package/dist/header.js.flow +5 -0
  9. package/dist/icons/icon-success.js +14 -6
  10. package/dist/image.d.ts +25 -4
  11. package/dist/image.js +67 -9
  12. package/dist/image.js.flow +33 -4
  13. package/dist/index.d.ts +2 -0
  14. package/dist/index.js +7 -0
  15. package/dist/index.js.flow +2 -0
  16. package/dist/package-version.js +1 -1
  17. package/dist/section-title.d.ts +1 -3
  18. package/dist/section-title.js.flow +1 -2
  19. package/dist/skins/blau.d.ts +6 -3
  20. package/dist/skins/blau.js +34 -5
  21. package/dist/skins/blau.js.flow +6 -3
  22. package/dist/skins/movistar.d.ts +21 -11
  23. package/dist/skins/movistar.js +76 -40
  24. package/dist/skins/movistar.js.flow +21 -11
  25. package/dist/skins/o2-classic.d.ts +21 -9
  26. package/dist/skins/o2-classic.js +64 -26
  27. package/dist/skins/o2-classic.js.flow +21 -9
  28. package/dist/skins/o2.d.ts +19 -17
  29. package/dist/skins/o2.js +68 -40
  30. package/dist/skins/o2.js.flow +19 -17
  31. package/dist/skins/telefonica.d.ts +18 -13
  32. package/dist/skins/telefonica.js +76 -45
  33. package/dist/skins/telefonica.js.flow +18 -13
  34. package/dist/skins/types.d.ts +12 -0
  35. package/dist/skins/types.js.flow +12 -0
  36. package/dist/skins/vivo.d.ts +9 -4
  37. package/dist/skins/vivo.js +37 -6
  38. package/dist/skins/vivo.js.flow +9 -4
  39. package/dist/tag.d.ts +6 -1
  40. package/dist/tag.js +133 -24
  41. package/dist/tag.js.flow +15 -1
  42. package/dist/text.d.ts +4 -0
  43. package/dist/text.js +13 -6
  44. package/dist/text.js.flow +10 -0
  45. package/dist/theme-context-provider.js +8 -2
  46. package/dist/theme.d.ts +2 -0
  47. package/dist/theme.js.flow +2 -0
  48. package/dist/touchable.js +3 -2
  49. package/dist/video.d.ts +32 -0
  50. package/dist/video.js +161 -0
  51. package/dist/video.js.flow +50 -0
  52. package/dist-es/button-layout.js +28 -17
  53. package/dist-es/button.js +24 -8
  54. package/dist-es/card.js +30 -30
  55. package/dist-es/icons/icon-success.js +14 -6
  56. package/dist-es/image.js +41 -8
  57. package/dist-es/index.js +1 -0
  58. package/dist-es/package-version.js +1 -1
  59. package/dist-es/skins/blau.js +36 -5
  60. package/dist-es/skins/movistar.js +78 -40
  61. package/dist-es/skins/o2-classic.js +66 -26
  62. package/dist-es/skins/o2.js +70 -40
  63. package/dist-es/skins/telefonica.js +78 -45
  64. package/dist-es/skins/vivo.js +39 -6
  65. package/dist-es/tag.js +130 -26
  66. package/dist-es/text.js +13 -6
  67. package/dist-es/theme-context-provider.js +8 -2
  68. package/dist-es/touchable.js +3 -2
  69. package/dist-es/video.js +123 -0
  70. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -34,6 +34,7 @@ export { default as MasterDetailLayout } from './master-detail-layout';
34
34
  export { default as NavigationBreadcrumbs } from './navigation-breadcrumbs';
35
35
  export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8, Text9, Text10 } from './text';
36
36
  export { default as Tag } from './tag';
37
+ export type { TagType } from './tag';
37
38
  export { default as SectionTitle } from './section-title';
38
39
  export { Placeholder, AvatarPlaceholder } from './placeholder';
39
40
  export { RowList, Row, BoxedRowList, BoxedRow } from './list';
@@ -55,6 +56,7 @@ export { default as Callout } from './callout';
55
56
  export { useModalState } from './modal-context-provider';
56
57
  export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
57
58
  export { default as Image } from './image';
59
+ export { default as Video } from './video';
58
60
  export { default as Form } from './form';
59
61
  export { default as Select } from './select';
60
62
  export { default as TextField } from './text-field';
package/dist/index.js CHANGED
@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
566
566
  return _image.default;
567
567
  }
568
568
  });
569
+ Object.defineProperty(exports, "Video", {
570
+ enumerable: true,
571
+ get: function() {
572
+ return _video.default;
573
+ }
574
+ });
569
575
  Object.defineProperty(exports, "Form", {
570
576
  enumerable: true,
571
577
  get: function() {
@@ -8298,6 +8304,7 @@ var _callout = _interopRequireDefault(require("./callout"));
8298
8304
  var _modalContextProvider = require("./modal-context-provider");
8299
8305
  var _navigationBar = require("./navigation-bar");
8300
8306
  var _image = _interopRequireDefault(require("./image"));
8307
+ var _video = _interopRequireDefault(require("./video"));
8301
8308
  var _form = _interopRequireDefault(require("./form"));
8302
8309
  var _select = _interopRequireDefault(require("./select"));
8303
8310
  var _textField = _interopRequireDefault(require("./text-field"));
@@ -70,6 +70,7 @@ declare export {
70
70
  Text10,
71
71
  } from "./text";
72
72
  declare export { default as Tag } from "./tag";
73
+ export type { TagType } from "./tag";
73
74
  declare export { default as SectionTitle } from "./section-title";
74
75
  declare export { Placeholder, AvatarPlaceholder } from "./placeholder";
75
76
  declare export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
@@ -98,6 +99,7 @@ declare export {
98
99
  NavigationBarLogo,
99
100
  } from "./navigation-bar";
100
101
  declare export { default as Image } from "./image";
102
+ declare export { default as Video } from "./video";
101
103
  declare export { default as Form } from "./form";
102
104
  declare export { default as Select } from "./select";
103
105
  declare export { default as TextField } from "./text-field";
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
5
  exports.PACKAGE_VERSION = void 0;
6
- var PACKAGE_VERSION = '10.17.0';
6
+ var PACKAGE_VERSION = '10.21.0';
7
7
  exports.PACKAGE_VERSION = PACKAGE_VERSION;
@@ -1,10 +1,8 @@
1
1
  import * as React from 'react';
2
- import TextLink from './text-link';
3
- import type { TextLinkProps } from './text-link';
4
2
  declare type Props = {
5
3
  children: React.ReactNode;
6
4
  id?: string;
7
- right?: React.ReactElement<TextLinkProps, typeof TextLink>;
5
+ right?: React.ReactNode;
8
6
  as?: 'h1' | 'h2' | 'h3' | 'h4';
9
7
  };
10
8
  declare const SectionTitle: React.FC<Props>;
@@ -1,11 +1,10 @@
1
1
  // @flow
2
2
 
3
3
  import * as React from "react";
4
- import TextLink from "./text-link";
5
4
  declare type Props = {
6
5
  children: React.Node,
7
6
  id?: string,
8
- right?: React.Element<typeof TextLink>,
7
+ right?: React.Node,
9
8
  as?: "h1" | "h2" | "h3" | "h4",
10
9
  };
11
10
  declare var SectionTitle: React.ComponentType<Props>;
@@ -14,16 +14,19 @@ export declare const palette: {
14
14
  readonly blauPurple30: "#BB89D9";
15
15
  readonly blauYellow: "#FFA922";
16
16
  readonly blauYellow10: "#FFF6E9";
17
+ readonly blauYellow40: "#FFC364";
17
18
  readonly blauYellow60: "#F09500";
18
19
  readonly blauYellow70: "#996614";
20
+ readonly blauGreen: "#30D300";
21
+ readonly blauGreen10: "#EAFBE5";
22
+ readonly blauGreen30: "#97E980";
23
+ readonly blauGreen70: "#1D7F00";
19
24
  readonly blauRed: "#F64417";
20
25
  readonly blauRed10: "#FEECE8";
21
26
  readonly blauRed20: "#FCC7B9";
22
27
  readonly blauRed30: "#FA9E87";
28
+ readonly blauRed40: "#F97C5D";
23
29
  readonly blauRed70: "#C93712";
24
- readonly blauGreen: "#30D300";
25
- readonly blauGreen10: "#EAFBE5";
26
- readonly blauGreen70: "#1D7F00";
27
30
  readonly grey1: "#F5F9FA";
28
31
  readonly grey2: "#E7E7E7";
29
32
  readonly grey3: "#B8B8B8";
@@ -20,16 +20,19 @@ var palette = {
20
20
  blauPurple30: '#BB89D9',
21
21
  blauYellow: '#FFA922',
22
22
  blauYellow10: '#FFF6E9',
23
+ blauYellow40: '#FFC364',
23
24
  blauYellow60: '#F09500',
24
25
  blauYellow70: '#996614',
26
+ blauGreen: '#30D300',
27
+ blauGreen10: '#EAFBE5',
28
+ blauGreen30: '#97E980',
29
+ blauGreen70: '#1D7F00',
25
30
  blauRed: '#F64417',
26
31
  blauRed10: '#FEECE8',
27
32
  blauRed20: '#FCC7B9',
28
33
  blauRed30: '#FA9E87',
34
+ blauRed40: '#F97C5D',
29
35
  blauRed70: '#C93712',
30
- blauGreen: '#30D300',
31
- blauGreen10: '#EAFBE5',
32
- blauGreen70: '#1D7F00',
33
36
  grey1: '#F5F9FA',
34
37
  grey2: '#E7E7E7',
35
38
  grey3: '#B8B8B8',
@@ -132,7 +135,20 @@ var getBlauSkin = function getBlauSkin() {
132
135
  textNavigationSearchBarHint: palette.blauBlueSecondary20,
133
136
  textNavigationSearchBarText: palette.white,
134
137
  textAppBar: palette.grey5,
135
- textAppBarSelected: palette.blauBlueSecondary60
138
+ textAppBarSelected: palette.blauBlueSecondary60,
139
+ // TAGS
140
+ tagBackgroundSuccess: palette.blauGreen10,
141
+ tagBackgroundWarning: palette.blauYellow10,
142
+ tagBackgroundError: palette.blauRed10,
143
+ tagBackgroundPromo: palette.blauPurple10,
144
+ tagBackgroundActive: palette.blauBlueSecondary10,
145
+ tagBackgroundInactive: palette.grey2,
146
+ textTagSuccess: palette.blauGreen70,
147
+ textTagWarning: palette.blauYellow70,
148
+ textTagError: palette.blauRed70,
149
+ textTagPromo: palette.blauPurple,
150
+ textTagActive: palette.blauBlueSecondary,
151
+ textTagInactive: palette.grey5
136
152
  },
137
153
  darkModeColors: {
138
154
  // BACKGROUNDS
@@ -194,7 +210,20 @@ var getBlauSkin = function getBlauSkin() {
194
210
  textNavigationSearchBarHint: palette.grey4,
195
211
  textNavigationSearchBarText: palette.grey2,
196
212
  textAppBar: palette.grey5,
197
- textAppBarSelected: palette.grey2
213
+ textAppBarSelected: palette.grey2,
214
+ // TAGS
215
+ tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
216
+ tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
217
+ tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
218
+ tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
219
+ tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
220
+ tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
221
+ textTagSuccess: palette.blauGreen30,
222
+ textTagWarning: palette.blauYellow40,
223
+ textTagError: palette.blauRed40,
224
+ textTagPromo: palette.blauPurple30,
225
+ textTagActive: palette.blauBluePrimary30,
226
+ textTagInactive: palette.grey4
198
227
  }
199
228
  };
200
229
  };
@@ -16,16 +16,19 @@ declare export var palette: {
16
16
  +blauPurple30: "#BB89D9",
17
17
  +blauYellow: "#FFA922",
18
18
  +blauYellow10: "#FFF6E9",
19
+ +blauYellow40: "#FFC364",
19
20
  +blauYellow60: "#F09500",
20
21
  +blauYellow70: "#996614",
22
+ +blauGreen: "#30D300",
23
+ +blauGreen10: "#EAFBE5",
24
+ +blauGreen30: "#97E980",
25
+ +blauGreen70: "#1D7F00",
21
26
  +blauRed: "#F64417",
22
27
  +blauRed10: "#FEECE8",
23
28
  +blauRed20: "#FCC7B9",
24
29
  +blauRed30: "#FA9E87",
30
+ +blauRed40: "#F97C5D",
25
31
  +blauRed70: "#C93712",
26
- +blauGreen: "#30D300",
27
- +blauGreen10: "#EAFBE5",
28
- +blauGreen70: "#1D7F00",
29
32
  +grey1: "#F5F9FA",
30
33
  +grey2: "#E7E7E7",
31
34
  +grey3: "#B8B8B8",
@@ -1,21 +1,32 @@
1
1
  import type { GetSkin } from './types';
2
2
  export declare const palette: {
3
3
  readonly movistarBlue: "#019DF4";
4
- readonly movistarBlueDark: "#008EDD";
5
- readonly movistarBlueLight50: "#80CEF9";
6
- readonly movistarBlueLight30: "#B3E1FB";
7
- readonly movistarBlueLight10: "#E6F5FD";
4
+ readonly movistarBlue10: "#E6F5FD";
5
+ readonly movistarBlue20: "#B3E1FB";
6
+ readonly movistarBlue30: "#80CEF9";
7
+ readonly movistarBlue40: "#4DBAF7";
8
+ readonly movistarBlue55: "#008EDD";
8
9
  readonly movistarGreen: "#5CB615";
9
- readonly movistarGreenDark: "#499110";
10
- readonly movistarGreenLight50: "#ADDA8A";
11
- readonly movistarGreenLight30: "#CEE9B9";
10
+ readonly movistarGreen10: "#EFF8E8";
11
+ readonly movistarGreen30: "#ADDA8A";
12
+ readonly movistarGreen40: "#8DCC5B";
13
+ readonly movistarGreen60: "#499110";
14
+ readonly movistarGreen70: "#407F0F";
12
15
  readonly pepper: "#FF374A";
13
- readonly pepperDark: "#D73241";
14
- readonly pepperLight30: "#FFC3C8";
16
+ readonly pepper10: "#FFEBED";
17
+ readonly pepper20: "#FFC3C8";
18
+ readonly pepper40: "#FF7380";
19
+ readonly pepper55: "#D73241";
20
+ readonly pepper70: "#B22634";
15
21
  readonly egg: "#F28D15";
16
- readonly eggLight: "#F8D2B3";
22
+ readonly egg10: "#FEF4E8";
23
+ readonly egg40: "#F6AF5B";
24
+ readonly egg80: "#6D3F09";
17
25
  readonly pink: "#E63780";
18
26
  readonly purple: "#A13EA1";
27
+ readonly purple10: "#F6ECF6";
28
+ readonly purple40: "#BD78BD";
29
+ readonly purple70: "#712B71";
19
30
  readonly grey1: "#F6F6F6";
20
31
  readonly grey2: "#EEEEEE";
21
32
  readonly grey3: "#DDDDDD";
@@ -30,6 +41,5 @@ export declare const palette: {
30
41
  readonly movistarProminentBlueLight70: "#546874";
31
42
  readonly darkModeBlack: "#191919";
32
43
  readonly darkModeGrey: "#242424";
33
- readonly darkModeMovistarBlueDark: "#4C7389";
34
44
  };
35
45
  export declare const getMovistarSkin: GetSkin;
@@ -7,21 +7,32 @@ var _color = require("../utils/color");
7
7
  var _constants = require("./constants");
8
8
  var palette = {
9
9
  movistarBlue: '#019DF4',
10
- movistarBlueDark: '#008EDD',
11
- movistarBlueLight50: '#80CEF9',
12
- movistarBlueLight30: '#B3E1FB',
13
- movistarBlueLight10: '#E6F5FD',
10
+ movistarBlue10: '#E6F5FD',
11
+ movistarBlue20: '#B3E1FB',
12
+ movistarBlue30: '#80CEF9',
13
+ movistarBlue40: '#4DBAF7',
14
+ movistarBlue55: '#008EDD',
14
15
  movistarGreen: '#5CB615',
15
- movistarGreenDark: '#499110',
16
- movistarGreenLight50: '#ADDA8A',
17
- movistarGreenLight30: '#CEE9B9',
16
+ movistarGreen10: '#EFF8E8',
17
+ movistarGreen30: '#ADDA8A',
18
+ movistarGreen40: '#8DCC5B',
19
+ movistarGreen60: '#499110',
20
+ movistarGreen70: '#407F0F',
18
21
  pepper: '#FF374A',
19
- pepperDark: '#D73241',
20
- pepperLight30: '#FFC3C8',
22
+ pepper10: '#FFEBED',
23
+ pepper20: '#FFC3C8',
24
+ pepper40: '#FF7380',
25
+ pepper55: '#D73241',
26
+ pepper70: '#B22634',
21
27
  egg: '#F28D15',
22
- eggLight: '#F8D2B3',
28
+ egg10: '#FEF4E8',
29
+ egg40: '#F6AF5B',
30
+ egg80: '#6D3F09',
23
31
  pink: '#E63780',
24
32
  purple: '#A13EA1',
33
+ purple10: '#F6ECF6',
34
+ purple40: '#BD78BD',
35
+ purple70: '#712B71',
25
36
  grey1: '#F6F6F6',
26
37
  grey2: '#EEEEEE',
27
38
  grey3: '#DDDDDD',
@@ -36,8 +47,7 @@ var palette = {
36
47
  movistarProminentBlueLight70: '#546874',
37
48
  // specific for dark mode:
38
49
  darkModeBlack: '#191919',
39
- darkModeGrey: '#242424',
40
- darkModeMovistarBlueDark: '#4C7389'
50
+ darkModeGrey: '#242424'
41
51
  };
42
52
  exports.palette = palette;
43
53
  var getMovistarSkin = function getMovistarSkin(variant) {
@@ -51,7 +61,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
51
61
  backgroundBrand: palette.movistarBlue,
52
62
  backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
53
63
  backgroundSkeleton: palette.grey1,
54
- backgroundSkeletonInverse: palette.movistarBlueDark,
64
+ backgroundSkeletonInverse: palette.movistarBlue55,
55
65
  navigationBarBackground: palette.movistarBlue,
56
66
  backgroundAlternative: palette.grey1,
57
67
  backgroundFeedbackBottom: palette.movistarBlue,
@@ -63,50 +73,50 @@ var getMovistarSkin = function getMovistarSkin(variant) {
63
73
  borderSelected: palette.movistarGreen,
64
74
  // BUTTONS
65
75
  buttonDangerBackground: palette.pepper,
66
- buttonDangerBackgroundSelected: palette.pepperDark,
67
- buttonDangerBackgroundHover: palette.pepperDark,
68
- buttonLinkBackgroundSelected: palette.movistarBlueLight10,
76
+ buttonDangerBackgroundSelected: palette.pepper55,
77
+ buttonDangerBackgroundHover: palette.pepper55,
78
+ buttonLinkBackgroundSelected: palette.movistarBlue10,
69
79
  buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
70
80
  buttonPrimaryBackground: palette.movistarGreen,
71
81
  buttonPrimaryBackgroundInverse: palette.white,
72
- buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
73
- buttonPrimaryBackgroundHover: palette.movistarGreenDark,
74
- buttonPrimaryBackgroundSelectedInverse: palette.movistarBlueLight50,
82
+ buttonPrimaryBackgroundSelected: palette.movistarGreen60,
83
+ buttonPrimaryBackgroundHover: palette.movistarGreen60,
84
+ buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue30,
75
85
  buttonSecondaryBackground: palette.movistarGreen,
76
- buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
86
+ buttonSecondaryBackgroundSelected: palette.movistarGreen60,
77
87
  buttonSecondaryBorderInverse: palette.white,
78
- buttonSecondaryBorderSelectedInverse: palette.movistarBlueLight50,
88
+ buttonSecondaryBorderSelectedInverse: palette.movistarBlue30,
79
89
  textButtonPrimary: palette.white,
80
90
  textButtonPrimaryInverse: palette.movistarBlue,
81
91
  textButtonPrimaryInverseSelected: palette.movistarBlue,
82
92
  textButtonSecondary: palette.movistarGreen,
83
- textButtonSecondarySelected: palette.movistarGreenDark,
93
+ textButtonSecondarySelected: palette.movistarGreen60,
84
94
  textButtonSecondaryInverse: palette.white,
85
95
  textButtonSecondaryInverseSelected: palette.white,
86
96
  textLink: palette.movistarBlue,
87
97
  textLinkInverse: palette.white,
88
98
  textLinkDanger: palette.pepper,
89
- textLinkSnackbar: palette.movistarBlueLight50,
99
+ textLinkSnackbar: palette.movistarBlue30,
90
100
  // CONTROLS
91
101
  control: palette.grey3,
92
102
  controlActivated: palette.movistarBlue,
93
103
  controlError: palette.pepper,
94
- loadingBar: palette.movistarBlueLight50,
95
- loadingBarBackground: palette.movistarBlueDark,
104
+ loadingBar: palette.movistarBlue30,
105
+ loadingBarBackground: palette.movistarBlue55,
96
106
  toggleAndroidInactive: palette.grey2,
97
- toggleAndroidBackgroundActive: palette.movistarBlueLight30,
107
+ toggleAndroidBackgroundActive: palette.movistarBlue20,
98
108
  iosControlKnob: palette.white,
99
109
  // DIVIDERS
100
110
  divider: palette.grey2,
101
- dividerInverse: palette.movistarBlueDark,
111
+ dividerInverse: palette.movistarBlue55,
102
112
  navigationBarDivider: palette.movistarBlue,
103
113
  // FEEDBACKS
104
- badge: palette.pepperDark,
114
+ badge: palette.pepper55,
105
115
  feedbackErrorBackground: palette.pepper,
106
116
  feedbackInfoBackground: palette.grey6,
107
117
  // GLOBAL
108
118
  brand: palette.movistarBlue,
109
- brandDark: palette.movistarBlueDark,
119
+ brandDark: palette.movistarBlue55,
110
120
  inverse: palette.white,
111
121
  neutralHigh: palette.grey6,
112
122
  neutralMedium: palette.grey5,
@@ -124,11 +134,24 @@ var getMovistarSkin = function getMovistarSkin(variant) {
124
134
  warning: palette.egg,
125
135
  // BARS TEXTS
126
136
  textNavigationBarPrimary: palette.white,
127
- textNavigationBarSecondary: palette.movistarBlueLight30,
128
- textNavigationSearchBarHint: palette.movistarBlueLight30,
137
+ textNavigationBarSecondary: palette.movistarBlue20,
138
+ textNavigationSearchBarHint: palette.movistarBlue20,
129
139
  textNavigationSearchBarText: palette.white,
130
140
  textAppBar: palette.grey4,
131
- textAppBarSelected: palette.movistarBlue
141
+ textAppBarSelected: palette.movistarBlue,
142
+ // TAGS
143
+ tagBackgroundSuccess: palette.movistarGreen10,
144
+ tagBackgroundWarning: palette.egg10,
145
+ tagBackgroundError: palette.pepper10,
146
+ tagBackgroundPromo: palette.purple10,
147
+ tagBackgroundActive: palette.movistarBlue10,
148
+ tagBackgroundInactive: palette.grey1,
149
+ textTagSuccess: palette.movistarGreen70,
150
+ textTagWarning: palette.egg80,
151
+ textTagError: palette.pepper70,
152
+ textTagPromo: palette.purple70,
153
+ textTagActive: palette.movistarBlue,
154
+ textTagInactive: palette.grey5
132
155
  },
133
156
  darkModeColors: {
134
157
  brand: palette.movistarBlue,
@@ -149,13 +172,13 @@ var getMovistarSkin = function getMovistarSkin(variant) {
149
172
  buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.05),
150
173
  buttonPrimaryBackground: palette.movistarGreen,
151
174
  buttonPrimaryBackgroundInverse: palette.movistarGreen,
152
- buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
153
- buttonPrimaryBackgroundHover: palette.movistarGreenDark,
154
- buttonPrimaryBackgroundSelectedInverse: palette.movistarGreenDark,
175
+ buttonPrimaryBackgroundSelected: palette.movistarGreen60,
176
+ buttonPrimaryBackgroundHover: palette.movistarGreen60,
177
+ buttonPrimaryBackgroundSelectedInverse: palette.movistarGreen60,
155
178
  buttonSecondaryBackground: palette.movistarGreen,
156
- buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
179
+ buttonSecondaryBackgroundSelected: palette.movistarGreen60,
157
180
  buttonSecondaryBorderInverse: palette.movistarGreen,
158
- buttonSecondaryBorderSelectedInverse: palette.movistarGreenDark,
181
+ buttonSecondaryBorderSelectedInverse: palette.movistarGreen60,
159
182
  textButtonPrimary: palette.grey2,
160
183
  textButtonPrimaryInverse: palette.grey2,
161
184
  textButtonPrimaryInverseSelected: palette.grey2,
@@ -170,7 +193,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
170
193
  loadingBar: palette.movistarBlue,
171
194
  loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
172
195
  toggleAndroidInactive: palette.grey4,
173
- toggleAndroidBackgroundActive: palette.movistarBlueLight30,
196
+ toggleAndroidBackgroundActive: palette.movistarBlue20,
174
197
  iosControlKnob: palette.grey2,
175
198
  divider: (0, _color).applyAlpha(palette.white, 0.05),
176
199
  dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),
@@ -184,13 +207,26 @@ var getMovistarSkin = function getMovistarSkin(variant) {
184
207
  textPrimaryInverse: palette.grey2,
185
208
  textSecondary: palette.grey4,
186
209
  textSecondaryInverse: palette.grey4,
187
- textAmount: palette.movistarBlueLight50,
210
+ textAmount: palette.movistarBlue30,
188
211
  textNavigationBarPrimary: palette.grey2,
189
212
  textNavigationBarSecondary: palette.grey4,
190
213
  textNavigationSearchBarHint: palette.grey4,
191
214
  textNavigationSearchBarText: palette.grey2,
192
215
  textAppBar: palette.grey5,
193
- textAppBarSelected: palette.grey2
216
+ textAppBarSelected: palette.grey2,
217
+ // TAGS
218
+ tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
219
+ tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
220
+ tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
221
+ tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
222
+ tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
223
+ tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
224
+ textTagSuccess: palette.movistarGreen40,
225
+ textTagWarning: palette.egg40,
226
+ textTagError: palette.pepper40,
227
+ textTagPromo: palette.purple40,
228
+ textTagActive: palette.movistarBlue40,
229
+ textTagInactive: palette.grey4
194
230
  }
195
231
  };
196
232
  if (variant === 'prominent') {
@@ -3,21 +3,32 @@
3
3
  import type { GetSkin } from "./types";
4
4
  declare export var palette: {
5
5
  +movistarBlue: "#019DF4",
6
- +movistarBlueDark: "#008EDD",
7
- +movistarBlueLight50: "#80CEF9",
8
- +movistarBlueLight30: "#B3E1FB",
9
- +movistarBlueLight10: "#E6F5FD",
6
+ +movistarBlue10: "#E6F5FD",
7
+ +movistarBlue20: "#B3E1FB",
8
+ +movistarBlue30: "#80CEF9",
9
+ +movistarBlue40: "#4DBAF7",
10
+ +movistarBlue55: "#008EDD",
10
11
  +movistarGreen: "#5CB615",
11
- +movistarGreenDark: "#499110",
12
- +movistarGreenLight50: "#ADDA8A",
13
- +movistarGreenLight30: "#CEE9B9",
12
+ +movistarGreen10: "#EFF8E8",
13
+ +movistarGreen30: "#ADDA8A",
14
+ +movistarGreen40: "#8DCC5B",
15
+ +movistarGreen60: "#499110",
16
+ +movistarGreen70: "#407F0F",
14
17
  +pepper: "#FF374A",
15
- +pepperDark: "#D73241",
16
- +pepperLight30: "#FFC3C8",
18
+ +pepper10: "#FFEBED",
19
+ +pepper20: "#FFC3C8",
20
+ +pepper40: "#FF7380",
21
+ +pepper55: "#D73241",
22
+ +pepper70: "#B22634",
17
23
  +egg: "#F28D15",
18
- +eggLight: "#F8D2B3",
24
+ +egg10: "#FEF4E8",
25
+ +egg40: "#F6AF5B",
26
+ +egg80: "#6D3F09",
19
27
  +pink: "#E63780",
20
28
  +purple: "#A13EA1",
29
+ +purple10: "#F6ECF6",
30
+ +purple40: "#BD78BD",
31
+ +purple70: "#712B71",
21
32
  +grey1: "#F6F6F6",
22
33
  +grey2: "#EEEEEE",
23
34
  +grey3: "#DDDDDD",
@@ -32,6 +43,5 @@ declare export var palette: {
32
43
  +movistarProminentBlueLight70: "#546874",
33
44
  +darkModeBlack: "#191919",
34
45
  +darkModeGrey: "#242424",
35
- +darkModeMovistarBlueDark: "#4C7389",
36
46
  };
37
47
  declare export var getMovistarSkin: GetSkin;
@@ -1,13 +1,15 @@
1
1
  import type { GetSkin } from './types';
2
2
  export declare const palette: {
3
3
  readonly o2Blue: "#032B5A";
4
- readonly o2BlueDark: "#04264E";
5
- readonly o2BlueLight60: "#6C8BAF";
4
+ readonly o2Blue10: "#E6EAEE";
5
+ readonly o2Blue30: "#8195AC";
6
+ readonly o2Blue45: "#6C8BAF";
7
+ readonly o2Blue55: "#04264E";
6
8
  readonly o2SkyBlue: "#0090D0";
7
- readonly o2SkyBlueDark: "#057DB2";
9
+ readonly o2SkyBlue55: "#057DB2";
8
10
  readonly o2SkyBlueLight: "#65B4E4";
9
- readonly o2SkyBlueLight50: "#80C7E7";
10
- readonly o2SkyBlueLight30: "#D0E8F6";
11
+ readonly o2SkyBlueLight45: "#80C7E7";
12
+ readonly o2SkyBlueLight20: "#D0E8F6";
11
13
  readonly o2SkyBlueLight10: "#E9F5FB";
12
14
  readonly o2DeepSkyBlue: "#7FD4FE";
13
15
  readonly o2Gem: "#01B7B4";
@@ -15,14 +17,24 @@ export declare const palette: {
15
17
  readonly o2GemLight30: "#99E2E1";
16
18
  readonly o2Yellow: "#FFCC00";
17
19
  readonly o2Green: "#84B50F";
18
- readonly o2GreenLight: "#DAE8B7";
20
+ readonly o2Green10: "#F3F8E7";
21
+ readonly o2Green40: "#A9CB57";
22
+ readonly o2Green75: "#4D621D";
19
23
  readonly pepper: "#FF374A";
20
- readonly pepperDark: "#D73241";
21
- readonly pepperLight30: "#FFC3C8";
24
+ readonly pepper10: "#FFEBED";
25
+ readonly pepper20: "#FFC3C8";
26
+ readonly pepper40: "#FF7380";
27
+ readonly pepper55: "#D73241";
28
+ readonly pepper70: "#B22634";
22
29
  readonly orange: "#FF7F41";
23
- readonly orangeLight: "#FFD6C2";
30
+ readonly orange10: "#FFF2EC";
31
+ readonly orange40: "#FFA57A";
32
+ readonly orange80: "#73391D";
24
33
  readonly coral: "#FF706E";
25
34
  readonly pink: "#EB3C7D";
35
+ readonly pink10: "#FDEBF2";
36
+ readonly pink40: "#F59DBE";
37
+ readonly pink60: "#BC3064";
26
38
  readonly o2GradientFirst: "#102550";
27
39
  readonly o2GradientSecond: "#0B4680";
28
40
  readonly o2GradientThird: "#0D71AD";