@wireapp/react-ui-kit 8.13.3 → 8.13.6

package/src/Form/SelectStyles.js

@@ -31,36 +31,37 @@ var customStyles = function customStyles(theme) {
           selectProps = _ref.selectProps;
       var menuIsOpen = selectProps.menuIsOpen;
       var isSelectDisabled = selectProps.isDisabled;
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, {
-        disabled: isDisabled,
-        markInvalid: markInvalid
-      })), {}, {
-        padding: 0,
-        height: 'auto',
-        minHeight: '48px',
-        '&:-moz-focusring': {
-          color: 'transparent',
-          textShadow: '0 0 0 #000'
-        },
-        position: 'relative'
-      }, isDisabled && {
-        backgroundColor: theme.Input.backgroundColorDisabled,
-        color: theme.Select.disabledColor,
-        cursor: 'default'
-      }), markInvalid && {
-        boxShadow: "0 0 0 1px ".concat(theme.general.dangerColor)
-      }), menuIsOpen && {
-        boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
-      }), !menuIsOpen && {
-        '&:hover': {
-          boxShadow: !isSelectDisabled && "0 0 0 1px ".concat(theme.Select.borderColor)
-        },
-        '&:focus, &:active': {
-          boxShadow: !isSelectDisabled && "0 0 0 1px ".concat(theme.general.primaryColor)
-        }
-      }), {}, {
-        cursor: !isSelectDisabled && 'pointer'
-      });
+      return {
+        '& > div': _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, {
+          disabled: isSelectDisabled,
+          markInvalid: markInvalid
+        })), {}, {
+          padding: 0,
+          height: 'auto',
+          minHeight: '48px',
+          '&:-moz-focusring': {
+            color: 'transparent',
+            textShadow: '0 0 0 #000'
+          },
+          position: 'relative'
+        }, isDisabled && {
+          backgroundColor: theme.Input.backgroundColorDisabled,
+          color: theme.Select.disabledColor,
+          cursor: 'default'
+        }), markInvalid && {
+          boxShadow: "0 0 0 1px ".concat(theme.general.dangerColor)
+        }), menuIsOpen && {
+          boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor),
+          '&:hover': {
+            boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
+          }
+        }), {}, {
+          cursor: !isSelectDisabled && 'pointer',
+          '&:focus:visible, active': {
+            boxShadow: !isSelectDisabled && "0 0 0 1px ".concat(theme.general.primaryColor)
+          }
+        })
+      };
     },
     control: function control() {
       return {
@@ -97,10 +98,11 @@ var customStyles = function customStyles(theme) {
       });
     },
     option: function option(provided, _ref2) {
-      var isDisabled = _ref2.isDisabled,
+      var isMulti = _ref2.isMulti,
+          isDisabled = _ref2.isDisabled,
           isFocused = _ref2.isFocused,
           isSelected = _ref2.isSelected;
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, provided), {}, {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, provided), {}, {
         backgroundColor: theme.Input.backgroundColor,
         color: theme.general.color,
         padding: '10px 18px',
@@ -108,17 +110,38 @@ var customStyles = function customStyles(theme) {
         fontSize: '16px',
         fontWeight: 300,
         lineHeight: '24px'
-      }, isFocused && !isDisabled && {
+      }, isSelected && !isDisabled && !isMulti && {
         background: theme.general.primaryColor,
         borderColor: theme.general.primaryColor,
-        color: theme.Select.contrastTextColor
-      }), {}, {
-        '&:hover, &:active, &:focus': {
-          background: theme.general.primaryColor,
-          borderColor: theme.general.primaryColor,
-          color: theme.Select.contrastTextColor
+        color: theme.Select.contrastTextColor,
+        '&:hover': {
+          backgroundColor: theme.Select.selectedActiveBg
+        },
+        '&:active': {
+          backgroundColor: theme.general.primaryColor,
+          boxShadow: "inset 0 0 0 1px ".concat(theme.Select.selectedActiveBg),
+          color: theme.general.contrastColor
+        }
+      }), isFocused && !isDisabled && !isSelected && {
+        backgroundColor: theme.Select.optionHoverBg,
+        borderColor: theme.Select.optionHoverBg,
+        color: theme.general.color,
+        '&:active': {
+          background: theme.Select.optionHoverBg,
+          boxShadow: "inset 0 0 0 1px ".concat(theme.Select.selectedActiveBg),
+          color: theme.general.color
+        }
+      }), isMulti && isSelected && {
+        backgroundColor: theme.Input.backgroundColor,
+        '&:hover': {
+          backgroundColor: theme.Select.optionHoverBg
+        },
+        '&:active': {
+          background: theme.Select.optionHoverBg,
+          boxShadow: "inset 0 0 0 1px ".concat(theme.Select.selectedActiveBg),
+          color: theme.general.color
         }
-      }, isDisabled && _objectSpread({
+      }), isDisabled && _objectSpread({
         backgroundColor: theme.Input.backgroundColorDisabled,
         color: theme.Select.disabledColor,
         '&:hover, &:active, &:focus': {

package/src/Form/SelectStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SelectStyles.tsx"],"names":["customStyles","theme","markInvalid","indicatorSeparator","display","indicatorsContainer","provided","container","isDisabled","selectProps","menuIsOpen","isSelectDisabled","disabled","padding","height","minHeight","color","textShadow","position","backgroundColor","Input","backgroundColorDisabled","Select","disabledColor","cursor","boxShadow","general","dangerColor","primaryColor","borderColor","control","alignItems","appearance","dropdownIndicator","fill","placeholderColor","menu","borderRadius","marginBottom","marginTop","overflowY","menuList","paddingBottom","paddingTop","option","isFocused","isSelected","fontSize","fontWeight","lineHeight","background","contrastTextColor","borderBottom","valueContainer","width","singleValue"],"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\nimport {Theme} from '../Layout';\nimport {inputStyle} from './Input';\n\nexport const customStyles = (theme: Theme, markInvalid = false) => ({\n  indicatorSeparator: () => ({\n    display: 'none',\n  }),\n  indicatorsContainer: provided => ({\n    ...provided,\n  }),\n  container: (provided, {isDisabled, selectProps}) => {\n    const {menuIsOpen} = selectProps;\n    const isSelectDisabled = selectProps.isDisabled;\n\n    return {\n      ...inputStyle(theme, {disabled: isDisabled, markInvalid}),\n      padding: 0,\n      height: 'auto',\n      minHeight: '48px',\n      '&:-moz-focusring': {\n        color: 'transparent',\n        textShadow: '0 0 0 #000',\n      },\n      position: 'relative',\n      ...(isDisabled && {\n        backgroundColor: theme.Input.backgroundColorDisabled,\n        color: theme.Select.disabledColor,\n        cursor: 'default',\n      }),\n      ...(markInvalid && {\n        boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,\n      }),\n      ...(menuIsOpen && {\n        boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n      }),\n      ...(!menuIsOpen && {\n        '&:hover': {\n          boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.Select.borderColor}`,\n        },\n        '&:focus, &:active': {\n          boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,\n        },\n      }),\n      cursor: !isSelectDisabled && 'pointer',\n    };\n  },\n  control: () => ({\n    display: 'flex',\n    alignItems: 'center',\n    appearance: 'none',\n    padding: '0 8px 0 16px',\n    height: 'auto',\n    minHeight: '48px',\n  }),\n  dropdownIndicator: (provided, selectProps) => {\n    const isSelectDisabled = selectProps.isDisabled;\n    return {\n      ...provided,\n      '& > svg': {\n        fill: isSelectDisabled && theme.Input.placeholderColor,\n      },\n    };\n  },\n  menu: provided => ({\n    ...provided,\n    boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,\n    borderRadius: 12,\n    marginBottom: 0,\n    marginTop: 4,\n    overflowY: 'overlay',\n  }),\n  menuList: provided => ({\n    ...provided,\n    borderRadius: 12,\n    paddingBottom: 0,\n    paddingTop: 0,\n  }),\n  option: (provided, {isDisabled, isFocused, isSelected}) => ({\n    ...provided,\n    backgroundColor: theme.Input.backgroundColor,\n    color: theme.general.color,\n    padding: '10px 18px',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    fontSize: '16px',\n    fontWeight: 300,\n    lineHeight: '24px',\n    ...(isFocused &&\n      !isDisabled && {\n        background: theme.general.primaryColor,\n        borderColor: theme.general.primaryColor,\n        color: theme.Select.contrastTextColor,\n      }),\n    '&:hover, &:active, &:focus': {\n      background: theme.general.primaryColor,\n      borderColor: theme.general.primaryColor,\n      color: theme.Select.contrastTextColor,\n    },\n    ...(isDisabled && {\n      backgroundColor: theme.Input.backgroundColorDisabled,\n      color: theme.Select.disabledColor,\n      '&:hover, &:active, &:focus': {\n        backgroundColor: theme.Select.borderColor,\n        color: theme.Select.disabledColor,\n      },\n      ...(isFocused && {\n        backgroundColor: theme.Select.borderColor,\n        color: theme.Select.disabledColor,\n      }),\n    }),\n    '&:not(:last-of-type)': {\n      borderBottom: `1px solid ${theme.Select.borderColor}`,\n    },\n    '&:first-of-type': {\n      borderRadius: '12px 12px 0 0',\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 12px 12px',\n    },\n  }),\n  valueContainer: provided => ({\n    ...provided,\n    padding: 0,\n    width: '100%',\n    display: 'grid',\n  }),\n  singleValue: (provided, selectProps) => {\n    const isSelectDisabled = selectProps.isDisabled;\n    return {\n      ...provided,\n      color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,\n    };\n  },\n});\n"],"file":"SelectStyles.js"}
+{"version":3,"sources":["SelectStyles.tsx"],"names":["customStyles","theme","markInvalid","indicatorSeparator","display","indicatorsContainer","provided","container","isDisabled","selectProps","menuIsOpen","isSelectDisabled","disabled","padding","height","minHeight","color","textShadow","position","backgroundColor","Input","backgroundColorDisabled","Select","disabledColor","cursor","boxShadow","general","dangerColor","primaryColor","control","alignItems","appearance","dropdownIndicator","fill","placeholderColor","menu","borderRadius","marginBottom","marginTop","overflowY","menuList","paddingBottom","paddingTop","option","isMulti","isFocused","isSelected","fontSize","fontWeight","lineHeight","background","borderColor","contrastTextColor","selectedActiveBg","contrastColor","optionHoverBg","borderBottom","valueContainer","width","singleValue"],"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\nimport {Theme} from '../Layout';\nimport {inputStyle} from './Input';\n\nexport const customStyles = (theme: Theme, markInvalid = false) => ({\n  indicatorSeparator: () => ({\n    display: 'none',\n  }),\n  indicatorsContainer: provided => ({\n    ...provided,\n  }),\n  container: (provided, {isDisabled, selectProps}) => {\n    const {menuIsOpen} = selectProps;\n    const isSelectDisabled = selectProps.isDisabled;\n\n    return {\n      '& > div': {\n        ...inputStyle(theme, {disabled: isSelectDisabled, markInvalid}),\n        padding: 0,\n        height: 'auto',\n        minHeight: '48px',\n        '&:-moz-focusring': {\n          color: 'transparent',\n          textShadow: '0 0 0 #000',\n        },\n        position: 'relative',\n        ...(isDisabled && {\n          backgroundColor: theme.Input.backgroundColorDisabled,\n          color: theme.Select.disabledColor,\n          cursor: 'default',\n        }),\n        ...(markInvalid && {\n          boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,\n        }),\n        ...(menuIsOpen && {\n          boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n          '&:hover': {\n            boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n          },\n        }),\n        cursor: !isSelectDisabled && 'pointer',\n        '&:focus:visible, active': {\n          boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,\n        },\n      },\n    };\n  },\n  control: () => ({\n    display: 'flex',\n    alignItems: 'center',\n    appearance: 'none',\n    padding: '0 8px 0 16px',\n    height: 'auto',\n    minHeight: '48px',\n  }),\n  dropdownIndicator: (provided, selectProps) => {\n    const isSelectDisabled = selectProps.isDisabled;\n    return {\n      ...provided,\n      '& > svg': {\n        fill: isSelectDisabled && theme.Input.placeholderColor,\n      },\n    };\n  },\n  menu: provided => ({\n    ...provided,\n    boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,\n    borderRadius: 12,\n    marginBottom: 0,\n    marginTop: 4,\n    overflowY: 'overlay',\n  }),\n  menuList: provided => ({\n    ...provided,\n    borderRadius: 12,\n    paddingBottom: 0,\n    paddingTop: 0,\n  }),\n  option: (provided, {isMulti, isDisabled, isFocused, isSelected}) => ({\n    ...provided,\n    backgroundColor: theme.Input.backgroundColor,\n    color: theme.general.color,\n    padding: '10px 18px',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    fontSize: '16px',\n    fontWeight: 300,\n    lineHeight: '24px',\n    ...(isSelected &&\n      !isDisabled &&\n      !isMulti && {\n        background: theme.general.primaryColor,\n        borderColor: theme.general.primaryColor,\n        color: theme.Select.contrastTextColor,\n        '&:hover': {\n          backgroundColor: theme.Select.selectedActiveBg,\n        },\n        '&:active': {\n          backgroundColor: theme.general.primaryColor,\n          boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,\n          color: theme.general.contrastColor,\n        },\n      }),\n    ...(isFocused &&\n      !isDisabled &&\n      !isSelected && {\n        backgroundColor: theme.Select.optionHoverBg,\n        borderColor: theme.Select.optionHoverBg,\n        color: theme.general.color,\n        '&:active': {\n          background: theme.Select.optionHoverBg,\n          boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,\n          color: theme.general.color,\n        },\n      }),\n    ...(isMulti &&\n      isSelected && {\n        backgroundColor: theme.Input.backgroundColor,\n        '&:hover': {\n          backgroundColor: theme.Select.optionHoverBg,\n        },\n        '&:active': {\n          background: theme.Select.optionHoverBg,\n          boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,\n          color: theme.general.color,\n        },\n      }),\n    ...(isDisabled && {\n      backgroundColor: theme.Input.backgroundColorDisabled,\n      color: theme.Select.disabledColor,\n      '&:hover, &:active, &:focus': {\n        backgroundColor: theme.Select.borderColor,\n        color: theme.Select.disabledColor,\n      },\n      ...(isFocused && {\n        backgroundColor: theme.Select.borderColor,\n        color: theme.Select.disabledColor,\n      }),\n    }),\n    '&:not(:last-of-type)': {\n      borderBottom: `1px solid ${theme.Select.borderColor}`,\n    },\n    '&:first-of-type': {\n      borderRadius: '12px 12px 0 0',\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 12px 12px',\n    },\n  }),\n  valueContainer: provided => ({\n    ...provided,\n    padding: 0,\n    width: '100%',\n    display: 'grid',\n  }),\n  singleValue: (provided, selectProps) => {\n    const isSelectDisabled = selectProps.isDisabled;\n    return {\n      ...provided,\n      color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,\n    };\n  },\n});\n"],"file":"SelectStyles.js"}

package/src/GlobalCssVariables.js

@@ -45,7 +45,7 @@ var light = function light() {
     // Button
     '--button-primary-disabled-bg': _Identity.COLOR_V2.GRAY_50,
     '--button-primary-disabled-text': _Identity.COLOR_V2.GRAY_80,
-    '--button-tertiary-bg': _Identity.COLOR_V2.GRAY_10,
+    '--button-tertiary-bg': _Identity.COLOR.WHITE,
     '--button-tertiary-border': _Identity.COLOR_V2.GRAY_40,
     '--button-tertiary-hover-bg': _Identity.COLOR_V2.GRAY_20,
     '--button-tertiary-hover-border': _Identity.COLOR_V2.GRAY_50,
@@ -58,6 +58,8 @@ var light = function light() {
     '--text-input-placeholder': _Identity.COLOR_V2.GRAY_70,
     '--text-input-disabled': _Identity.COLOR_V2.GRAY_20,
     '--text-input-label': _Identity.COLOR_V2.GRAY_80,
+    // Select
+    '--select-focused-description': _Identity.COLOR_V2.WHITE,
     // General
     '--danger-color': _Identity.COLOR_V2.RED_LIGHT_500,
     '--app-bg': _Identity.COLOR_V2.GRAY_10,
@@ -96,6 +98,8 @@ var dark = function dark() {
     '--text-input-placeholder': _Identity.COLOR_V2.GRAY_60,
     '--text-input-disabled': _Identity.COLOR_V2.GRAY_100,
     '--text-input-label': _Identity.COLOR_V2.GRAY_40,
+    // Select
+    '--select-focused-description': _Identity.COLOR_V2.GRAY_40,
     // General
     '--danger-color': _Identity.COLOR_V2.RED_DARK_500,
     '--app-bg': _Identity.COLOR_V2.GRAY_95,

package/src/GlobalCssVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GlobalCssVariables.tsx"],"names":["light","COLOR_V2","GRAY_20","GRAY_10","GRAY_60","GRAY_80","GRAY_70","COLOR","WHITE","GRAY_40","GRAY_50","RED_LIGHT_500","BLACK","dark","GRAY_90","GRAY_100","GRAY_95","RED_DARK_500","accentColors","BLUE_LIGHT_500","BLUE_LIGHT_50","BLUE_LIGHT_800","BLUE_LIGHT_400","BLUE_LIGHT_600","BLUE_LIGHT_700","GlobalCssVariables"],"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\n/** @jsx jsx */\nimport {CSSObject} from '@emotion/react';\nimport {COLOR, COLOR_V2} from './Identity';\n\nconst light: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_20,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_10,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_60,\n  '--checkbox-border': COLOR_V2.GRAY_80,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_70,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR.WHITE,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_50,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_50,\n  '--button-primary-disabled-text': COLOR_V2.GRAY_80,\n\n  '--button-tertiary-bg': COLOR_V2.GRAY_10,\n  '--button-tertiary-border': COLOR_V2.GRAY_40,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_50,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.WHITE,\n  '--text-input-border': COLOR_V2.GRAY_40,\n  '--text-input-border-hover': COLOR_V2.GRAY_60,\n  '--text-input-placeholder': COLOR_V2.GRAY_70,\n  '--text-input-disabled': COLOR_V2.GRAY_20,\n  '--text-input-label': COLOR_V2.GRAY_80,\n\n  // General\n  '--danger-color': COLOR_V2.RED_LIGHT_500,\n  '--app-bg': COLOR_V2.GRAY_10,\n  '--main-color': COLOR.BLACK,\n});\n\nconst dark: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_80,\n  '--checkbox-border': COLOR_V2.GRAY_60,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_60,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_80,\n  '--icon-button-primary-border': COLOR_V2.GRAY_100,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_95,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_70,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_70,\n  '--button-primary-disabled-text': COLOR.BLACK,\n\n  '--button-tertiary-bg': COLOR_V2.GRAY_90,\n  '--button-tertiary-border': COLOR_V2.GRAY_100,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_80,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_80,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_95,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.BLACK,\n  '--text-input-border': COLOR_V2.GRAY_80,\n  '--text-input-border-hover': COLOR_V2.GRAY_40,\n  '--text-input-placeholder': COLOR_V2.GRAY_60,\n  '--text-input-disabled': COLOR_V2.GRAY_100,\n  '--text-input-label': COLOR_V2.GRAY_40,\n\n  // General\n  '--danger-color': COLOR_V2.RED_DARK_500,\n  '--app-bg': COLOR_V2.GRAY_95,\n  '--main-color': COLOR.WHITE,\n});\n\nconst accentColors: () => CSSObject = () => ({\n  '--accent-color': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-highlight': COLOR_V2.BLUE_LIGHT_50,\n  '--accent-color-highlight-inversed': COLOR_V2.BLUE_LIGHT_800,\n  '--accent-color-border': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-focus': COLOR_V2.BLUE_LIGHT_400,\n  '--icon-primary-active-fill': COLOR_V2.BLUE_LIGHT_500,\n  '--icon-secondary-active-border': 'transparent',\n  '--button-primary-hover': COLOR_V2.BLUE_LIGHT_600,\n  '--button-primary-active': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-active-border': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-focus-border': COLOR_V2.BLUE_LIGHT_700,\n});\n\nexport const GlobalCssVariables = {\n  light,\n  dark,\n  accentColors,\n};\n"],"file":"GlobalCssVariables.js"}
+{"version":3,"sources":["GlobalCssVariables.tsx"],"names":["light","COLOR_V2","GRAY_20","GRAY_10","GRAY_60","GRAY_80","GRAY_70","COLOR","WHITE","GRAY_40","GRAY_50","RED_LIGHT_500","BLACK","dark","GRAY_90","GRAY_100","GRAY_95","RED_DARK_500","accentColors","BLUE_LIGHT_500","BLUE_LIGHT_50","BLUE_LIGHT_800","BLUE_LIGHT_400","BLUE_LIGHT_600","BLUE_LIGHT_700","GlobalCssVariables"],"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\n/** @jsx jsx */\nimport {CSSObject} from '@emotion/react';\nimport {COLOR, COLOR_V2} from './Identity';\n\nconst light: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_20,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_10,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_60,\n  '--checkbox-border': COLOR_V2.GRAY_80,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_70,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR.WHITE,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_50,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_50,\n  '--button-primary-disabled-text': COLOR_V2.GRAY_80,\n\n  '--button-tertiary-bg': COLOR.WHITE,\n  '--button-tertiary-border': COLOR_V2.GRAY_40,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_50,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.WHITE,\n  '--text-input-border': COLOR_V2.GRAY_40,\n  '--text-input-border-hover': COLOR_V2.GRAY_60,\n  '--text-input-placeholder': COLOR_V2.GRAY_70,\n  '--text-input-disabled': COLOR_V2.GRAY_20,\n  '--text-input-label': COLOR_V2.GRAY_80,\n\n  // Select\n  '--select-focused-description': COLOR_V2.WHITE,\n\n  // General\n  '--danger-color': COLOR_V2.RED_LIGHT_500,\n  '--app-bg': COLOR_V2.GRAY_10,\n  '--main-color': COLOR.BLACK,\n});\n\nconst dark: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_80,\n  '--checkbox-border': COLOR_V2.GRAY_60,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_60,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_80,\n  '--icon-button-primary-border': COLOR_V2.GRAY_100,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_95,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_70,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_70,\n  '--button-primary-disabled-text': COLOR.BLACK,\n\n  '--button-tertiary-bg': COLOR_V2.GRAY_90,\n  '--button-tertiary-border': COLOR_V2.GRAY_100,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_80,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_80,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_95,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.BLACK,\n  '--text-input-border': COLOR_V2.GRAY_80,\n  '--text-input-border-hover': COLOR_V2.GRAY_40,\n  '--text-input-placeholder': COLOR_V2.GRAY_60,\n  '--text-input-disabled': COLOR_V2.GRAY_100,\n  '--text-input-label': COLOR_V2.GRAY_40,\n\n  // Select\n  '--select-focused-description': COLOR_V2.GRAY_40,\n\n  // General\n  '--danger-color': COLOR_V2.RED_DARK_500,\n  '--app-bg': COLOR_V2.GRAY_95,\n  '--main-color': COLOR.WHITE,\n});\n\nconst accentColors: () => CSSObject = () => ({\n  '--accent-color': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-highlight': COLOR_V2.BLUE_LIGHT_50,\n  '--accent-color-highlight-inversed': COLOR_V2.BLUE_LIGHT_800,\n  '--accent-color-border': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-focus': COLOR_V2.BLUE_LIGHT_400,\n  '--icon-primary-active-fill': COLOR_V2.BLUE_LIGHT_500,\n  '--icon-secondary-active-border': 'transparent',\n  '--button-primary-hover': COLOR_V2.BLUE_LIGHT_600,\n  '--button-primary-active': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-active-border': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-focus-border': COLOR_V2.BLUE_LIGHT_700,\n});\n\nexport const GlobalCssVariables = {\n  light,\n  dark,\n  accentColors,\n};\n"],"file":"GlobalCssVariables.js"}

package/src/Layout/Theme.d.ts

@@ -8,62 +8,64 @@ export declare enum THEME_ID {
 }
 export interface Theme {
     Button?: {
-        primaryBg?: String;
-        primaryHoverBg?: String;
-        primaryActiveBg?: String;
-        primaryActiveBorder?: String;
-        primaryFocusBorder?: String;
-        primaryDisabledBg?: String;
-        primaryDisabledText?: String;
-        tertiaryBg?: String;
-        tertiaryBorder?: String;
-        tertiaryHoverBg?: String;
-        tertiaryHoverBorder?: String;
-        tertiarydisabledBg?: String;
-        tertiaryDisabledBorder?: String;
-        tertiaryActiveBg?: String;
+        primaryBg: String;
+        primaryHoverBg: String;
+        primaryActiveBg: String;
+        primaryActiveBorder: String;
+        primaryFocusBorder: String;
+        primaryDisabledBg: String;
+        primaryDisabledText: String;
+        tertiaryBg: String;
+        tertiaryBorder: String;
+        tertiaryHoverBg: String;
+        tertiaryHoverBorder: String;
+        tertiarydisabledBg: String;
+        tertiaryDisabledBorder: String;
+        tertiaryActiveBg: String;
     };
     IconButton: {
-        activePrimaryBgColor?: string;
-        activePrimaryBorderColor?: string;
-        focusBorderColor?: string;
-        hoverPrimaryBgColor?: string;
-        primaryActiveFillColor?: string;
-        primaryBgColor?: string;
-        primaryBorderColor?: string;
-        primaryDisabledBgColor?: string;
-        primaryDisabledBorderColor?: string;
-        primaryHoverBorderColor?: string;
-        secondaryActiveBorderColor?: string;
+        activePrimaryBgColor: string;
+        focusBorderColor: string;
+        hoverPrimaryBgColor: string;
+        primaryActiveFillColor: string;
+        primaryBgColor: string;
+        primaryBorderColor: string;
+        primaryDisabledBgColor: string;
+        primaryDisabledBorderColor: string;
+        primaryHoverBorderColor: string;
+        secondaryActiveBorderColor: string;
     };
     Checkbox: {
-        background?: string;
-        border?: string;
-        borderFocused?: string;
-        disableBgColor?: string;
-        disableBorderColor?: string;
-        disablecheckedBgColor?: string;
-        invalidBorderColor?: string;
+        background: string;
+        border: string;
+        borderFocused: string;
+        disableBgColor: string;
+        disableBorderColor: string;
+        disablecheckedBgColor: string;
+        invalidBorderColor: string;
     };
     general: {
         backgroundColor: string;
         color: string;
-        contrastColor?: String;
-        dangerColor?: string;
-        focusColor?: String;
-        primaryColor?: string;
+        contrastColor: String;
+        dangerColor: string;
+        focusColor: String;
+        primaryColor: string;
     };
     Input: {
         backgroundColor: string;
         backgroundColorDisabled: string;
         placeholderColor: string;
         labelColor: string;
+        borderHover: string;
     };
     Select: {
-        disabledColor?: string;
-        contrastTextColor?: string;
-        borderColor?: string;
-        focusedDescriptionColor?: string;
+        disabledColor: string;
+        contrastTextColor: string;
+        borderColor: string;
+        focusedDescriptionColor: string;
+        optionHoverBg: string;
+        selectedActiveBg: String;
     };
 }
 export declare const themes: {

package/src/Layout/Theme.js

@@ -74,12 +74,16 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
     backgroundColor: 'var(--text-input-background)',
     backgroundColorDisabled: 'var(--text-input-disabled)',
     labelColor: 'var(--text-input-label)',
-    placeholderColor: 'var(--text-input-placeholder)'
+    placeholderColor: 'var(--text-input-placeholder)',
+    borderHover: 'var(--text-input-border-hover)'
   },
   Select: {
     borderColor: 'var(--text-input-border)',
     contrastTextColor: 'var(--text-input-background)',
-    disabledColor: 'var(--text-input-placeholder)'
+    disabledColor: 'var(--text-input-placeholder)',
+    focusedDescriptionColor: 'var(--select-focused-description)',
+    optionHoverBg: 'var(--accent-color-highlight)',
+    selectedActiveBg: 'var(--button-primary-hover)'
   },
   general: {
     backgroundColor: 'var(--app-bg)',
@@ -98,6 +102,12 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
     primaryFocusBorder: 'var(--button-primary-focus-border)',
     primaryDisabledBg: 'var(--button-primary-disabled-bg)',
     primaryDisabledText: 'var(--button-primary-disabled-text)',
+    tertiaryBg: 'var(--button-tertiary-bg)',
+    tertiaryBorder: 'var(--button-tertiary-border)',
+    tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+    tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+    tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+    tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
     tertiaryActiveBg: 'var(--accent-color-highlight)'
   },
   IconButton: {
@@ -116,19 +126,24 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
     backgroundColor: _colors.COLOR.WHITE,
     backgroundColorDisabled: _colorsV.COLOR_V2.GRAY_20,
     placeholderColor: _colors.COLOR.GRAY_DARKEN_24,
-    labelColor: _colorsV.COLOR_V2.GRAY_80
+    labelColor: _colorsV.COLOR_V2.GRAY_80,
+    borderHover: 'var(--text-input-border-hover)'
   },
   general: {
     backgroundColor: _colorsV.COLOR_V2.GRAY_20,
     color: _colors.COLOR.TEXT,
     primaryColor: _colorsV.COLOR_V2.BLUE,
-    dangerColor: _colorsV.COLOR_V2.RED
+    dangerColor: _colorsV.COLOR_V2.RED,
+    contrastColor: 'var(--text-input-background)',
+    focusColor: 'var(--accent-color-focus)'
   },
   Select: {
     disabledColor: _colorsV.COLOR_V2.GRAY_70,
     contrastTextColor: _colors.COLOR.WHITE,
     borderColor: _colorsV.COLOR_V2.GRAY_40,
-    focusedDescriptionColor: _colorsV.COLOR_V2.WHITE
+    focusedDescriptionColor: _colorsV.COLOR_V2.WHITE,
+    optionHoverBg: 'var(--accent-color-highlight)',
+    selectedActiveBg: 'var(--button-primary-hover)'
   },
   Checkbox: {
     background: _colorsV.COLOR_V2.GRAY_20,
@@ -148,6 +163,12 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
     primaryFocusBorder: 'var(--button-primary-focus-border)',
     primaryDisabledBg: 'var(--button-primary-disabled-bg)',
     primaryDisabledText: 'var(--button-primary-disabled-text)',
+    tertiaryBg: 'var(--button-tertiary-bg)',
+    tertiaryBorder: 'var(--button-tertiary-border)',
+    tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+    tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+    tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+    tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
     tertiaryActiveBg: 'var(--accent-color-highlight)'
   },
   IconButton: {
@@ -166,19 +187,24 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.D
     backgroundColor: _colors.COLOR.BLACK_LIGHTEN_24,
     backgroundColorDisabled: _colors.COLOR.GRAY_100,
     placeholderColor: _colors.COLOR.GRAY_LIGHTEN_88,
-    labelColor: _colorsV.COLOR_V2.GRAY_40
+    labelColor: _colorsV.COLOR_V2.GRAY_40,
+    borderHover: 'var(--text-input-border-hover)'
   },
   general: {
     backgroundColor: _colors.COLOR.BLACK,
     color: _colors.COLOR.WHITE,
     primaryColor: _colorsV.COLOR_V2.BLUE,
-    dangerColor: _colorsV.COLOR_V2.RED
+    dangerColor: _colorsV.COLOR_V2.RED,
+    contrastColor: 'var(--text-input-background)',
+    focusColor: 'var(--accent-color-focus)'
   },
   Select: {
     disabledColor: _colorsV.COLOR_V2.GRAY_60,
     contrastTextColor: _colors.COLOR.BLACK,
     borderColor: _colorsV.COLOR_V2.GRAY_90,
-    focusedDescriptionColor: _colorsV.COLOR_V2.GRAY_40
+    focusedDescriptionColor: _colorsV.COLOR_V2.GRAY_40,
+    optionHoverBg: 'var(--accent-color-highlight)',
+    selectedActiveBg: 'var(--button-primary-active)'
   },
   Checkbox: {
     background: _colorsV.COLOR_V2.GRAY_20,

package/src/Layout/Theme.js.map

@@ -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","Select","borderColor","contrastTextColor","disabledColor","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","focusedDescriptionColor","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    activePrimaryBorderColor?: 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  };\n  Select: {\n    disabledColor?: string;\n    contrastTextColor?: string;\n    borderColor?: string;\n    focusedDescriptionColor?: 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    },\n    Select: {\n      borderColor: 'var(--text-input-border)',\n      contrastTextColor: 'var(--text-input-background)',\n      disabledColor: 'var(--text-input-placeholder)',\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      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    },\n    general: {\n      backgroundColor: COLOR_V2.GRAY_20,\n      color: COLOR.TEXT,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\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    },\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      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    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\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    },\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"}
+{"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"}

package/src/Text/Link.d.ts

@@ -8,6 +8,7 @@ export declare enum LinkVariant {
 }
 export interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {
     variant?: LinkVariant;
+    targetBlank?: Boolean;
 }
 export declare const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject;
 export declare const filterLinkProps: (props: LinkProps) => Object;

package/src/Text/Link.js

@@ -60,7 +60,7 @@ var linkStyle = function linkStyle(theme, _ref) {
       color: color
     }
   }, variant === LinkVariant.PRIMARY && {
-    '&:hover, &:visited:hover': {
+    '&:hover, &:visited:hover, &:focus:active': {
       color: theme.general.primaryColor
     },
     fontSize: '16px',
@@ -89,6 +89,7 @@ var Link = function Link(props) {
     css: function css(theme) {
       return linkStyle(theme, props);
     },
+    target: props.targetBlank && '_blank',
     rel: "noopener noreferrer"
   }, filterLinkProps(props)), props.children);
 };

package/src/Text/Link.js.map

@@ -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","children"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;;;;;;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,2BAAAA,W;;AASL,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,gCAA4B;AAC1BL,MAAAA,KAAK,EAAEN,KAAK,CAACO,OAAN,CAAcK;AADK,KADS;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,CAACX,KAAD,EAAsB;AACxC,SACE;AAAG,IAAA,GAAG,EAAE,aAACR,KAAD;AAAA,aAAkBD,SAAS,CAACC,KAAD,EAAQQ,KAAR,CAA3B;AAAA,KAAR;AAAmD,IAAA,GAAG,EAAC;AAAvD,KAAiFU,eAAe,CAACV,KAAD,CAAhG,GACGA,KAAK,CAACY,QADT,CADF;AAKD,CANM","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}\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': {\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 = (props: LinkProps) => {\n  return (\n    <a css={(theme: Theme) => linkStyle(theme, props)} rel=\"noopener noreferrer\" {...filterLinkProps(props)}>\n      {props.children}\n    </a>\n  );\n};\n"],"file":"Link.js"}
+{"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,gDAA4C;AAC1CL,MAAAA,KAAK,EAAEN,KAAK,CAACO,OAAN,CAAcK;AADqB,KADP;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,CAACX,KAAD,EAAsB;AACxC,SACE;AACE,IAAA,GAAG,EAAE,aAACR,KAAD;AAAA,aAAkBD,SAAS,CAACC,KAAD,EAAQQ,KAAR,CAA3B;AAAA,KADP;AAEE,IAAA,MAAM,EAAEA,KAAK,CAACY,WAAN,IAAqB,QAF/B;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:active': {\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 = (props: LinkProps) => {\n  return (\n    <a\n      css={(theme: Theme) => linkStyle(theme, props)}\n      target={props.targetBlank && '_blank'}\n      rel=\"noopener noreferrer\"\n      {...filterLinkProps(props)}\n    >\n      {props.children}\n    </a>\n  );\n};\n"],"file":"Link.js"}