@wireapp/react-ui-kit 8.0.1 → 8.1.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 +11 -0
- package/package.json +2 -2
- package/src/Identity/colors-v2.d.js +2 -0
- package/src/Identity/colors-v2.d.js.map +1 -0
- package/src/Identity/colors-v2.d.ts +3 -0
- package/src/Identity/colors-v2.js +221 -0
- package/src/Identity/colors-v2.js.map +1 -0
- package/src/Identity/colors-v2.md +111 -0
- package/src/Layout/headerMenu/MenuOpenButton.js +3 -3
- package/src/Layout/headerMenu/MenuOpenButton.js.map +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [8.1.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.0.1...@wireapp/react-ui-kit@8.1.0) (2022-05-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **react-ui-kit:** Add new colours ([#4266](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4266)) ([2771089](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/2771089411dd54be4dc883857a5bbb4b309f7466))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [8.0.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.0.0...@wireapp/react-ui-kit@8.0.1) (2022-05-18)
|
|
7
18
|
|
|
8
19
|
|
package/package.json
CHANGED
|
@@ -67,6 +67,6 @@
|
|
|
67
67
|
"test:update": "yarn test --updateSnapshot",
|
|
68
68
|
"test:project": "yarn dist && yarn test"
|
|
69
69
|
},
|
|
70
|
-
"version": "8.0
|
|
71
|
-
"gitHead": "
|
|
70
|
+
"version": "8.1.0",
|
|
71
|
+
"gitHead": "e6c73564a2d4d848a5796a92a74e37720791be27"
|
|
72
72
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"colors-v2.d.js"}
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.COLOR = exports.BASE_DARK_COLOR = exports.BASE_LIGHT_COLOR = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
+
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
|
+
|
|
16
|
+
/*
|
|
17
|
+
* Wire
|
|
18
|
+
* Copyright (C) 2022 Wire Swiss GmbH
|
|
19
|
+
*
|
|
20
|
+
* This program is free software: you can redistribute it and/or modify
|
|
21
|
+
* it under the terms of the GNU General Public License as published by
|
|
22
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
23
|
+
* (at your option) any later version.
|
|
24
|
+
*
|
|
25
|
+
* This program is distributed in the hope that it will be useful,
|
|
26
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
27
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
28
|
+
* GNU General Public License for more details.
|
|
29
|
+
*
|
|
30
|
+
* You should have received a copy of the GNU General Public License
|
|
31
|
+
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
32
|
+
*
|
|
33
|
+
*/
|
|
34
|
+
var BASE_LIGHT_COLOR = {
|
|
35
|
+
BLUE: '#0667c8',
|
|
36
|
+
GREEN: '#1d7833',
|
|
37
|
+
PETROL: '#01718e',
|
|
38
|
+
PURPLE: '#8944ab',
|
|
39
|
+
RED: '#c20013',
|
|
40
|
+
AMBER: '#a25915'
|
|
41
|
+
};
|
|
42
|
+
exports.BASE_LIGHT_COLOR = BASE_LIGHT_COLOR;
|
|
43
|
+
var BASE_DARK_COLOR = {
|
|
44
|
+
BLUE: '#54a6ff',
|
|
45
|
+
GREEN: '#30db5b',
|
|
46
|
+
PETROL: '#5de6ff',
|
|
47
|
+
PURPLE: '#da8fff',
|
|
48
|
+
RED: '#ff7770',
|
|
49
|
+
AMBER: '#ffd426'
|
|
50
|
+
};
|
|
51
|
+
exports.BASE_DARK_COLOR = BASE_DARK_COLOR;
|
|
52
|
+
var LIGHT_BLUE = {
|
|
53
|
+
BLUE_LIGHT_50: '#e7f0fa',
|
|
54
|
+
BLUE_LIGHT_100: '#cde1f4',
|
|
55
|
+
BLUE_LIGHT_200: '#9bc2e9',
|
|
56
|
+
BLUE_LIGHT_300: '#6aa4de',
|
|
57
|
+
BLUE_LIGHT_400: '#3885d3',
|
|
58
|
+
BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,
|
|
59
|
+
BLUE_LIGHT_600: '#0552a0',
|
|
60
|
+
BLUE_LIGHT_700: '#043e78',
|
|
61
|
+
BLUE_LIGHT_800: '#022950',
|
|
62
|
+
BLUE_LIGHT_900: '#19324d'
|
|
63
|
+
};
|
|
64
|
+
var DARK_BLUE = {
|
|
65
|
+
BLUE_DARK_50: '#eef7ff',
|
|
66
|
+
BLUE_DARK_100: '#ddedff',
|
|
67
|
+
BLUE_DARK_200: '#bbdbff',
|
|
68
|
+
BLUE_DARK_300: '#98caff',
|
|
69
|
+
BLUE_DARK_400: '#76b8ff',
|
|
70
|
+
BLUE_DARK_500: BASE_DARK_COLOR.BLUE,
|
|
71
|
+
BLUE_DARK_600: '#4385cc',
|
|
72
|
+
BLUE_DARK_700: '#326499',
|
|
73
|
+
BLUE_DARK_800: '#224266',
|
|
74
|
+
BLUE_DARK_900: '#19324d'
|
|
75
|
+
};
|
|
76
|
+
var LIGHT_GREEN = {
|
|
77
|
+
GREEN_LIGHT_50: '#e8f1ea',
|
|
78
|
+
GREEN_LIGHT_100: '#d2e4d6',
|
|
79
|
+
GREEN_LIGHT_200: '#a5c9ad',
|
|
80
|
+
GREEN_LIGHT_300: '#77ae85',
|
|
81
|
+
GREEN_LIGHT_400: '#4a935c',
|
|
82
|
+
GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,
|
|
83
|
+
GREEN_LIGHT_600: '#176029',
|
|
84
|
+
GREEN_LIGHT_700: '#11481f',
|
|
85
|
+
GREEN_LIGHT_800: '#0c3014',
|
|
86
|
+
GREEN_LIGHT_900: '#0e421b'
|
|
87
|
+
};
|
|
88
|
+
var DARK_GREEN = {
|
|
89
|
+
GREEN_DARK_50: '#ebfcef',
|
|
90
|
+
GREEN_DARK_100: '#d6f8de',
|
|
91
|
+
GREEN_DARK_200: '#acf1bd',
|
|
92
|
+
GREEN_DARK_300: '#83e99d',
|
|
93
|
+
GREEN_DARK_400: '#59e27c',
|
|
94
|
+
GREEN_DARK_500: BASE_DARK_COLOR.GREEN,
|
|
95
|
+
GREEN_DARK_600: '#26af49',
|
|
96
|
+
GREEN_DARK_700: '#1d8337',
|
|
97
|
+
GREEN_DARK_800: '#135824',
|
|
98
|
+
GREEN_DARK_900: '#0e421b'
|
|
99
|
+
};
|
|
100
|
+
var LIGHT_PETROL = {
|
|
101
|
+
PETROL_LIGHT_50: '#e5f1f3',
|
|
102
|
+
PETROL_LIGHT_100: '#cce2e7',
|
|
103
|
+
PETROL_LIGHT_200: '#99c6d0',
|
|
104
|
+
PETROL_LIGHT_300: '#67a9b8',
|
|
105
|
+
PETROL_LIGHT_400: '#348da1',
|
|
106
|
+
PETROL_LIGHT_500: BASE_LIGHT_COLOR.PETROL,
|
|
107
|
+
PETROL_LIGHT_600: '#015a6e',
|
|
108
|
+
PETROL_LIGHT_700: '#014352',
|
|
109
|
+
PETROL_LIGHT_800: '#002d37',
|
|
110
|
+
PETROL_LIGHT_900: '#1c454d'
|
|
111
|
+
};
|
|
112
|
+
var DARK_PETROL = {
|
|
113
|
+
PETROL_DARK_50: '#effdff',
|
|
114
|
+
PETROL_DARK_100: '#dffaff',
|
|
115
|
+
PETROL_DARK_200: '#bef5ff',
|
|
116
|
+
PETROL_DARK_300: '#9ef0ff',
|
|
117
|
+
PETROL_DARK_400: '#7debff',
|
|
118
|
+
PETROL_DARK_500: BASE_DARK_COLOR.PETROL,
|
|
119
|
+
PETROL_DARK_600: '#4Ab8cc',
|
|
120
|
+
PETROL_DARK_700: '#388a99',
|
|
121
|
+
PETROL_DARK_800: '#255c66',
|
|
122
|
+
PETROL_DARK_900: '#1c454d'
|
|
123
|
+
};
|
|
124
|
+
var LIGHT_PURPLE = {
|
|
125
|
+
PURPLE_LIGHT_50: '#f4edf7',
|
|
126
|
+
PURPLE_LIGHT_100: '#e7daee',
|
|
127
|
+
PURPLE_LIGHT_200: '#d0b4dd',
|
|
128
|
+
PURPLE_LIGHT_300: '#b88fcd',
|
|
129
|
+
PURPLE_LIGHT_400: '#a169bc',
|
|
130
|
+
PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,
|
|
131
|
+
PURPLE_LIGHT_600: '#6e3689',
|
|
132
|
+
PURPLE_LIGHT_700: '#522967',
|
|
133
|
+
PURPLE_LIGHT_800: '#371b44',
|
|
134
|
+
PURPLE_LIGHT_900: '#412b4d'
|
|
135
|
+
};
|
|
136
|
+
var DARK_PURPLE = {
|
|
137
|
+
PURPLE_DARK_50: '#fcf4ff',
|
|
138
|
+
PURPLE_DARK_100: '#f8e9ff',
|
|
139
|
+
PURPLE_DARK_200: '#f0d2ff',
|
|
140
|
+
PURPLE_DARK_300: '#e9bcff',
|
|
141
|
+
PURPLE_DARK_400: '#e1a5ff',
|
|
142
|
+
PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,
|
|
143
|
+
PURPLE_DARK_600: '#ae72cc',
|
|
144
|
+
PURPLE_DARK_700: '#835699',
|
|
145
|
+
PURPLE_DARK_800: '#573966',
|
|
146
|
+
PURPLE_DARK_900: '#412b4d'
|
|
147
|
+
};
|
|
148
|
+
var LIGHT_RED = {
|
|
149
|
+
RED_LIGHT_50: '#f9e6e8',
|
|
150
|
+
RED_LIGHT_100: '#f3ccd0',
|
|
151
|
+
RED_LIGHT_200: '#e799a1',
|
|
152
|
+
RED_LIGHT_300: '#da6671',
|
|
153
|
+
RED_LIGHT_400: '#ce3342',
|
|
154
|
+
RED_LIGHT_500: BASE_LIGHT_COLOR.RED,
|
|
155
|
+
RED_LIGHT_600: '#9b000f',
|
|
156
|
+
RED_LIGHT_700: '#74000b',
|
|
157
|
+
RED_LIGHT_800: '#4e0008',
|
|
158
|
+
RED_LIGHT_900: '#4d2422'
|
|
159
|
+
};
|
|
160
|
+
var DARK_RED = {
|
|
161
|
+
RED_DARK_50: '#fff2f1',
|
|
162
|
+
RED_DARK_100: '#ffe4e2',
|
|
163
|
+
RED_DARK_200: '#ffc9c6',
|
|
164
|
+
RED_DARK_300: '#ffada9',
|
|
165
|
+
RED_DARK_400: '#ff928d',
|
|
166
|
+
RED_DARK_500: BASE_DARK_COLOR.RED,
|
|
167
|
+
RED_DARK_600: '#cc5f5a',
|
|
168
|
+
RED_DARK_700: '#994743',
|
|
169
|
+
RED_DARK_800: '#66302d',
|
|
170
|
+
RED_DARK_900: '#4d2422'
|
|
171
|
+
};
|
|
172
|
+
var LIGHT_AMBER = {
|
|
173
|
+
AMBER_LIGHT_50: '#f6eee8',
|
|
174
|
+
AMBER_LIGHT_100: '#ecded0',
|
|
175
|
+
AMBER_LIGHT_200: '#dabda1',
|
|
176
|
+
AMBER_LIGHT_300: '#c79b73',
|
|
177
|
+
AMBER_LIGHT_400: '#b57A44',
|
|
178
|
+
AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,
|
|
179
|
+
AMBER_LIGHT_600: '#824711',
|
|
180
|
+
AMBER_LIGHT_700: '#61350d',
|
|
181
|
+
AMBER_LIGHT_800: '#412408',
|
|
182
|
+
AMBER_LIGHT_900: '#201204'
|
|
183
|
+
};
|
|
184
|
+
var DARK_AMBER = {
|
|
185
|
+
AMBER_DARK_50: '#fffbea',
|
|
186
|
+
AMBER_DARK_100: '#fff6d4',
|
|
187
|
+
AMBER_DARK_200: '#ffeea8',
|
|
188
|
+
AMBER_DARK_300: '#ffe57d',
|
|
189
|
+
AMBER_DARK_400: '#ffdd51',
|
|
190
|
+
AMBER_DARK_500: BASE_DARK_COLOR.AMBER,
|
|
191
|
+
AMBER_DARK_600: '#ccaa1e',
|
|
192
|
+
AMBER_DARK_700: '#997f17',
|
|
193
|
+
AMBER_DARK_800: '#66550f',
|
|
194
|
+
AMBER_DARK_900: '#4d400b'
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
var DARK = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DARK_BLUE), DARK_GREEN), DARK_PETROL), DARK_PURPLE), DARK_RED), DARK_AMBER);
|
|
198
|
+
|
|
199
|
+
var LIGHT = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_PETROL), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
|
|
200
|
+
|
|
201
|
+
var GRAYS = {
|
|
202
|
+
GRAY_10: '#fafafa',
|
|
203
|
+
GRAY_20: '#edeff0',
|
|
204
|
+
GRAY_30: '#e5e8ea',
|
|
205
|
+
GRAY_40: '#dce0e3',
|
|
206
|
+
GRAY_50: '#cbced1',
|
|
207
|
+
GRAY_60: '#9fa1a7',
|
|
208
|
+
GRAY_70: '#676b71',
|
|
209
|
+
GRAY_80: '#54585f',
|
|
210
|
+
GRAY_90: '#34373d',
|
|
211
|
+
GRAY_95: '#26272c',
|
|
212
|
+
GRAY_100: '#17181a'
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
var COLOR = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, BASE_DARK_COLOR), BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), {}, {
|
|
216
|
+
BLACK: '#000',
|
|
217
|
+
WHITE: '#fff'
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
exports.COLOR = COLOR;
|
|
221
|
+
//# sourceMappingURL=colors-v2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["colors-v2.ts"],"names":["BASE_LIGHT_COLOR","BLUE","GREEN","PETROL","PURPLE","RED","AMBER","BASE_DARK_COLOR","LIGHT_BLUE","BLUE_LIGHT_50","BLUE_LIGHT_100","BLUE_LIGHT_200","BLUE_LIGHT_300","BLUE_LIGHT_400","BLUE_LIGHT_500","BLUE_LIGHT_600","BLUE_LIGHT_700","BLUE_LIGHT_800","BLUE_LIGHT_900","DARK_BLUE","BLUE_DARK_50","BLUE_DARK_100","BLUE_DARK_200","BLUE_DARK_300","BLUE_DARK_400","BLUE_DARK_500","BLUE_DARK_600","BLUE_DARK_700","BLUE_DARK_800","BLUE_DARK_900","LIGHT_GREEN","GREEN_LIGHT_50","GREEN_LIGHT_100","GREEN_LIGHT_200","GREEN_LIGHT_300","GREEN_LIGHT_400","GREEN_LIGHT_500","GREEN_LIGHT_600","GREEN_LIGHT_700","GREEN_LIGHT_800","GREEN_LIGHT_900","DARK_GREEN","GREEN_DARK_50","GREEN_DARK_100","GREEN_DARK_200","GREEN_DARK_300","GREEN_DARK_400","GREEN_DARK_500","GREEN_DARK_600","GREEN_DARK_700","GREEN_DARK_800","GREEN_DARK_900","LIGHT_PETROL","PETROL_LIGHT_50","PETROL_LIGHT_100","PETROL_LIGHT_200","PETROL_LIGHT_300","PETROL_LIGHT_400","PETROL_LIGHT_500","PETROL_LIGHT_600","PETROL_LIGHT_700","PETROL_LIGHT_800","PETROL_LIGHT_900","DARK_PETROL","PETROL_DARK_50","PETROL_DARK_100","PETROL_DARK_200","PETROL_DARK_300","PETROL_DARK_400","PETROL_DARK_500","PETROL_DARK_600","PETROL_DARK_700","PETROL_DARK_800","PETROL_DARK_900","LIGHT_PURPLE","PURPLE_LIGHT_50","PURPLE_LIGHT_100","PURPLE_LIGHT_200","PURPLE_LIGHT_300","PURPLE_LIGHT_400","PURPLE_LIGHT_500","PURPLE_LIGHT_600","PURPLE_LIGHT_700","PURPLE_LIGHT_800","PURPLE_LIGHT_900","DARK_PURPLE","PURPLE_DARK_50","PURPLE_DARK_100","PURPLE_DARK_200","PURPLE_DARK_300","PURPLE_DARK_400","PURPLE_DARK_500","PURPLE_DARK_600","PURPLE_DARK_700","PURPLE_DARK_800","PURPLE_DARK_900","LIGHT_RED","RED_LIGHT_50","RED_LIGHT_100","RED_LIGHT_200","RED_LIGHT_300","RED_LIGHT_400","RED_LIGHT_500","RED_LIGHT_600","RED_LIGHT_700","RED_LIGHT_800","RED_LIGHT_900","DARK_RED","RED_DARK_50","RED_DARK_100","RED_DARK_200","RED_DARK_300","RED_DARK_400","RED_DARK_500","RED_DARK_600","RED_DARK_700","RED_DARK_800","RED_DARK_900","LIGHT_AMBER","AMBER_LIGHT_50","AMBER_LIGHT_100","AMBER_LIGHT_200","AMBER_LIGHT_300","AMBER_LIGHT_400","AMBER_LIGHT_500","AMBER_LIGHT_600","AMBER_LIGHT_700","AMBER_LIGHT_800","AMBER_LIGHT_900","DARK_AMBER","AMBER_DARK_50","AMBER_DARK_100","AMBER_DARK_200","AMBER_DARK_300","AMBER_DARK_400","AMBER_DARK_500","AMBER_DARK_600","AMBER_DARK_700","AMBER_DARK_800","AMBER_DARK_900","DARK","LIGHT","GRAYS","GRAY_10","GRAY_20","GRAY_30","GRAY_40","GRAY_50","GRAY_60","GRAY_70","GRAY_80","GRAY_90","GRAY_95","GRAY_100","COLOR","BLACK","WHITE"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nexport const BASE_LIGHT_COLOR: Record<string, string> = {\n BLUE: '#0667c8',\n GREEN: '#1d7833',\n PETROL: '#01718e',\n PURPLE: '#8944ab',\n RED: '#c20013',\n AMBER: '#a25915',\n};\n\nexport const BASE_DARK_COLOR: Record<string, string> = {\n BLUE: '#54a6ff',\n GREEN: '#30db5b',\n PETROL: '#5de6ff',\n PURPLE: '#da8fff',\n RED: '#ff7770',\n AMBER: '#ffd426',\n};\n\nconst LIGHT_BLUE: Record<string, string> = {\n BLUE_LIGHT_50: '#e7f0fa',\n BLUE_LIGHT_100: '#cde1f4',\n BLUE_LIGHT_200: '#9bc2e9',\n BLUE_LIGHT_300: '#6aa4de',\n BLUE_LIGHT_400: '#3885d3',\n BLUE_LIGHT_500: BASE_LIGHT_COLOR.BLUE,\n BLUE_LIGHT_600: '#0552a0',\n BLUE_LIGHT_700: '#043e78',\n BLUE_LIGHT_800: '#022950',\n BLUE_LIGHT_900: '#19324d',\n};\n\nconst DARK_BLUE: Record<string, string> = {\n BLUE_DARK_50: '#eef7ff',\n BLUE_DARK_100: '#ddedff',\n BLUE_DARK_200: '#bbdbff',\n BLUE_DARK_300: '#98caff',\n BLUE_DARK_400: '#76b8ff',\n BLUE_DARK_500: BASE_DARK_COLOR.BLUE,\n BLUE_DARK_600: '#4385cc',\n BLUE_DARK_700: '#326499',\n BLUE_DARK_800: '#224266',\n BLUE_DARK_900: '#19324d',\n};\n\nconst LIGHT_GREEN: Record<string, string> = {\n GREEN_LIGHT_50: '#e8f1ea',\n GREEN_LIGHT_100: '#d2e4d6',\n GREEN_LIGHT_200: '#a5c9ad',\n GREEN_LIGHT_300: '#77ae85',\n GREEN_LIGHT_400: '#4a935c',\n GREEN_LIGHT_500: BASE_LIGHT_COLOR.GREEN,\n GREEN_LIGHT_600: '#176029',\n GREEN_LIGHT_700: '#11481f',\n GREEN_LIGHT_800: '#0c3014',\n GREEN_LIGHT_900: '#0e421b',\n};\n\nconst DARK_GREEN: Record<string, string> = {\n GREEN_DARK_50: '#ebfcef',\n GREEN_DARK_100: '#d6f8de',\n GREEN_DARK_200: '#acf1bd',\n GREEN_DARK_300: '#83e99d',\n GREEN_DARK_400: '#59e27c',\n GREEN_DARK_500: BASE_DARK_COLOR.GREEN,\n GREEN_DARK_600: '#26af49',\n GREEN_DARK_700: '#1d8337',\n GREEN_DARK_800: '#135824',\n GREEN_DARK_900: '#0e421b',\n};\n\nconst LIGHT_PETROL: Record<string, string> = {\n PETROL_LIGHT_50: '#e5f1f3',\n PETROL_LIGHT_100: '#cce2e7',\n PETROL_LIGHT_200: '#99c6d0',\n PETROL_LIGHT_300: '#67a9b8',\n PETROL_LIGHT_400: '#348da1',\n PETROL_LIGHT_500: BASE_LIGHT_COLOR.PETROL,\n PETROL_LIGHT_600: '#015a6e',\n PETROL_LIGHT_700: '#014352',\n PETROL_LIGHT_800: '#002d37',\n PETROL_LIGHT_900: '#1c454d',\n};\n\nconst DARK_PETROL: Record<string, string> = {\n PETROL_DARK_50: '#effdff',\n PETROL_DARK_100: '#dffaff',\n PETROL_DARK_200: '#bef5ff',\n PETROL_DARK_300: '#9ef0ff',\n PETROL_DARK_400: '#7debff',\n PETROL_DARK_500: BASE_DARK_COLOR.PETROL,\n PETROL_DARK_600: '#4Ab8cc',\n PETROL_DARK_700: '#388a99',\n PETROL_DARK_800: '#255c66',\n PETROL_DARK_900: '#1c454d',\n};\n\nconst LIGHT_PURPLE: Record<string, string> = {\n PURPLE_LIGHT_50: '#f4edf7',\n PURPLE_LIGHT_100: '#e7daee',\n PURPLE_LIGHT_200: '#d0b4dd',\n PURPLE_LIGHT_300: '#b88fcd',\n PURPLE_LIGHT_400: '#a169bc',\n PURPLE_LIGHT_500: BASE_LIGHT_COLOR.PURPLE,\n PURPLE_LIGHT_600: '#6e3689',\n PURPLE_LIGHT_700: '#522967',\n PURPLE_LIGHT_800: '#371b44',\n PURPLE_LIGHT_900: '#412b4d',\n};\n\nconst DARK_PURPLE: Record<string, string> = {\n PURPLE_DARK_50: '#fcf4ff',\n PURPLE_DARK_100: '#f8e9ff',\n PURPLE_DARK_200: '#f0d2ff',\n PURPLE_DARK_300: '#e9bcff',\n PURPLE_DARK_400: '#e1a5ff',\n PURPLE_DARK_500: BASE_DARK_COLOR.PURPLE,\n PURPLE_DARK_600: '#ae72cc',\n PURPLE_DARK_700: '#835699',\n PURPLE_DARK_800: '#573966',\n PURPLE_DARK_900: '#412b4d',\n};\n\nconst LIGHT_RED: Record<string, string> = {\n RED_LIGHT_50: '#f9e6e8',\n RED_LIGHT_100: '#f3ccd0',\n RED_LIGHT_200: '#e799a1',\n RED_LIGHT_300: '#da6671',\n RED_LIGHT_400: '#ce3342',\n RED_LIGHT_500: BASE_LIGHT_COLOR.RED,\n RED_LIGHT_600: '#9b000f',\n RED_LIGHT_700: '#74000b',\n RED_LIGHT_800: '#4e0008',\n RED_LIGHT_900: '#4d2422',\n};\n\nconst DARK_RED: Record<string, string> = {\n RED_DARK_50: '#fff2f1',\n RED_DARK_100: '#ffe4e2',\n RED_DARK_200: '#ffc9c6',\n RED_DARK_300: '#ffada9',\n RED_DARK_400: '#ff928d',\n RED_DARK_500: BASE_DARK_COLOR.RED,\n RED_DARK_600: '#cc5f5a',\n RED_DARK_700: '#994743',\n RED_DARK_800: '#66302d',\n RED_DARK_900: '#4d2422',\n};\n\nconst LIGHT_AMBER: Record<string, string> = {\n AMBER_LIGHT_50: '#f6eee8',\n AMBER_LIGHT_100: '#ecded0',\n AMBER_LIGHT_200: '#dabda1',\n AMBER_LIGHT_300: '#c79b73',\n AMBER_LIGHT_400: '#b57A44',\n AMBER_LIGHT_500: BASE_LIGHT_COLOR.AMBER,\n AMBER_LIGHT_600: '#824711',\n AMBER_LIGHT_700: '#61350d',\n AMBER_LIGHT_800: '#412408',\n AMBER_LIGHT_900: '#201204',\n};\n\nconst DARK_AMBER: Record<string, string> = {\n AMBER_DARK_50: '#fffbea',\n AMBER_DARK_100: '#fff6d4',\n AMBER_DARK_200: '#ffeea8',\n AMBER_DARK_300: '#ffe57d',\n AMBER_DARK_400: '#ffdd51',\n AMBER_DARK_500: BASE_DARK_COLOR.AMBER,\n AMBER_DARK_600: '#ccaa1e',\n AMBER_DARK_700: '#997f17',\n AMBER_DARK_800: '#66550f',\n AMBER_DARK_900: '#4d400b',\n};\n\nconst DARK: Record<string, string> = {\n ...DARK_BLUE,\n ...DARK_GREEN,\n ...DARK_PETROL,\n ...DARK_PURPLE,\n ...DARK_RED,\n ...DARK_AMBER,\n};\n\nconst LIGHT: Record<string, string> = {\n ...LIGHT_BLUE,\n ...LIGHT_GREEN,\n ...LIGHT_PETROL,\n ...LIGHT_PURPLE,\n ...LIGHT_RED,\n ...LIGHT_AMBER,\n};\n\nconst GRAYS: Record<string, string> = {\n GRAY_10: '#fafafa',\n GRAY_20: '#edeff0',\n GRAY_30: '#e5e8ea',\n GRAY_40: '#dce0e3',\n GRAY_50: '#cbced1',\n GRAY_60: '#9fa1a7',\n GRAY_70: '#676b71',\n GRAY_80: '#54585f',\n GRAY_90: '#34373d',\n GRAY_95: '#26272c',\n GRAY_100: '#17181a',\n};\n\nexport const COLOR: any = {\n ...BASE_DARK_COLOR,\n ...BASE_LIGHT_COLOR,\n ...DARK,\n ...LIGHT,\n ...GRAYS,\n BLACK: '#000',\n WHITE: '#fff',\n};\n"],"file":"colors-v2.js"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
```js
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import {jsx} from '@emotion/react';
|
|
4
|
+
import {COLOR, Container, H1, H2, H3, Line} from '@wireapp/react-ui-kit';
|
|
5
|
+
import Color from 'color';
|
|
6
|
+
import {COLOR as Colors, BASE_LIGHT_COLOR, BASE_DARK_COLOR} from './colors-v2';
|
|
7
|
+
|
|
8
|
+
const colorElementStyle = props => ({
|
|
9
|
+
'&::after': {
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
color: '#fff',
|
|
12
|
+
content: 'attr(data-text)',
|
|
13
|
+
display: 'flex',
|
|
14
|
+
fontSize: '10px',
|
|
15
|
+
fontWeight: 600,
|
|
16
|
+
height: '100%',
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
opacity: 0,
|
|
19
|
+
position: 'absolute',
|
|
20
|
+
textAlign: 'center',
|
|
21
|
+
textShadow: '#000 0 0 2px',
|
|
22
|
+
transform: 'scale(1.2)',
|
|
23
|
+
transition: 'all 0.2s ease-in-out',
|
|
24
|
+
whiteSpace: 'pre-wrap',
|
|
25
|
+
width: '100%',
|
|
26
|
+
zIndex: 1,
|
|
27
|
+
},
|
|
28
|
+
'&:hover::after': {
|
|
29
|
+
opacity: 1,
|
|
30
|
+
transform: 'scale(1)',
|
|
31
|
+
},
|
|
32
|
+
cursor: 'pointer',
|
|
33
|
+
backgroundColor: props.backgroundColor,
|
|
34
|
+
border: '1px solid black',
|
|
35
|
+
borderRadius: '40px',
|
|
36
|
+
display: 'inline-block',
|
|
37
|
+
height: '80px',
|
|
38
|
+
position: 'relative',
|
|
39
|
+
width: '80px',
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
const ColorElement = ({name, backgroundColor}) => {
|
|
43
|
+
return (
|
|
44
|
+
<div
|
|
45
|
+
onClick={() => navigator.clipboard.writeText(backgroundColor)}
|
|
46
|
+
css={colorElementStyle({backgroundColor})}
|
|
47
|
+
data-text={`${name}\n${backgroundColor}`}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const filterAndRenderColors = colorToFilter =>
|
|
53
|
+
Object.entries(Colors)
|
|
54
|
+
.filter(([name]) => name.includes(colorToFilter))
|
|
55
|
+
.map(([name, color]) => <ColorElement key={name} name={name} backgroundColor={color} />);
|
|
56
|
+
|
|
57
|
+
<Container>
|
|
58
|
+
<H2>Light UI</H2>
|
|
59
|
+
<H3>Main Accent Colors</H3>
|
|
60
|
+
|
|
61
|
+
{Object.entries(BASE_LIGHT_COLOR).map(([name, color]) => (
|
|
62
|
+
<ColorElement key={name} name={name} backgroundColor={color} />
|
|
63
|
+
))}
|
|
64
|
+
|
|
65
|
+
<H3>Blue</H3>
|
|
66
|
+
{filterAndRenderColors('BLUE_LIGHT')}
|
|
67
|
+
|
|
68
|
+
<H3>Green</H3>
|
|
69
|
+
{filterAndRenderColors('GREEN_LIGHT')}
|
|
70
|
+
|
|
71
|
+
<H3>Petrol</H3>
|
|
72
|
+
{filterAndRenderColors('PETROL_LIGHT')}
|
|
73
|
+
|
|
74
|
+
<H3>Purple</H3>
|
|
75
|
+
{filterAndRenderColors('PURPLE_LIGHT')}
|
|
76
|
+
|
|
77
|
+
<H3>Red</H3>
|
|
78
|
+
{filterAndRenderColors('RED_LIGHT')}
|
|
79
|
+
|
|
80
|
+
<H3>Amber</H3>
|
|
81
|
+
{filterAndRenderColors('AMBER_LIGHT')}
|
|
82
|
+
|
|
83
|
+
<H2>Dark UI</H2>
|
|
84
|
+
<H3>Main Accent Colors</H3>
|
|
85
|
+
|
|
86
|
+
{Object.entries(BASE_DARK_COLOR).map(([name, color]) => (
|
|
87
|
+
<ColorElement key={name} name={name} backgroundColor={color} />
|
|
88
|
+
))}
|
|
89
|
+
|
|
90
|
+
<H3>Blue</H3>
|
|
91
|
+
{filterAndRenderColors('BLUE_DARK')}
|
|
92
|
+
|
|
93
|
+
<H3>Green</H3>
|
|
94
|
+
{filterAndRenderColors('GREEN_DARK')}
|
|
95
|
+
|
|
96
|
+
<H3>Petrol</H3>
|
|
97
|
+
{filterAndRenderColors('PETROL_DARK')}
|
|
98
|
+
|
|
99
|
+
<H3>Purple</H3>
|
|
100
|
+
{filterAndRenderColors('PURPLE_DARK')}
|
|
101
|
+
|
|
102
|
+
<H3>Red</H3>
|
|
103
|
+
{filterAndRenderColors('RED_DARK')}
|
|
104
|
+
|
|
105
|
+
<H3>Amber</H3>
|
|
106
|
+
{filterAndRenderColors('AMBER_DARK')}
|
|
107
|
+
|
|
108
|
+
<H2>Grays</H2>
|
|
109
|
+
{filterAndRenderColors('GRAY')}
|
|
110
|
+
</Container>;
|
|
111
|
+
```
|
|
@@ -52,14 +52,14 @@ var menuOpenButtonStyle = function menuOpenButtonStyle(theme, _ref) {
|
|
|
52
52
|
transition: 'all 0.25s ease-in-out',
|
|
53
53
|
width: '16px'
|
|
54
54
|
},
|
|
55
|
-
'div:nth-
|
|
55
|
+
'div:nth-of-type(1)': {
|
|
56
56
|
transform: open ? 'translateY(6px) rotate(-45deg)' : undefined
|
|
57
57
|
},
|
|
58
|
-
'div:nth-
|
|
58
|
+
'div:nth-of-type(2)': {
|
|
59
59
|
opacity: open ? 0 : undefined,
|
|
60
60
|
transform: open ? 'scale(0, 1)' : undefined
|
|
61
61
|
},
|
|
62
|
-
'div:nth-
|
|
62
|
+
'div:nth-of-type(3)': {
|
|
63
63
|
transform: open ? 'translateY(-6px) rotate(45deg)' : undefined
|
|
64
64
|
}
|
|
65
65
|
}, (0, _defineProperty2["default"])(_ref2, _mediaQueries.media[_mediaQueries.QueryKeys.DESKTOP], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuOpenButton.tsx"],"names":["menuOpenButtonStyle","theme","open","display","div","backgroundColor","general","color","height","margin","transition","width","transform","undefined","opacity","media","QueryKeys","DESKTOP","filterMenuOpenButtonProps","props","MenuOpenButton"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,mBAAkF,GAAG,SAArFA,mBAAqF,CAACC,KAAD;AAAA;;AAAA,MAASC,IAAT,QAASA,IAAT;AAAA;AAChGC,IAAAA,OAAO,EAAE,OADuF;AAEhGC,IAAAA,GAAG,EAAE;AACHC,MAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,KAD5B;AAEHC,MAAAA,MAAM,EAAE,KAFL;AAGHC,MAAAA,MAAM,EAAE,KAHL;AAIHC,MAAAA,UAAU,EAAE,uBAJT;AAKHC,MAAAA,KAAK,EAAE;AALJ,KAF2F;AAShG,
|
|
1
|
+
{"version":3,"sources":["MenuOpenButton.tsx"],"names":["menuOpenButtonStyle","theme","open","display","div","backgroundColor","general","color","height","margin","transition","width","transform","undefined","opacity","media","QueryKeys","DESKTOP","filterMenuOpenButtonProps","props","MenuOpenButton"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAYO,IAAMA,mBAAkF,GAAG,SAArFA,mBAAqF,CAACC,KAAD;AAAA;;AAAA,MAASC,IAAT,QAASA,IAAT;AAAA;AAChGC,IAAAA,OAAO,EAAE,OADuF;AAEhGC,IAAAA,GAAG,EAAE;AACHC,MAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,KAD5B;AAEHC,MAAAA,MAAM,EAAE,KAFL;AAGHC,MAAAA,MAAM,EAAE,KAHL;AAIHC,MAAAA,UAAU,EAAE,uBAJT;AAKHC,MAAAA,KAAK,EAAE;AALJ,KAF2F;AAShG,0BAAsB;AACpBC,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADjC,KAT0E;AAYhG,0BAAsB;AACpBC,MAAAA,OAAO,EAAEZ,IAAI,GAAG,CAAH,GAAOW,SADA;AAEpBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,aAAH,GAAmBW;AAFd,KAZ0E;AAgBhG,0BAAsB;AACpBD,MAAAA,SAAS,EAAEV,IAAI,GAAG,gCAAH,GAAsCW;AADjC;AAhB0E,6CAmB/FE,oBAAMC,wBAAUC,OAAhB,CAnB+F,EAmBpE;AAC1Bd,IAAAA,OAAO,EAAE;AADiB,GAnBoE,qDAsBxF,CAtBwF;AAAA,CAA3F;;;;AAyBP,IAAMe,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACC,KAAD;AAAA,SAAgC,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAAhC;AAAA,CAAlC;;AAEO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACD,KAAD;AAAA,SAC5B;AAAK,IAAA,GAAG,EAAE,aAAClB,KAAD;AAAA,aAAkBD,mBAAmB,CAACC,KAAD,EAAQkB,KAAR,CAArC;AAAA;AAAV,KAAmED,yBAAyB,CAACC,KAAD,CAA5F,GACE,4BADF,EAEE,4BAFF,EAGE,4BAHF,CAD4B;AAAA,CAAvB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {filterProps} from '../../util';\nimport type {Theme} from '../Theme';\n\nexport interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n open?: boolean;\n}\n\nexport const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject = (theme, {open}) => ({\n display: 'block',\n div: {\n backgroundColor: theme.general.color,\n height: '2px',\n margin: '4px',\n transition: 'all 0.25s ease-in-out',\n width: '16px',\n },\n 'div:nth-of-type(1)': {\n transform: open ? 'translateY(6px) rotate(-45deg)' : undefined,\n },\n 'div:nth-of-type(2)': {\n opacity: open ? 0 : undefined,\n transform: open ? 'scale(0, 1)' : undefined,\n },\n 'div:nth-of-type(3)': {\n transform: open ? 'translateY(-6px) rotate(45deg)' : undefined,\n },\n [media[QueryKeys.DESKTOP]]: {\n display: 'none',\n },\n zIndex: 2,\n});\n\nconst filterMenuOpenButtonProps = (props: MenuOpenButtonProps) => filterProps(props, ['open']);\n\nexport const MenuOpenButton = (props: MenuOpenButtonProps) => (\n <div css={(theme: Theme) => menuOpenButtonStyle(theme, props)} {...filterMenuOpenButtonProps(props)}>\n <div />\n <div />\n <div />\n </div>\n);\n"],"file":"MenuOpenButton.js"}
|
|
@@ -40,7 +40,7 @@ var menuSubLinkStyle = function menuSubLinkStyle(theme, props) {
|
|
|
40
40
|
textDecoration: 'none',
|
|
41
41
|
transition: _motions.defaultTransition
|
|
42
42
|
}, (0, _defineProperty2["default"])(_objectSpread2, _mediaQueries.media[_mediaQueries.QueryKeys.DESKTOP], {
|
|
43
|
-
'&:first-
|
|
43
|
+
'&:first-of-type': {
|
|
44
44
|
marginLeft: 0
|
|
45
45
|
},
|
|
46
46
|
'&:last-child': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuSubLink.tsx"],"names":["menuSubLinkStyle","theme","props","color","general","mix","COLOR","BLACK","toString","cursor","fontWeight","textDecoration","transition","defaultTransition","media","QueryKeys","DESKTOP","marginLeft","marginRight","fontSize","margin","textTransform","TABLET_DOWN","border","maxWidth","padding","MenuSubLink"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKO,IAAMA,gBAA4E,GAAG,SAA/EA,gBAA+E,CAACC,KAAD,EAAQC,KAAR;AAAA;;AAAA,yCACvF,qBAAUD,KAAV,EAAiBC,KAAjB,CADuF;AAE1F,eAAW;AACTC,MAAAA,KAAK,EAAE,uBAAMF,KAAK,CAACG,OAAN,CAAcD,KAApB,EAA2BE,GAA3B,CAA+B,uBAAMC,gBAAMC,KAAZ,CAA/B,EAAmD,IAAnD,EAAyDC,QAAzD;AADE,KAF+E;AAK1FL,IAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcD,KALqE;AAM1FM,IAAAA,MAAM,EAAE,SANkF;AAO1FC,IAAAA,UAAU,EAAE,GAP8E;AAQ1FC,IAAAA,cAAc,EAAE,MAR0E;AAS1FC,IAAAA,UAAU,EAAEC;AAT8E,sDAUzFC,oBAAMC,wBAAUC,OAAhB,CAVyF,EAU9D;AAC1B,
|
|
1
|
+
{"version":3,"sources":["MenuSubLink.tsx"],"names":["menuSubLinkStyle","theme","props","color","general","mix","COLOR","BLACK","toString","cursor","fontWeight","textDecoration","transition","defaultTransition","media","QueryKeys","DESKTOP","marginLeft","marginRight","fontSize","margin","textTransform","TABLET_DOWN","border","maxWidth","padding","MenuSubLink"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKO,IAAMA,gBAA4E,GAAG,SAA/EA,gBAA+E,CAACC,KAAD,EAAQC,KAAR;AAAA;;AAAA,yCACvF,qBAAUD,KAAV,EAAiBC,KAAjB,CADuF;AAE1F,eAAW;AACTC,MAAAA,KAAK,EAAE,uBAAMF,KAAK,CAACG,OAAN,CAAcD,KAApB,EAA2BE,GAA3B,CAA+B,uBAAMC,gBAAMC,KAAZ,CAA/B,EAAmD,IAAnD,EAAyDC,QAAzD;AADE,KAF+E;AAK1FL,IAAAA,KAAK,EAAEF,KAAK,CAACG,OAAN,CAAcD,KALqE;AAM1FM,IAAAA,MAAM,EAAE,SANkF;AAO1FC,IAAAA,UAAU,EAAE,GAP8E;AAQ1FC,IAAAA,cAAc,EAAE,MAR0E;AAS1FC,IAAAA,UAAU,EAAEC;AAT8E,sDAUzFC,oBAAMC,wBAAUC,OAAhB,CAVyF,EAU9D;AAC1B,uBAAmB;AACjBC,MAAAA,UAAU,EAAE;AADK,KADO;AAI1B,oBAAgB;AACdC,MAAAA,WAAW,EAAE;AADC,KAJU;AAO1BC,IAAAA,QAAQ,EAAE,MAPgB;AAQ1BC,IAAAA,MAAM,EAAE,eARkB;AAS1BC,IAAAA,aAAa,EAAE;AATW,GAV8D,oDAsBzFP,oBAAMC,wBAAUO,WAAhB,CAtByF,EAsB1D;AAC9BC,IAAAA,MAAM,EAAE,MADsB;AAE9BJ,IAAAA,QAAQ,EAAE,iBAFoB;AAG9BT,IAAAA,UAAU,EAAE,gBAHkB;AAI9Bc,IAAAA,QAAQ,EAAE,OAJoB;AAK9BC,IAAAA,OAAO,EAAE,UALqB;AAM9BJ,IAAAA,aAAa,EAAE;AANe,GAtB0D;AAAA,CAArF;;;;AAgCA,IAAMK,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,gBAAgB,CAACC,KAAD,EAAQC,KAAR,CAAlC;AAAA;AAAV,KAAgEA,KAAhE,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport Color from 'color';\n\nimport {COLOR} from '../../Identity';\nimport {defaultTransition} from '../../Identity/motions';\nimport {QueryKeys, media} from '../../mediaQueries';\nimport {TextProps, textStyle} from '../../Text';\nimport type {Theme} from '../Theme';\n\ntype MenuSubLinkProps<T = HTMLDivElement> = TextProps<T>;\n\nexport const menuSubLinkStyle: <T>(theme: Theme, props: MenuSubLinkProps<T>) => CSSObject = (theme, props) => ({\n ...textStyle(theme, props),\n '&:hover': {\n color: Color(theme.general.color).mix(Color(COLOR.BLACK), 0.16).toString(),\n },\n color: theme.general.color,\n cursor: 'pointer',\n fontWeight: 600,\n textDecoration: 'none',\n transition: defaultTransition,\n [media[QueryKeys.DESKTOP]]: {\n '&:first-of-type': {\n marginLeft: 0,\n },\n '&:last-child': {\n marginRight: 0,\n },\n fontSize: '11px',\n margin: '0 26px 0 10px',\n textTransform: 'uppercase',\n },\n\n [media[QueryKeys.TABLET_DOWN]]: {\n border: 'none',\n fontSize: '32px !important',\n fontWeight: '300 !important',\n maxWidth: '480px',\n padding: '8px 24px',\n textTransform: 'none !important',\n },\n});\n\nexport const MenuSubLink = (props: MenuSubLinkProps) => (\n <div css={(theme: Theme) => menuSubLinkStyle(theme, props)} {...props} />\n);\n"],"file":"MenuSubLink.js"}
|