@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.
- package/CHANGELOG.md +36 -0
- package/dist/button-layout.js +28 -17
- package/dist/button.js +24 -8
- package/dist/card.d.ts +10 -1
- package/dist/card.js +29 -29
- package/dist/card.js.flow +16 -1
- package/dist/header.d.ts +2 -0
- package/dist/header.js.flow +5 -0
- package/dist/icons/icon-success.js +14 -6
- package/dist/image.d.ts +25 -4
- package/dist/image.js +67 -9
- package/dist/image.js.flow +33 -4
- package/dist/index.d.ts +2 -0
- package/dist/index.js +7 -0
- package/dist/index.js.flow +2 -0
- package/dist/package-version.js +1 -1
- package/dist/section-title.d.ts +1 -3
- package/dist/section-title.js.flow +1 -2
- package/dist/skins/blau.d.ts +6 -3
- package/dist/skins/blau.js +34 -5
- package/dist/skins/blau.js.flow +6 -3
- package/dist/skins/movistar.d.ts +21 -11
- package/dist/skins/movistar.js +76 -40
- package/dist/skins/movistar.js.flow +21 -11
- package/dist/skins/o2-classic.d.ts +21 -9
- package/dist/skins/o2-classic.js +64 -26
- package/dist/skins/o2-classic.js.flow +21 -9
- package/dist/skins/o2.d.ts +19 -17
- package/dist/skins/o2.js +68 -40
- package/dist/skins/o2.js.flow +19 -17
- package/dist/skins/telefonica.d.ts +18 -13
- package/dist/skins/telefonica.js +76 -45
- package/dist/skins/telefonica.js.flow +18 -13
- package/dist/skins/types.d.ts +12 -0
- package/dist/skins/types.js.flow +12 -0
- package/dist/skins/vivo.d.ts +9 -4
- package/dist/skins/vivo.js +37 -6
- package/dist/skins/vivo.js.flow +9 -4
- package/dist/tag.d.ts +6 -1
- package/dist/tag.js +133 -24
- package/dist/tag.js.flow +15 -1
- package/dist/text.d.ts +4 -0
- package/dist/text.js +13 -6
- package/dist/text.js.flow +10 -0
- package/dist/theme-context-provider.js +8 -2
- package/dist/theme.d.ts +2 -0
- package/dist/theme.js.flow +2 -0
- package/dist/touchable.js +3 -2
- package/dist/video.d.ts +32 -0
- package/dist/video.js +161 -0
- package/dist/video.js.flow +50 -0
- package/dist-es/button-layout.js +28 -17
- package/dist-es/button.js +24 -8
- package/dist-es/card.js +30 -30
- package/dist-es/icons/icon-success.js +14 -6
- package/dist-es/image.js +41 -8
- package/dist-es/index.js +1 -0
- package/dist-es/package-version.js +1 -1
- package/dist-es/skins/blau.js +36 -5
- package/dist-es/skins/movistar.js +78 -40
- package/dist-es/skins/o2-classic.js +66 -26
- package/dist-es/skins/o2.js +70 -40
- package/dist-es/skins/telefonica.js +78 -45
- package/dist-es/skins/vivo.js +39 -6
- package/dist-es/tag.js +130 -26
- package/dist-es/text.js +13 -6
- package/dist-es/theme-context-provider.js +8 -2
- package/dist-es/touchable.js +3 -2
- package/dist-es/video.js +123 -0
- 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"));
|
package/dist/index.js.flow
CHANGED
|
@@ -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";
|
package/dist/package-version.js
CHANGED
package/dist/section-title.d.ts
CHANGED
|
@@ -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.
|
|
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.
|
|
7
|
+
right?: React.Node,
|
|
9
8
|
as?: "h1" | "h2" | "h3" | "h4",
|
|
10
9
|
};
|
|
11
10
|
declare var SectionTitle: React.ComponentType<Props>;
|
package/dist/skins/blau.d.ts
CHANGED
|
@@ -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";
|
package/dist/skins/blau.js
CHANGED
|
@@ -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
|
};
|
package/dist/skins/blau.js.flow
CHANGED
|
@@ -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",
|
package/dist/skins/movistar.d.ts
CHANGED
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
import type { GetSkin } from './types';
|
|
2
2
|
export declare const palette: {
|
|
3
3
|
readonly movistarBlue: "#019DF4";
|
|
4
|
-
readonly
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
7
|
-
readonly
|
|
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
|
|
10
|
-
readonly
|
|
11
|
-
readonly
|
|
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
|
|
14
|
-
readonly
|
|
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
|
|
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;
|
package/dist/skins/movistar.js
CHANGED
|
@@ -7,21 +7,32 @@ var _color = require("../utils/color");
|
|
|
7
7
|
var _constants = require("./constants");
|
|
8
8
|
var palette = {
|
|
9
9
|
movistarBlue: '#019DF4',
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
movistarBlue10: '#E6F5FD',
|
|
11
|
+
movistarBlue20: '#B3E1FB',
|
|
12
|
+
movistarBlue30: '#80CEF9',
|
|
13
|
+
movistarBlue40: '#4DBAF7',
|
|
14
|
+
movistarBlue55: '#008EDD',
|
|
14
15
|
movistarGreen: '#5CB615',
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
movistarGreen10: '#EFF8E8',
|
|
17
|
+
movistarGreen30: '#ADDA8A',
|
|
18
|
+
movistarGreen40: '#8DCC5B',
|
|
19
|
+
movistarGreen60: '#499110',
|
|
20
|
+
movistarGreen70: '#407F0F',
|
|
18
21
|
pepper: '#FF374A',
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
pepper10: '#FFEBED',
|
|
23
|
+
pepper20: '#FFC3C8',
|
|
24
|
+
pepper40: '#FF7380',
|
|
25
|
+
pepper55: '#D73241',
|
|
26
|
+
pepper70: '#B22634',
|
|
21
27
|
egg: '#F28D15',
|
|
22
|
-
|
|
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.
|
|
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.
|
|
67
|
-
buttonDangerBackgroundHover: palette.
|
|
68
|
-
buttonLinkBackgroundSelected: palette.
|
|
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.
|
|
73
|
-
buttonPrimaryBackgroundHover: palette.
|
|
74
|
-
buttonPrimaryBackgroundSelectedInverse: palette.
|
|
82
|
+
buttonPrimaryBackgroundSelected: palette.movistarGreen60,
|
|
83
|
+
buttonPrimaryBackgroundHover: palette.movistarGreen60,
|
|
84
|
+
buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue30,
|
|
75
85
|
buttonSecondaryBackground: palette.movistarGreen,
|
|
76
|
-
buttonSecondaryBackgroundSelected: palette.
|
|
86
|
+
buttonSecondaryBackgroundSelected: palette.movistarGreen60,
|
|
77
87
|
buttonSecondaryBorderInverse: palette.white,
|
|
78
|
-
buttonSecondaryBorderSelectedInverse: palette.
|
|
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.
|
|
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.
|
|
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.
|
|
95
|
-
loadingBarBackground: palette.
|
|
104
|
+
loadingBar: palette.movistarBlue30,
|
|
105
|
+
loadingBarBackground: palette.movistarBlue55,
|
|
96
106
|
toggleAndroidInactive: palette.grey2,
|
|
97
|
-
toggleAndroidBackgroundActive: palette.
|
|
107
|
+
toggleAndroidBackgroundActive: palette.movistarBlue20,
|
|
98
108
|
iosControlKnob: palette.white,
|
|
99
109
|
// DIVIDERS
|
|
100
110
|
divider: palette.grey2,
|
|
101
|
-
dividerInverse: palette.
|
|
111
|
+
dividerInverse: palette.movistarBlue55,
|
|
102
112
|
navigationBarDivider: palette.movistarBlue,
|
|
103
113
|
// FEEDBACKS
|
|
104
|
-
badge: palette.
|
|
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.
|
|
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.
|
|
128
|
-
textNavigationSearchBarHint: palette.
|
|
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.
|
|
153
|
-
buttonPrimaryBackgroundHover: palette.
|
|
154
|
-
buttonPrimaryBackgroundSelectedInverse: palette.
|
|
175
|
+
buttonPrimaryBackgroundSelected: palette.movistarGreen60,
|
|
176
|
+
buttonPrimaryBackgroundHover: palette.movistarGreen60,
|
|
177
|
+
buttonPrimaryBackgroundSelectedInverse: palette.movistarGreen60,
|
|
155
178
|
buttonSecondaryBackground: palette.movistarGreen,
|
|
156
|
-
buttonSecondaryBackgroundSelected: palette.
|
|
179
|
+
buttonSecondaryBackgroundSelected: palette.movistarGreen60,
|
|
157
180
|
buttonSecondaryBorderInverse: palette.movistarGreen,
|
|
158
|
-
buttonSecondaryBorderSelectedInverse: palette.
|
|
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.
|
|
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.
|
|
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
|
-
+
|
|
7
|
-
+
|
|
8
|
-
+
|
|
9
|
-
+
|
|
6
|
+
+movistarBlue10: "#E6F5FD",
|
|
7
|
+
+movistarBlue20: "#B3E1FB",
|
|
8
|
+
+movistarBlue30: "#80CEF9",
|
|
9
|
+
+movistarBlue40: "#4DBAF7",
|
|
10
|
+
+movistarBlue55: "#008EDD",
|
|
10
11
|
+movistarGreen: "#5CB615",
|
|
11
|
-
+
|
|
12
|
-
+
|
|
13
|
-
+
|
|
12
|
+
+movistarGreen10: "#EFF8E8",
|
|
13
|
+
+movistarGreen30: "#ADDA8A",
|
|
14
|
+
+movistarGreen40: "#8DCC5B",
|
|
15
|
+
+movistarGreen60: "#499110",
|
|
16
|
+
+movistarGreen70: "#407F0F",
|
|
14
17
|
+pepper: "#FF374A",
|
|
15
|
-
+
|
|
16
|
-
+
|
|
18
|
+
+pepper10: "#FFEBED",
|
|
19
|
+
+pepper20: "#FFC3C8",
|
|
20
|
+
+pepper40: "#FF7380",
|
|
21
|
+
+pepper55: "#D73241",
|
|
22
|
+
+pepper70: "#B22634",
|
|
17
23
|
+egg: "#F28D15",
|
|
18
|
-
+
|
|
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
|
|
5
|
-
readonly
|
|
4
|
+
readonly o2Blue10: "#E6EAEE";
|
|
5
|
+
readonly o2Blue30: "#8195AC";
|
|
6
|
+
readonly o2Blue45: "#6C8BAF";
|
|
7
|
+
readonly o2Blue55: "#04264E";
|
|
6
8
|
readonly o2SkyBlue: "#0090D0";
|
|
7
|
-
readonly
|
|
9
|
+
readonly o2SkyBlue55: "#057DB2";
|
|
8
10
|
readonly o2SkyBlueLight: "#65B4E4";
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
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
|
|
20
|
+
readonly o2Green10: "#F3F8E7";
|
|
21
|
+
readonly o2Green40: "#A9CB57";
|
|
22
|
+
readonly o2Green75: "#4D621D";
|
|
19
23
|
readonly pepper: "#FF374A";
|
|
20
|
-
readonly
|
|
21
|
-
readonly
|
|
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
|
|
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";
|