@wireapp/react-ui-kit 8.14.8 → 8.15.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/package.json +7 -6
- package/src/Form/Checkbox.js +35 -35
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Layout/Theme.d.ts +3 -2
- package/src/Layout/Theme.js +2 -8
- package/src/Layout/Theme.js.map +1 -1
- package/src/Text/Link.d.ts +1 -1
- package/src/Text/Link.js +6 -3
- package/src/Text/Link.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"dependencies": {
|
|
3
|
-
"@emotion/react": "11.9.0",
|
|
4
3
|
"@types/color": "3.0.2",
|
|
5
4
|
"bazinga64": "5.11.6",
|
|
6
5
|
"color": "3.1.3",
|
|
@@ -16,12 +15,13 @@
|
|
|
16
15
|
"@babel/preset-env": "7.14.9",
|
|
17
16
|
"@babel/preset-react": "7.14.5",
|
|
18
17
|
"@babel/preset-typescript": "7.14.5",
|
|
19
|
-
"@emotion/babel-plugin": "11.
|
|
20
|
-
"@emotion/jest": "11.
|
|
18
|
+
"@emotion/babel-plugin": "11.10.2",
|
|
19
|
+
"@emotion/jest": "11.10.0",
|
|
20
|
+
"@emotion/react": "^11.10.4",
|
|
21
21
|
"@hot-loader/react-dom": "17.0.1",
|
|
22
22
|
"@testing-library/jest-dom": "5.16.4",
|
|
23
23
|
"@testing-library/react": "13.3.0",
|
|
24
|
-
"@types/jest": "29.
|
|
24
|
+
"@types/jest": "^29.1.1",
|
|
25
25
|
"@types/react": "18.0.9",
|
|
26
26
|
"@types/webpack-env": "1.16.2",
|
|
27
27
|
"babel-jest": "27.0.6",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
},
|
|
41
41
|
"homepage": "https://wire-react-ui-kit.netlify.app/",
|
|
42
42
|
"peerDependencies": {
|
|
43
|
+
"@emotion/react": "11.10.4",
|
|
43
44
|
"@types/react": "^18.0.9",
|
|
44
45
|
"react": "^18.1.0",
|
|
45
46
|
"react-dom": "^18.1.0"
|
|
@@ -72,6 +73,6 @@
|
|
|
72
73
|
"test:update": "yarn test --updateSnapshot",
|
|
73
74
|
"test:project": "yarn dist && yarn test"
|
|
74
75
|
},
|
|
75
|
-
"version": "8.
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"version": "8.15.0",
|
|
77
|
+
"gitHead": "e7dd80a8798455a49cfa03a9ae7f9c0257e3eee4"
|
|
77
78
|
}
|
package/src/Form/Checkbox.js
CHANGED
|
@@ -2,42 +2,45 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.CheckboxLabel = exports.Checkbox = void 0;
|
|
9
11
|
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
15
|
|
|
16
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
+
|
|
16
18
|
var _react = require("@emotion/react");
|
|
17
19
|
|
|
18
|
-
var _react2 =
|
|
20
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
19
21
|
|
|
20
22
|
var _Text = require("../Text");
|
|
21
23
|
|
|
22
|
-
var _util = require("../util");
|
|
23
|
-
|
|
24
24
|
var _Input = require("./Input");
|
|
25
25
|
|
|
26
|
-
var _excluded = ["
|
|
26
|
+
var _excluded = ["disabled", "markInvalid", "aligncenter", "children"],
|
|
27
|
+
_excluded2 = ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter"];
|
|
28
|
+
|
|
29
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
30
|
+
|
|
31
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
32
|
|
|
28
33
|
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; }
|
|
29
34
|
|
|
30
35
|
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; }
|
|
31
36
|
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
_props$aligncenter = props.aligncenter,
|
|
40
|
-
aligncenter = _props$aligncenter === void 0 ? false : _props$aligncenter;
|
|
37
|
+
var StyledLabel = function StyledLabel(_ref) {
|
|
38
|
+
var disabled = _ref.disabled,
|
|
39
|
+
markInvalid = _ref.markInvalid,
|
|
40
|
+
_ref$aligncenter = _ref.aligncenter,
|
|
41
|
+
aligncenter = _ref$aligncenter === void 0 ? false : _ref$aligncenter,
|
|
42
|
+
children = _ref.children,
|
|
43
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
41
44
|
return (0, _react.jsx)("label", (0, _extends2["default"])({
|
|
42
45
|
css: function css(theme) {
|
|
43
46
|
var _objectSpread2, _objectSpread3;
|
|
@@ -72,7 +75,7 @@ var StyledLabel = function StyledLabel(props) {
|
|
|
72
75
|
color: theme.general.color
|
|
73
76
|
})), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", aligncenter ? 'auto' : '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), (0, _defineProperty2["default"])(_objectSpread3, "borderRadius", '4px'), _objectSpread3));
|
|
74
77
|
}
|
|
75
|
-
},
|
|
78
|
+
}, props), children, (0, _react.jsx)("svg", {
|
|
76
79
|
width: "15",
|
|
77
80
|
height: "13",
|
|
78
81
|
viewBox: "0 0 16 13",
|
|
@@ -82,20 +85,17 @@ var StyledLabel = function StyledLabel(props) {
|
|
|
82
85
|
})));
|
|
83
86
|
};
|
|
84
87
|
|
|
85
|
-
var
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
_ref2$wrapperCSS = _ref2.wrapperCSS,
|
|
97
|
-
wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
|
|
98
|
-
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
88
|
+
var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref3, ref) {
|
|
89
|
+
var _ref3$id = _ref3.id,
|
|
90
|
+
id = _ref3$id === void 0 ? (0, _react2.useId)() : _ref3$id,
|
|
91
|
+
children = _ref3.children,
|
|
92
|
+
style = _ref3.style,
|
|
93
|
+
disabled = _ref3.disabled,
|
|
94
|
+
_ref3$wrapperCSS = _ref3.wrapperCSS,
|
|
95
|
+
wrapperCSS = _ref3$wrapperCSS === void 0 ? {} : _ref3$wrapperCSS,
|
|
96
|
+
markInvalid = _ref3.markInvalid,
|
|
97
|
+
aligncenter = _ref3.aligncenter,
|
|
98
|
+
props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
|
|
99
99
|
return (0, _react.jsx)("div", {
|
|
100
100
|
css: function css(theme) {
|
|
101
101
|
return _objectSpread((0, _defineProperty2["default"])({
|
|
@@ -123,18 +123,18 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
123
123
|
disabled: disabled,
|
|
124
124
|
ref: ref,
|
|
125
125
|
className: _Input.INPUT_CLASSNAME
|
|
126
|
-
},
|
|
126
|
+
}, props)), (0, _react.jsx)(StyledLabel, {
|
|
127
127
|
htmlFor: id,
|
|
128
128
|
disabled: disabled,
|
|
129
|
-
markInvalid:
|
|
130
|
-
aligncenter:
|
|
129
|
+
markInvalid: markInvalid,
|
|
130
|
+
aligncenter: aligncenter
|
|
131
131
|
}, children));
|
|
132
132
|
});
|
|
133
133
|
|
|
134
134
|
exports.Checkbox = Checkbox;
|
|
135
135
|
|
|
136
|
-
var CheckboxLabel = function CheckboxLabel(
|
|
137
|
-
var props = (0, _extends2["default"])({},
|
|
136
|
+
var CheckboxLabel = function CheckboxLabel(_ref4) {
|
|
137
|
+
var props = (0, _extends2["default"])({}, _ref4);
|
|
138
138
|
return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
|
|
139
139
|
css: function css(theme) {
|
|
140
140
|
return _objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({}, props)));
|
package/src/Form/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["StyledLabel","disabled","markInvalid","aligncenter","children","props","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","React","forwardRef","ref","id","style","wrapperCSS","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel"],"mappings":"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","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 {jsx} from '@emotion/react';\nimport React, {useId} from 'react';\n\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n disabled?: boolean;\n markInvalid?: boolean;\n aligncenter?: boolean;\n}\n\nconst StyledLabel = ({disabled, markInvalid, aligncenter = false, children, ...props}: StyledLabelProps) => {\n return (\n <label\n css={(theme: Theme) => ({\n [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n borderColor: theme.general.primaryColor,\n },\n [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n fill: theme.general.backgroundColor,\n },\n [`.${INPUT_CLASSNAME} + & > svg`]: {\n fill: 'none',\n position: 'absolute',\n left: '0.25rem',\n top: '0.25rem',\n },\n ...(!disabled && {\n [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n borderColor: theme.general.primaryColor,\n },\n }),\n [`.${INPUT_CLASSNAME} + &::before`]: {\n background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n ...(!disabled\n ? {\n border: markInvalid\n ? `2px solid ${theme.Checkbox.invalidBorderColor}`\n : `2px solid ${theme.Checkbox.border}`,\n }\n : {\n border: `2px solid ${theme.Checkbox.disableBorderColor}`,\n }),\n borderRadius: '3px',\n boxSizing: 'border-box',\n content: '\"\"',\n display: 'inline-block',\n width: '22px',\n height: '22px',\n lineHeight: 1.4,\n margin: '0 8px 0 0px',\n color: theme.general.color,\n },\n position: 'relative',\n margin: '0 0 0 -16px',\n width: aligncenter ? 'auto' : '100%',\n lineHeight: 1.4,\n display: 'flex',\n opacity: disabled ? 0.56 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n borderRadius: '4px',\n })}\n {...props}\n >\n {children}\n <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n </svg>\n </label>\n );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n id?: string;\n aligncenter?: boolean;\n}\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n CheckboxProps<HTMLInputElement>\n>(({id = useId(), children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, ...props}, ref) => (\n <div\n css={(theme: Theme) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n position: 'relative',\n left: '-0.3rem',\n [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n outline: `1px solid ${theme.general.primaryColor}`,\n outlineOffset: '0.4rem',\n },\n ...wrapperCSS,\n })}\n style={style}\n >\n <input\n type=\"checkbox\"\n id={id}\n style={{\n height: '22px',\n marginBottom: '0',\n opacity: 0,\n width: '22px',\n cursor: disabled ? 'not-allowed' : 'pointer',\n }}\n disabled={disabled}\n ref={ref}\n className={INPUT_CLASSNAME}\n {...props}\n />\n\n <StyledLabel htmlFor={id} disabled={disabled} markInvalid={markInvalid} aligncenter={aligncenter}>\n {children}\n </StyledLabel>\n </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({...props}: CheckboxLabelProps) => (\n <Text\n css={(theme: Theme) => ({\n ...textStyle(theme, {\n ...props,\n }),\n })}\n {...props}\n />\n);\n"],"file":"Checkbox.js"}
|
package/src/Layout/Theme.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
2
|
+
import { jsx, Theme as ETheme } from '@emotion/react';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
export declare enum THEME_ID {
|
|
5
5
|
DARK = "THEME_DARK",
|
|
6
6
|
LIGHT = "THEME_LIGHT",
|
|
7
7
|
DEFAULT = "THEME_DEFAULT"
|
|
8
8
|
}
|
|
9
|
-
export interface Theme {
|
|
9
|
+
export interface Theme extends ETheme {
|
|
10
10
|
Button?: {
|
|
11
11
|
primaryBg: String;
|
|
12
12
|
primaryHoverBg: String;
|
|
@@ -73,5 +73,6 @@ export declare const themes: {
|
|
|
73
73
|
};
|
|
74
74
|
export interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {
|
|
75
75
|
theme?: Theme;
|
|
76
|
+
children: React.ReactNode;
|
|
76
77
|
}
|
|
77
78
|
export declare const ThemeProvider: (props: ThemeProps) => jsx.JSX.Element;
|
package/src/Layout/Theme.js
CHANGED
|
@@ -19,8 +19,6 @@ var _colors = require("../Identity/colors");
|
|
|
19
19
|
|
|
20
20
|
var _colorsV = require("../Identity/colors-v2");
|
|
21
21
|
|
|
22
|
-
var _util = require("../util");
|
|
23
|
-
|
|
24
22
|
var _themes;
|
|
25
23
|
|
|
26
24
|
var THEME_ID;
|
|
@@ -218,14 +216,10 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
|
|
|
218
216
|
}), _themes);
|
|
219
217
|
exports.themes = themes;
|
|
220
218
|
|
|
221
|
-
var filterThemeProps = function filterThemeProps(props) {
|
|
222
|
-
return (0, _util.filterProps)(props, ['theme']);
|
|
223
|
-
};
|
|
224
|
-
|
|
225
219
|
var ThemeProvider = function ThemeProvider(props) {
|
|
226
|
-
return (0, _react.jsx)(_react.ThemeProvider, (0, _extends2["default"])({
|
|
220
|
+
return (0, _react.jsx)(_react.ThemeProvider, (0, _extends2["default"])({}, props, {
|
|
227
221
|
theme: props.theme
|
|
228
|
-
}
|
|
222
|
+
}));
|
|
229
223
|
};
|
|
230
224
|
|
|
231
225
|
exports.ThemeProvider = ThemeProvider;
|
package/src/Layout/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","DEFAULT","Button","primaryBg","primaryHoverBg","primaryActiveBg","primaryActiveBorder","primaryFocusBorder","primaryDisabledBg","primaryDisabledText","tertiaryBg","tertiaryBorder","tertiaryHoverBg","tertiaryHoverBorder","tertiarydisabledBg","tertiaryDisabledBorder","tertiaryActiveBg","Checkbox","background","border","borderFocused","disableBgColor","disableBorderColor","disablecheckedBgColor","invalidBorderColor","IconButton","activePrimaryBgColor","focusBorderColor","hoverPrimaryBgColor","primaryActiveFillColor","primaryBgColor","primaryBorderColor","primaryDisabledBgColor","primaryDisabledBorderColor","primaryHoverBorderColor","secondaryActiveBorderColor","Input","backgroundColor","backgroundColorDisabled","labelColor","placeholderColor","borderHover","Select","borderColor","contrastTextColor","disabledColor","focusedDescriptionColor","optionHoverBg","selectedActiveBg","general","color","dangerColor","primaryColor","contrastColor","focusColor","LIGHT","COLOR_V2","BLUE_LIGHT_50","BLUE_LIGHT_500","GRAY_20","BLUE","WHITE","GRAY_40","GRAY_50","COLOR","GRAY_DARKEN_24","GRAY_80","TEXT","RED","GRAY_70","BASE_LIGHT_COLOR","GRAY_60","DARK","BLUE_DARK_800","BLUE_DARK_600","GRAY_90","GRAY_100","GRAY_95","BLACK_LIGHTEN_24","GRAY_LIGHTEN_88","BLACK","BASE_DARK_COLOR","GRAY_10","filterThemeProps","props","ThemeProvider","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 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 {jsx, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n DARK = 'THEME_DARK',\n LIGHT = 'THEME_LIGHT',\n DEFAULT = 'THEME_DEFAULT',\n}\n\nexport interface Theme {\n Button?: {\n primaryBg: String;\n primaryHoverBg: String;\n primaryActiveBg: String;\n primaryActiveBorder: String;\n primaryFocusBorder: String;\n primaryDisabledBg: String;\n primaryDisabledText: String;\n tertiaryBg: String;\n tertiaryBorder: String;\n tertiaryHoverBg: String;\n tertiaryHoverBorder: String;\n tertiarydisabledBg: String;\n tertiaryDisabledBorder: String;\n tertiaryActiveBg: String;\n };\n IconButton: {\n activePrimaryBgColor: string;\n focusBorderColor: string;\n hoverPrimaryBgColor: string;\n primaryActiveFillColor: string;\n primaryBgColor: string;\n primaryBorderColor: string;\n primaryDisabledBgColor: string;\n primaryDisabledBorderColor: string;\n primaryHoverBorderColor: string;\n secondaryActiveBorderColor: string;\n };\n Checkbox: {\n background: string;\n border: string;\n borderFocused: string;\n disableBgColor: string;\n disableBorderColor: string;\n disablecheckedBgColor: string;\n invalidBorderColor: string;\n };\n general: {\n backgroundColor: string;\n color: string;\n contrastColor: String;\n dangerColor: string;\n focusColor: String;\n primaryColor: string;\n };\n Input: {\n backgroundColor: string;\n backgroundColorDisabled: string;\n placeholderColor: string;\n labelColor: string;\n borderHover: string;\n };\n Select: {\n disabledColor: string;\n contrastTextColor: string;\n borderColor: string;\n focusedDescriptionColor: string;\n optionHoverBg: string;\n selectedActiveBg: String;\n };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n [THEME_ID.DEFAULT]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n Checkbox: {\n background: 'var(--checkbox-background)',\n border: 'var(--checkbox-border)',\n borderFocused: 'var(--accent-color)',\n disableBgColor: 'var(--checkbox-background-disabled)',\n disableBorderColor: 'var(--checkbox-border-disabled)',\n disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',\n invalidBorderColor: 'var(--danger-color)',\n },\n IconButton: {\n activePrimaryBgColor: 'var(--accent-color-highlight)',\n focusBorderColor: 'var(--accent-color-border)',\n hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',\n primaryActiveFillColor: 'var(--icon-primary-active-fill)',\n primaryBgColor: 'var(--icon-button-primary-enabled-bg)',\n primaryBorderColor: 'var(--icon-button-primary-border)',\n primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',\n primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',\n primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',\n secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',\n },\n Input: {\n backgroundColor: 'var(--text-input-background)',\n backgroundColorDisabled: 'var(--text-input-disabled)',\n labelColor: 'var(--text-input-label)',\n placeholderColor: 'var(--text-input-placeholder)',\n borderHover: 'var(--text-input-border-hover)',\n },\n Select: {\n borderColor: 'var(--text-input-border)',\n contrastTextColor: 'var(--text-input-background)',\n disabledColor: 'var(--text-input-placeholder)',\n focusedDescriptionColor: 'var(--select-focused-description)',\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-hover)',\n },\n general: {\n backgroundColor: 'var(--app-bg)',\n color: 'var(--main-color)',\n dangerColor: 'var(--danger-color)',\n primaryColor: 'var(--accent-color)',\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n },\n [THEME_ID.LIGHT]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n IconButton: {\n activePrimaryBgColor: COLOR_V2.BLUE_LIGHT_50,\n focusBorderColor: COLOR_V2.BLUE_LIGHT_500,\n hoverPrimaryBgColor: COLOR_V2.GRAY_20,\n primaryActiveFillColor: COLOR_V2.BLUE,\n primaryBgColor: COLOR_V2.WHITE,\n primaryBorderColor: COLOR_V2.GRAY_40,\n primaryDisabledBgColor: COLOR_V2.GRAY_20,\n primaryDisabledBorderColor: COLOR_V2.GRAY_40,\n primaryHoverBorderColor: COLOR_V2.GRAY_50,\n secondaryActiveBorderColor: 'transparent',\n },\n Input: {\n backgroundColor: COLOR.WHITE,\n backgroundColorDisabled: COLOR_V2.GRAY_20,\n placeholderColor: COLOR.GRAY_DARKEN_24,\n labelColor: COLOR_V2.GRAY_80,\n borderHover: 'var(--text-input-border-hover)',\n },\n general: {\n backgroundColor: COLOR_V2.GRAY_20,\n color: COLOR.TEXT,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n Select: {\n disabledColor: COLOR_V2.GRAY_70,\n contrastTextColor: COLOR.WHITE,\n borderColor: COLOR_V2.GRAY_40,\n focusedDescriptionColor: COLOR_V2.WHITE,\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-hover)',\n },\n Checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_80,\n borderFocused: BASE_LIGHT_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_20,\n disableBorderColor: COLOR_V2.GRAY_60,\n disablecheckedBgColor: COLOR_V2.GRAY_20,\n invalidBorderColor: BASE_LIGHT_COLOR.RED,\n },\n },\n [THEME_ID.DARK]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n IconButton: {\n activePrimaryBgColor: COLOR_V2.BLUE_DARK_800,\n focusBorderColor: COLOR_V2.BLUE_DARK_600,\n hoverPrimaryBgColor: COLOR_V2.GRAY_80,\n primaryActiveFillColor: COLOR.WHITE,\n primaryBgColor: COLOR_V2.GRAY_90,\n primaryBorderColor: COLOR_V2.GRAY_100,\n primaryDisabledBgColor: COLOR_V2.GRAY_95,\n primaryDisabledBorderColor: COLOR_V2.GRAY_90,\n primaryHoverBorderColor: COLOR_V2.GRAY_70,\n secondaryActiveBorderColor: COLOR_V2.BLUE_DARK_800,\n },\n Input: {\n backgroundColor: COLOR.BLACK_LIGHTEN_24,\n backgroundColorDisabled: COLOR.GRAY_100,\n placeholderColor: COLOR.GRAY_LIGHTEN_88,\n labelColor: COLOR_V2.GRAY_40,\n borderHover: 'var(--text-input-border-hover)',\n },\n general: {\n backgroundColor: COLOR.BLACK,\n color: COLOR.WHITE,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n Select: {\n disabledColor: COLOR_V2.GRAY_60,\n contrastTextColor: COLOR.BLACK,\n borderColor: COLOR_V2.GRAY_90,\n focusedDescriptionColor: COLOR_V2.GRAY_40,\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-active)',\n },\n Checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_60,\n borderFocused: BASE_DARK_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_10,\n disableBorderColor: COLOR_V2.GRAY_70,\n disablecheckedBgColor: COLOR_V2.GRAY_60,\n invalidBorderColor: BASE_DARK_COLOR.RED,\n },\n },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n theme?: Theme;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['theme']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n <EmotionThemeProvider theme={props.theme} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}
|
|
1
|
+
{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","DEFAULT","Button","primaryBg","primaryHoverBg","primaryActiveBg","primaryActiveBorder","primaryFocusBorder","primaryDisabledBg","primaryDisabledText","tertiaryBg","tertiaryBorder","tertiaryHoverBg","tertiaryHoverBorder","tertiarydisabledBg","tertiaryDisabledBorder","tertiaryActiveBg","Checkbox","background","border","borderFocused","disableBgColor","disableBorderColor","disablecheckedBgColor","invalidBorderColor","IconButton","activePrimaryBgColor","focusBorderColor","hoverPrimaryBgColor","primaryActiveFillColor","primaryBgColor","primaryBorderColor","primaryDisabledBgColor","primaryDisabledBorderColor","primaryHoverBorderColor","secondaryActiveBorderColor","Input","backgroundColor","backgroundColorDisabled","labelColor","placeholderColor","borderHover","Select","borderColor","contrastTextColor","disabledColor","focusedDescriptionColor","optionHoverBg","selectedActiveBg","general","color","dangerColor","primaryColor","contrastColor","focusColor","LIGHT","COLOR_V2","BLUE_LIGHT_50","BLUE_LIGHT_500","GRAY_20","BLUE","WHITE","GRAY_40","GRAY_50","COLOR","GRAY_DARKEN_24","GRAY_80","TEXT","RED","GRAY_70","BASE_LIGHT_COLOR","GRAY_60","DARK","BLUE_DARK_800","BLUE_DARK_600","GRAY_90","GRAY_100","GRAY_95","BLACK_LIGHTEN_24","GRAY_LIGHTEN_88","BLACK","BASE_DARK_COLOR","GRAY_10","ThemeProvider","props","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 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 {jsx, ThemeProvider as EmotionThemeProvider, Theme as ETheme} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\n\nexport enum THEME_ID {\n DARK = 'THEME_DARK',\n LIGHT = 'THEME_LIGHT',\n DEFAULT = 'THEME_DEFAULT',\n}\n\nexport interface Theme extends ETheme {\n Button?: {\n primaryBg: String;\n primaryHoverBg: String;\n primaryActiveBg: String;\n primaryActiveBorder: String;\n primaryFocusBorder: String;\n primaryDisabledBg: String;\n primaryDisabledText: String;\n tertiaryBg: String;\n tertiaryBorder: String;\n tertiaryHoverBg: String;\n tertiaryHoverBorder: String;\n tertiarydisabledBg: String;\n tertiaryDisabledBorder: String;\n tertiaryActiveBg: String;\n };\n IconButton: {\n activePrimaryBgColor: string;\n focusBorderColor: string;\n hoverPrimaryBgColor: string;\n primaryActiveFillColor: string;\n primaryBgColor: string;\n primaryBorderColor: string;\n primaryDisabledBgColor: string;\n primaryDisabledBorderColor: string;\n primaryHoverBorderColor: string;\n secondaryActiveBorderColor: string;\n };\n Checkbox: {\n background: string;\n border: string;\n borderFocused: string;\n disableBgColor: string;\n disableBorderColor: string;\n disablecheckedBgColor: string;\n invalidBorderColor: string;\n };\n general: {\n backgroundColor: string;\n color: string;\n contrastColor: String;\n dangerColor: string;\n focusColor: String;\n primaryColor: string;\n };\n Input: {\n backgroundColor: string;\n backgroundColorDisabled: string;\n placeholderColor: string;\n labelColor: string;\n borderHover: string;\n };\n Select: {\n disabledColor: string;\n contrastTextColor: string;\n borderColor: string;\n focusedDescriptionColor: string;\n optionHoverBg: string;\n selectedActiveBg: String;\n };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n [THEME_ID.DEFAULT]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n Checkbox: {\n background: 'var(--checkbox-background)',\n border: 'var(--checkbox-border)',\n borderFocused: 'var(--accent-color)',\n disableBgColor: 'var(--checkbox-background-disabled)',\n disableBorderColor: 'var(--checkbox-border-disabled)',\n disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',\n invalidBorderColor: 'var(--danger-color)',\n },\n IconButton: {\n activePrimaryBgColor: 'var(--accent-color-highlight)',\n focusBorderColor: 'var(--accent-color-border)',\n hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',\n primaryActiveFillColor: 'var(--icon-primary-active-fill)',\n primaryBgColor: 'var(--icon-button-primary-enabled-bg)',\n primaryBorderColor: 'var(--icon-button-primary-border)',\n primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',\n primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',\n primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',\n secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',\n },\n Input: {\n backgroundColor: 'var(--text-input-background)',\n backgroundColorDisabled: 'var(--text-input-disabled)',\n labelColor: 'var(--text-input-label)',\n placeholderColor: 'var(--text-input-placeholder)',\n borderHover: 'var(--text-input-border-hover)',\n },\n Select: {\n borderColor: 'var(--text-input-border)',\n contrastTextColor: 'var(--text-input-background)',\n disabledColor: 'var(--text-input-placeholder)',\n focusedDescriptionColor: 'var(--select-focused-description)',\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-hover)',\n },\n general: {\n backgroundColor: 'var(--app-bg)',\n color: 'var(--main-color)',\n dangerColor: 'var(--danger-color)',\n primaryColor: 'var(--accent-color)',\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n },\n [THEME_ID.LIGHT]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n IconButton: {\n activePrimaryBgColor: COLOR_V2.BLUE_LIGHT_50,\n focusBorderColor: COLOR_V2.BLUE_LIGHT_500,\n hoverPrimaryBgColor: COLOR_V2.GRAY_20,\n primaryActiveFillColor: COLOR_V2.BLUE,\n primaryBgColor: COLOR_V2.WHITE,\n primaryBorderColor: COLOR_V2.GRAY_40,\n primaryDisabledBgColor: COLOR_V2.GRAY_20,\n primaryDisabledBorderColor: COLOR_V2.GRAY_40,\n primaryHoverBorderColor: COLOR_V2.GRAY_50,\n secondaryActiveBorderColor: 'transparent',\n },\n Input: {\n backgroundColor: COLOR.WHITE,\n backgroundColorDisabled: COLOR_V2.GRAY_20,\n placeholderColor: COLOR.GRAY_DARKEN_24,\n labelColor: COLOR_V2.GRAY_80,\n borderHover: 'var(--text-input-border-hover)',\n },\n general: {\n backgroundColor: COLOR_V2.GRAY_20,\n color: COLOR.TEXT,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n Select: {\n disabledColor: COLOR_V2.GRAY_70,\n contrastTextColor: COLOR.WHITE,\n borderColor: COLOR_V2.GRAY_40,\n focusedDescriptionColor: COLOR_V2.WHITE,\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-hover)',\n },\n Checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_80,\n borderFocused: BASE_LIGHT_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_20,\n disableBorderColor: COLOR_V2.GRAY_60,\n disablecheckedBgColor: COLOR_V2.GRAY_20,\n invalidBorderColor: BASE_LIGHT_COLOR.RED,\n },\n },\n [THEME_ID.DARK]: {\n Button: {\n primaryBg: 'var(--accent-color)',\n primaryHoverBg: 'var(--button-primary-hover)',\n primaryActiveBg: 'var(--button-primary-active)',\n primaryActiveBorder: 'var(--button-primary-active-border)',\n primaryFocusBorder: 'var(--button-primary-focus-border)',\n primaryDisabledBg: 'var(--button-primary-disabled-bg)',\n primaryDisabledText: 'var(--button-primary-disabled-text)',\n tertiaryBg: 'var(--button-tertiary-bg)',\n tertiaryBorder: 'var(--button-tertiary-border)',\n tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',\n tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',\n tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',\n tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',\n tertiaryActiveBg: 'var(--accent-color-highlight)',\n },\n IconButton: {\n activePrimaryBgColor: COLOR_V2.BLUE_DARK_800,\n focusBorderColor: COLOR_V2.BLUE_DARK_600,\n hoverPrimaryBgColor: COLOR_V2.GRAY_80,\n primaryActiveFillColor: COLOR.WHITE,\n primaryBgColor: COLOR_V2.GRAY_90,\n primaryBorderColor: COLOR_V2.GRAY_100,\n primaryDisabledBgColor: COLOR_V2.GRAY_95,\n primaryDisabledBorderColor: COLOR_V2.GRAY_90,\n primaryHoverBorderColor: COLOR_V2.GRAY_70,\n secondaryActiveBorderColor: COLOR_V2.BLUE_DARK_800,\n },\n Input: {\n backgroundColor: COLOR.BLACK_LIGHTEN_24,\n backgroundColorDisabled: COLOR.GRAY_100,\n placeholderColor: COLOR.GRAY_LIGHTEN_88,\n labelColor: COLOR_V2.GRAY_40,\n borderHover: 'var(--text-input-border-hover)',\n },\n general: {\n backgroundColor: COLOR.BLACK,\n color: COLOR.WHITE,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n contrastColor: 'var(--text-input-background)',\n focusColor: 'var(--accent-color-focus)',\n },\n Select: {\n disabledColor: COLOR_V2.GRAY_60,\n contrastTextColor: COLOR.BLACK,\n borderColor: COLOR_V2.GRAY_90,\n focusedDescriptionColor: COLOR_V2.GRAY_40,\n optionHoverBg: 'var(--accent-color-highlight)',\n selectedActiveBg: 'var(--button-primary-active)',\n },\n Checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_60,\n borderFocused: BASE_DARK_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_10,\n disableBorderColor: COLOR_V2.GRAY_70,\n disablecheckedBgColor: COLOR_V2.GRAY_60,\n invalidBorderColor: BASE_DARK_COLOR.RED,\n },\n },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n theme?: Theme;\n children: React.ReactNode;\n}\n\nexport const ThemeProvider = (props: ThemeProps) => <EmotionThemeProvider {...props} theme={props.theme} />;\n"],"file":"Theme.js"}
|
package/src/Text/Link.d.ts
CHANGED
|
@@ -12,4 +12,4 @@ export interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {
|
|
|
12
12
|
}
|
|
13
13
|
export declare const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject;
|
|
14
14
|
export declare const filterLinkProps: (props: LinkProps) => Object;
|
|
15
|
-
export declare const Link: (props: LinkProps) => jsx.JSX.Element;
|
|
15
|
+
export declare const Link: ({ targetBlank, ...props }: LinkProps) => jsx.JSX.Element;
|
package/src/Text/Link.js
CHANGED
|
@@ -21,7 +21,8 @@ var _util = require("../util");
|
|
|
21
21
|
|
|
22
22
|
var _Text = require("./Text");
|
|
23
23
|
|
|
24
|
-
var _excluded = ["bold", "fontSize", "textTransform", "variant", "color"]
|
|
24
|
+
var _excluded = ["bold", "fontSize", "textTransform", "variant", "color"],
|
|
25
|
+
_excluded2 = ["targetBlank"];
|
|
25
26
|
|
|
26
27
|
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; }
|
|
27
28
|
|
|
@@ -84,12 +85,14 @@ var filterLinkProps = function filterLinkProps(props) {
|
|
|
84
85
|
|
|
85
86
|
exports.filterLinkProps = filterLinkProps;
|
|
86
87
|
|
|
87
|
-
var Link = function Link(
|
|
88
|
+
var Link = function Link(_ref2) {
|
|
89
|
+
var targetBlank = _ref2.targetBlank,
|
|
90
|
+
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
|
|
88
91
|
return (0, _react.jsx)("a", (0, _extends2["default"])({
|
|
89
92
|
css: function css(theme) {
|
|
90
93
|
return linkStyle(theme, props);
|
|
91
94
|
},
|
|
92
|
-
target:
|
|
95
|
+
target: targetBlank && '_blank',
|
|
93
96
|
rel: "noopener noreferrer"
|
|
94
97
|
}, filterLinkProps(props)), props.children);
|
|
95
98
|
};
|
package/src/Text/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Link.tsx"],"names":["LinkVariant","linkStyle","theme","bold","fontSize","textTransform","variant","SECONDARY","color","general","props","cursor","textDecoration","PRIMARY","primaryColor","fontWeight","textUnderlineOffset","transition","defaultTransition","filter","filterLinkProps","Link","targetBlank","children"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA
|
|
1
|
+
{"version":3,"sources":["Link.tsx"],"names":["LinkVariant","linkStyle","theme","bold","fontSize","textTransform","variant","SECONDARY","color","general","props","cursor","textDecoration","PRIMARY","primaryColor","fontWeight","textUnderlineOffset","transition","defaultTransition","filter","filterLinkProps","Link","targetBlank","children"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;;;;;;;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,2BAAAA,W;;AAUL,IAAMC,SAA8D,GAAG,SAAjEA,SAAiE,CAC5EC,KAD4E,QAUzE;AAAA,uBAPDC,IAOC;AAAA,MAPDA,IAOC,0BAPM,IAON;AAAA,2BANDC,QAMC;AAAA,MANDA,QAMC,8BANU,MAMV;AAAA,gCALDC,aAKC;AAAA,MALDA,aAKC,mCALe,WAKf;AAAA,0BAJDC,OAIC;AAAA,MAJDA,OAIC,6BAJSN,WAAW,CAACO,SAIrB;AAAA,wBAHDC,KAGC;AAAA,MAHDA,KAGC,2BAHON,KAAK,CAACO,OAAN,CAAcD,KAGrB;AAAA,MAFEE,KAEF;AACH,uDACK,qBAAUR,KAAV;AAAkBC,IAAAA,IAAI,EAAJA,IAAlB;AAAwBK,IAAAA,KAAK,EAALA,KAAxB;AAA+BJ,IAAAA,QAAQ,EAARA,QAA/B;AAAyCC,IAAAA,aAAa,EAAbA;AAAzC,KAA2DK,KAA3D,EADL;AAEEF,IAAAA,KAAK,EAAEA,KAFT;AAGEG,IAAAA,MAAM,EAAE,SAHV;AAIEC,IAAAA,cAAc,EAAE,MAJlB;AAKE,mCAA+B;AAC7BJ,MAAAA,KAAK,EAAEA;AADsB;AALjC,KAQMF,OAAO,KAAKN,WAAW,CAACa,OAAxB,IAAmC;AACrC,iDAA6C;AAC3CL,MAAAA,KAAK,EAAEN,KAAK,CAACO,OAAN,CAAcK;AADsB,KADR;AAIrCV,IAAAA,QAAQ,EAAE,MAJ2B;AAKrCW,IAAAA,UAAU,EAAE,GALyB;AAMrCV,IAAAA,aAAa,EAAE,MANsB;AAOrCO,IAAAA,cAAc,EAAE,WAPqB;AAQrCI,IAAAA,mBAAmB,EAAE;AARgB,GARzC,GAkBMV,OAAO,KAAKN,WAAW,CAACO,SAAxB,IAAqC;AACvCU,IAAAA,UAAU,EAAEC,0BAD2B;AAEvC,eAAW;AACTC,MAAAA,MAAM,EAAE;AADC;AAF4B,GAlB3C;AAyBD,CApCM;;;;AAsCA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACV,KAAD;AAAA,SAAsB,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAiD,EAAjD,CAAtB;AAAA,CAAxB;;;;AAEA,IAAMW,IAAI,GAAG,SAAPA,IAAO,QAAwC;AAAA,MAAtCC,WAAsC,SAAtCA,WAAsC;AAAA,MAAtBZ,KAAsB;AAC1D,SACE;AACE,IAAA,GAAG,EAAE,aAACR,KAAD;AAAA,aAAkBD,SAAS,CAACC,KAAD,EAAQQ,KAAR,CAA3B;AAAA,KADP;AAEE,IAAA,MAAM,EAAEY,WAAW,IAAI,QAFzB;AAGE,IAAA,GAAG,EAAC;AAHN,KAIMF,eAAe,CAACV,KAAD,CAJrB,GAMGA,KAAK,CAACa,QANT,CADF;AAUD,CAXM","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 {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport enum LinkVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {\n variant?: LinkVariant;\n targetBlank?: Boolean;\n}\n\nexport const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject = (\n theme,\n {\n bold = true,\n fontSize = '11px',\n textTransform = 'uppercase',\n variant = LinkVariant.SECONDARY,\n color = theme.general.color,\n ...props\n },\n) => {\n return {\n ...textStyle(theme, {bold, color, fontSize, textTransform, ...props}),\n color: color,\n cursor: 'pointer',\n textDecoration: 'none',\n '&:visited, &:link, &:active': {\n color: color,\n },\n ...(variant === LinkVariant.PRIMARY && {\n '&:hover, &:visited:hover, &:focus-visible': {\n color: theme.general.primaryColor,\n },\n fontSize: '16px',\n fontWeight: 400,\n textTransform: 'none',\n textDecoration: 'underline',\n textUnderlineOffset: '2px',\n }),\n ...(variant === LinkVariant.SECONDARY && {\n transition: defaultTransition,\n '&:hover': {\n filter: 'brightness(70%)',\n },\n }),\n };\n};\n\nexport const filterLinkProps = (props: LinkProps) => filterProps(filterTextProps(props) as LinkProps, []);\n\nexport const Link = ({targetBlank, ...props}: LinkProps) => {\n return (\n <a\n css={(theme: Theme) => linkStyle(theme, props)}\n target={targetBlank && '_blank'}\n rel=\"noopener noreferrer\"\n {...filterLinkProps(props)}\n >\n {props.children}\n </a>\n );\n};\n"],"file":"Link.js"}
|